생활코딩

Coding Everybody

코스 전체목록

닫기

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. 밍구리
    윈도우 atom에서 자동 줄바꿈을할경우에는 컨트롤+, 를누른뒤 editor 탭 클릭 Soft Wrap 목록 체크해주시면됩니다
  2. 시깅
    Hello web. 2018.04.13
  3. daaawnstar
    Hello Web ~
  4. 솔백아
    2018.04.12 Hello Web!
  5. 효림
    잘 보고있어요!
  6. 민지당
    잘보구이썽요 ㅎㅎ 정말 재밌어요
  7. Dreaming_Joyy
    Atom editor으로 이제 HTML을 사용해서 WEB 제작을 시작했네요!! Hello web!!
  8. 박정연
    감사합니다! 넘 재밌고 신나요!
  9. 이혁
    설명이 쏙쏙들어옵니다
  10. 조현규
    영상보다 이해가 안될때는 글을 보니 손쉽게 해결되네요..!
    재미있습니다..! 강의 감사드립니다 선생님
  11. 유아
    공부 시작! 18/03/31
  12. 0kim
    완료 03/28/2018
  13. Songhee
    너무 재밌네요 ㅠㅠㅠㅠ
  14. Kelly
    대박 ~ ! ! !

    재미있고 신기해요 ~ ♡
  15. 최인준
    매우 재밌어요!
  16. cactusky
    다시해도 두근!
  17. ㅇㅇ
    감사합니다
  18. 서주희
    오 감사합니닷
    대화보기
    • 제갈량
      강좌 감사합니다. ^^
      저도 Brackets를 쓰고 있는데 아톰에 버금가는 에디터입니다.
      실시간으로 확인할 수 있는 브라우저도 지원하니 좋아요.
    • liganega
      자동 줄바꿈 설명에서 아톰의 최신버전에서는 preference 가 settings로 불립니다.
    • 강의 너무 재밌어요!
    • Orange Vert
      축하드려요옹- 나도 모르게 웃음이!
    • Julia Jihyun Hwang
      감사합니다 너무 강의 재밌고 유익해서 계속 연속해서 듣고있어요 최고최고!
    • TiaFenrir
      좋은강의 감사합니다.
    • 감사합니다
      이런 강의들을 무료로 배포하시다니 정말 감사드립니다ㅠㅠㅠ
    • 좋다
      궁금한게 있는데 그림은 이고잉님이 직접 그리시는 건가요?
    • 김형호
      항상 감사합니다 !
    • 커피조아
      오 신기하네요.
      감사합니다.
    • 김현
      오늘부터 시작합니다. 열심히할게요^_^
    • 배우고 싶다
      목소리가 성우 뺨치시네요
    • 서화원
      목소리 어쩔겨(크윽-심장이ㅜㅜ)

      아, 물론 강의는 다 듣고 죽을겁니다.걱정마세요.ㅎㅎ.
    • 백렘
      10분 4초에 "여러분, 축하드려요~!" 하는거 너무 스윗해요... 이고잉님 목소리 넘나 좋은 것...
    • 강대성
      hellow world는 언제나 가슴을 뛰게 만듭니다.ㅎㅎ
    • 할배
      성공....
    • Jeonghee Gwon
      마지막에 추카드려용~ㅋㅋㅋ고맙습니다.ㅋㅋ
    • Yunsu Park
      오 신기해요!
    • 이피
      Hello web
      Hello World
    • 반자동
      다음!
    • jjcho23
      강의력이 정말 훌륭하세요!!!
    • 홍계선
      너무 잘 가르치시는건지?
      제가 잘 따라가는건지?(아직까지 어렵지는 않지요! ㅎㅎ)
    • Jihyun Lee
      잘봤습니다.
    • 감사합니다.
    • 팽석
      감사합니다!! 처음 접하는데 너무 재밌네요!!
    • 달빈나
      강의 감사합니다!
    • 하아..너무좋아여ㅠㅠㅠㅠ 감사합니다!!!!!!!!!!!!!!!!!!!!!!
    • 염정민
      잘봤습니다
    • 초딩맘
      신기합니다.
    • G로저스
      잘 봤습니다
    • Kwangsoo Koh
      잘 따라가고 있습니다 ^^
    • 코딩학습생
      잘 봤습니다~
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기