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. 신선미
    WOW!! 두근두근! 완료하였습니다!!
  2. 김지윤
    [완료]
  3. hkk_korea
    2019.11.13 학습 완료
  4. 박지호
    감사합니다.
  5. 서로민
    2019.11.10 완료
  6. Channy
    2019-11-08 완료
  7. Chan_Pumpkin
    2019-11-05 완료
  8. 문영태
    지금부터 시작이닷!!
  9. Juhan
    19.11.05 완료
  10. 비주맘
    이제 실전 시작이다 홧팅
  11. 안선재
    감사합니다
  12. 미옹이
    자동 줄 바꾸기 메뉴 못 찾으시는 분을 위해 윈도우용 설명을 추가합니다.

    윈도우용 Atom을 사용하시는 분은 메뉴가 조금 다릅니다.

    Atom - File - Settings - (Atom의 오른쪽 창에 뜸) <>Editor - (화면 하단 부에) Soft Wrap 라고 있습니다. 이걸 v 체크 하세요.
  13. 미옹이
    Ctrl + O를 해보라는 건, Atom 에서 열어 보라는 것이 아니고 웹 브라우저(크롬 추천)에서 열어서 화면에 Hello web이 뜨는지 확인해보라는 뜻입니다.
    대화보기
    • 미옹이
      제가 보기엔 이 강의 시작 전에 컴퓨터에 대한 지식이 왕초보에서 벗어날 정도는 되어야 하지 싶네요.
    • Joanne
      잘 따라서 마쳤습니다. 이 오묘한 기분을 어떻게 표현해얄지...
    • Joanne
      ㅋㅋㅋ 저도 실습 시작동시에 괜히 겁나서 화면 정지 시켜놨어요. 잠시 머리 좀 식히고 시작하려구요. 열심히 하세요!!
      대화보기
      • 2010.10.27 완료
      • 이상민
        2019-10-25 완료
      • 설영환
        모두들 화이팅 입니다!!
      • goldenDS
        ctrl+o 누르고 1.html 파일 열기해도 파일이 안뜨는데 뭐가 잘못된 건지 알 수 있을까요... 아톰에서 말고 그냥 파일 더블클릭하면 페이지 떠는데 아톰에서는 안되네요
      • joara
        20191023/05 HTML 코딩 실습 환경 준비/봤어요....벌써 난관...ㅜㅜ
      • Onold
        opne file누르신거 같은데 new file로 다시 만들어보세요
        대화보기
        • ㅂㅈㄷㅂ
          1.html을 만들려는데
          ENOENT:no such file or directory, open'...' 이라고 뜨는데
          왜 그런걸까요?
        • 개발신
          ctrl+v 누르시면 위에 바가 나오는데 View 메뉴에서 Toggle Meun Bar 누르면 됩니다!
          대화보기
          • 으오
            메뉴바안보이면어뜩해요
          • 으오
            화이팅!!
          • 고병운
            신기하네요
            열심히 하겠습니다
          • 이승연
            20191017 완료
          • jini
            체크
          • jsha
            완료
          • 박민규
            봤어요
          • 람지비전
            완료
          • 하이리
            저도 처음에 atom 다운받고 설치 실패 떴어요. 해당 파일 삭제한 후, 다시 다운로드 받으니 실행 되네요.
          • 김선주
          • Web이란무었인가
            해결하셨나요 ?? 저도 똑같이 뜨네요ㅜㅜ..
            대화보기
            • 핑크
              완료 - 핑크!
            • 오세
              완료
            • 현민수
              20191110 삐약
            • 코딩뉴비
              안녕하세요. 이제 막 강의를 듣고 있는 뉴비입니다.
              좋은 강의를 올려주셔서 정말 감사드려요 ^^
              하지만, 제가 atom을 다운로드 받고 실행해보았지만 '업데이트가 진행되지 않습니다' 팝업과 'Installation has failed'라는 창이 나옵니다. brackets을 써보려 했지만 atom에는 있는 기능이 없는 것 같아서 불편합니다.
              이 문제를 해결할 방법이 있을까요? ㅠㅠ
            • 작은도약!
            • Bomi Seok
              완료! 칭찬해주시니 막 뿌듯해지네요ㅋㅋㅋ
            • ㄱㄱㄱ
              완료
            • 육포
              20191008
            • 20191005
            • 윤석빈
              아톰 설치가 안되는데 제 컴퓨터의 문제일까요?
            • 흥성무
              20191004
            • 김규태
              완료
            • 엄주현
              완료
            • 감자
              수강 완료!
            • 우유병
              다솜 ㅎㅇㅌ
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기