WEB1 - HTML & Internet

HTML 코딩 실습 환경 준비

 

 

---

 

 

기획이 끝났으니 
이제는 코딩하기 위한 
준비를 해보겠습니다. 

코딩을 하기 위해서는
에디터(Editor)라는 프로그램이 필요합니다.

 

 

각자의 운영체제에는
이미 에디터가 준비 되어 있습니다.

  • 윈도 - 메모장
  • 맥 - 텍스트 편집기
  • 리눅스 - gedit, nano, vim

에디터마다 사용법이 다르기 때문에
통일하겠습니다.

 

 

이 수업에서 채택한 에디터는
github.com에서 만든
Atom(아톰)입니다.

 

 

미래에는 Atom이 없어졌을 수도 있고,
더 좋은 에디터가 나왔을 수도 있겠죠.
중요한 것은 Atom의 사용법이 아니고
자신이 필요한 에디터를 찾아내는 능력입니다.
아래와 같은 검색어를 이용해서
자기에게 맞는 도구를 찾을 수 있습니다.

 

html editor

 

아래 주소에서 프로그램을 다운로드해서 설치해주세요.
https://atom.io/

 

 

왼쪽은 프로젝트에서 파일목록입니다. 오른쪽은 선택한 파일을 편집하는 화면입니다.

 

 

저는 편하게 작업하기 위해서 왼쪽에는 웹브라우저를 오른쪽에는 Atom을 배치했습니다.

 

 

먼저 할 것은
실습 파일을 저장할 폴더를 생성하는 것입니다.
이 폴더를 프로젝트 폴더라고 하겠습니다.
윈도우 탐색기를 이용해서
바탕화면에 WEB이라는 디렉터리를 생성해주세요.
(동영상참고 : youtu.be/iRZJHhjh8DU?t=207)

 

 

이제 프로젝트 폴더가 아톰 왼쪽에 표시되게 해볼께요. 메뉴 → File → Add project folder를 선택해서 바탕화면에 생성한 WEB 폴더를 선택해주세요. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=281)

 

 

1.html 파일을 생성하겠습니다. WEB 폴더에서 오른쪽 클릭해서 New File을 선택합니다. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=348)

 

 

방금 생성한 파일이름을 보면 
확장자가 html 입니다.
MS 워드의 확장자는doc,
PDF는 pdf입니다.
웹브라우저에서 볼 수 있는 웹페이지는
확장자가 html 입니다.

 

 

그럼 1.html을 웹브라우저로 열어봅시다. 웹브라우저에서 아래와 같은 단축키를 눌러보세요.

  • 윈도우 : Ctrl + O(알파벳)
  • 맥 : Cmd + O(알파벳)

파일선택 화면이 나올꺼예요.

파일선택 화면이 나오지 않으면 브라우저를 바꿔보세요. 또는 윈도우 탐색기나 맥 파인더에서 1.html 파일을 더블클릭하면 웹브라우저가 실행되면서 웹페이지가 표시 될꺼예요.

 

 

짜잔 이렇게하면 
웹브라우저로 웹페이지를 
열 수 있습니다. 

 

 

이제 화면에 무엇인가를 표시해봅시다. 편집화면에 hello web이라고 입력하고 저장해보세요. (윈도우 : Ctrl + S, 맥 : Cmd + S) (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=553)

 


웹브라우저를 리로드 하면 아래처럼 hello web이 출력됩니다.


 

 

축하합니다.

 


지금까지 웹페이지에 대한 소비자로만 살아오셨다면
이제 생산자로서 첫발을 뗀 것입니다.
신기하고 기쁘지 않나요?
더욱 흥미로운 것들이 기다리고 있습니다.

 

 

자주 묻는 질문

atom 설치가 되지 않습니다. 

atom을 꼭 써야하는 것은 전혀 아닙니다.  더 좋은 대체재들은 얼마든지 있습니다. brackets를 추천드립니다. 

자동 줄바꿈을 하고 싶습니다.

메뉴에서 preference -> editor -> Soft Wrap 항목을 체크해주세요. 참고

댓글

댓글 본문
작성자
비밀번호
  1. 콩용이
    완료(__)
  2. 대희
    완료
  3. biin
    완료!
  4. 김소희
    완료
    감격스러워
  5. 채테리
    11/23 감사합니다.
  6. console.log
    완료!
  7. 컴린이
    완료
  8. 화이팅
    웹페이지를 만들고 만들어준 웹페이지를 웹브라우져로 실행한것 (열어본것)
    : atom 편집기를 통해서 만들었고 ctrl+o 단축기해서 파일을 열어보니 편집기에 입력한 구문 뜸!
  9. asdf
    처음 접하는데 전혀 어렵지않고 쉽게 설명해주셔서 감사합니다
  10. 이고잉팬님
    완료!
  11. 감사합니다!
  12. 배워보자 코딩
    문외한 초보도 겁먹지 않고 따라 갈 수 있는 친절하고 세세한 설명 고맙습니다. 너무 좋네요
  13. 하하지
    이렇게 자세하고 쉽게 무료로 여러 사람이 배울 수 있게 해주셔서 감사해요! 저도 배워서 다른 사람을 도와줄 수 있게 되면 좋겠습니다
  14. Min Sang Shin
    완료
  15. 돼지천재
    감사합니다.
  16. Gihoon Pomme Ryu
    완료. 고맙습니다.
  17. good 입니다 너무 자세히 천천히 하셔서 감동입니다
  18. 감사합니다^^
  19. lastal
    완료~
  20. kaonmir
    조아조아
    전 개인적으로 sublime text가 더 깔끔한 거 같아용
  21. Jacob Han
    Complete
  22. Lee James
    완료
  23. winterer
    흠. 이클립스로 하고 있는데 다르게 적용하면서 하려니 시간이 좀 걸렸네요.
  24. 언젠가는
    확장자 html 이 자동으로 붙는줄 알았는데 아니라 제가 쳤는데 제대로 한 것인지...^^;
    .....(글로만 보고 해서 헛소리를 했네요. 유튜브보니 제가 치는게 맞네요 ㅋㅋ)

    네 신기하고 기쁩니다. 감사합니다.
  25. 섀퍼드
    ㅎㅎ 재밌어요
  26. 아보카도
    ctrl+O 누르고 파일선택은 되는데 웹브라우저가 안 열리시는 분들은 이 웹페이지 참고해보세욤.
    여기 나온데로 패키지 설치하니까 웹페이지 열리네요.

    http://recoveryman.tistory.com/239
  27. 아보카도
    저도 그래요 ㅜㅠ
    대화보기
    • Cancers
      완료
    • BULBON
      완료
    • Jaeyoung Yoo
      생애처음!
    • leesjtj
      hello web
    • 이규호
      실행완료
    • 키보드치는남자
      잘들었습니다!
    • 비오는하루
      hello web!
    • 윤재웅
      오우 성공! 신기하네요. 앞으로도 꾸준히 해보겠습니다.
    • 2018-10-03 완료
    • 뱉구양
      완료!
    • 넘어져서미안해
      2018.09.28 09:33
      완료
    • 권규빈
      이 수업 덕분에 직접 웹사이트를 만들어보는 신기한 경험을 했어요!너무 신기학 앞으로도 열심히 하겠습니다!
    • KYOCHAN87
      완료
    • html박살내기
      완료! 감사합니다!
    • 정자윤
      완료했습니다.
    • 달코야
      감사합니다!
    • 새싹
      안녕하세요! 선생님 강의 잘 듣고 있어요!
      하나 질문이 있습니다.

      전 맥OS를 사용하는데 아톰을 실행하고 한글을 입력하니 웹브라우저에서 한글이 깨져서 나와요.
      쉬운 해결 방법이 없을까요?
    • 완료
    • twinpooh@gmail.com
      카렌, 에델과 완료
    • 권용진
      감사합니다.
    • 김동현
      이제 시작이군요. 감사합니다!
    • 박신우
      9/10 시작!
    • 이현식
      1과 완료네요
      기대가 많이 됩니다 감사합니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기