생활코딩

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. egoing
    이거 끝까지 공부하시고 아래 수업을 들으시면 됩니다.
    https://opentutorials.org......276
    대화보기
    • 시내짱
      웹싸이트 도메인을 구매해야하나요?
    • 신혜성
      2018.06.20 Hello Web !
    • 잼잼
      ㅎㅎ컴퓨터랑 전혀 친하지않은 문과출신인데 새로운 공부가 되니 너무너무 재밌네요!! 헬로우웹 하나 뜬 거로 행복해요ㅋㅋㅋ
    • egoing
      alt 키를 눌러보세요~
      대화보기
      • atom을 설치했는데 메뉴 탭(File,Edit,--)가 나타나지 않아 10번도 더 재설치해도 마찬가지^^ ?????
      • 바다의왕자
        장거리 열차가 출발한 느낌입니다.
      • itshyejin
        축하드려요옹 ㅎㅎㅎㅎㅎㅎ 열심히 할게요
      • 저는 삼성 노트북으로 윈도우 10 쓰고 있는데, atom 설치해도 바탕화면이나 시작 메뉴에 설치 파일이 보이지 않아서 실행 못 시키는 분들께 도움 드립니다.
        저도 같은 증상이 생겼고, 재설치해봐도 그대로였습니다.
        이때는 C 드라이브에서 탐색기를 통해서 atom을 검색해 보면 되는 것 같습니다.
        제 경우에는 C:\Users\SAMSUNG\AppData\Local\atom 폴더에 실행 파일이 있더라구요.
        다만 AppData 폴더는 숨김 폴더로 되어 있어서, 숨김 해제를 설정해야 폴더가 보였습니다.
        그리고나서 atom 실행파일을 마우스 우클릭해서 "시작 화면에 고정"시켜서 편하게 등록 후 사용하고 있습니다.
        같은 문제 생기시는 분 계시면 참고하시면 좋을 것 같습니다~
      • 뉴크민둥
        우아 오늘부터 시작했는데 이제 쭉 한 번 해볼게요 ㅎㅎ
        무료강의 올려주셔서 감사합니다
      • ㅎㅎ 감사합니다 재밌어요
      • 이예나
        ㅎㅎㅎ축하드려요옹~ ㅎㅎㅎㅎ감사합니다 설레네요 ㅎㅎ_180518
      • 콩잇
        잼나네요 ㅋㅋㅋㅋ
      • 오창선
        50대 중반에 새롭게 도전해 봅니다만 쉽지는 않네요....ㅠㅠ
        하지만 성공은 했구요.... 젊은 친구들보다 100배이상 노력해야 될듯~~
        아무튼 정말 감사합니다~~^^
      • 공부가좋아
        감사합니다.
        짱입니다.
      • yamaDeus
        감사합니다.
      • 와우
        잼써용~ 감사합니다!
      • 햅싸
        0511 감사합니다!
      • egoing
        말씀하신 것 모드 같은 용도의 서로 간의 경쟁자입니다
        대화보기
        • 전 윈도우7 쓰는데 다운받은 후에 프로그램 검색해도 안뜨거든요. 그래서 브래킷을 다운 받으니 브래킷은 목록에 있네요. 두 프로그램은 사용하는데 차이가 없겠죠? 비주얼 스튜디오 코드도 에디터인가요? 완전 입문자라 모르는게 많아요. 언젠가 댓글달아주시는 분들처럼 많이 알게 되었으면 좋겠네요.
        • htmlhm
          안내하는데 윈 비스타 쓰는 분은 brackets 다운해야 해요
        • htmlhm
          전 비주얼 스튜디오 코드로 기본을 만들고, 아톰으로 마무리합니다~
        • 최동희
          윈도우에서는 바로가기 아이콘이 없더라도 시작메뉴에 있는 경우가 많고, 그런 경우에 윈도우키(창문 모양 키) 누르시고 거기에서 해당 프로그램 이름 적으시면 해당 이름의 프로그램이 검색되어 나옵니다.
          대화보기
          • 아톰을 다운받는데 다운받으면 에디터는 실행이 되는데,
            바탕화면에 바로가기가 생성이 안될때는 어떻게 해야 하나요?
            다음에 열려고 하면 바로가기 아이콘이 없으니 어떻게 열어야 할지 몰라
            계속 다운받기를 하고 있어요.... 어떻게 해야할까요.
          • egoing
            넵 그냥 쓰시면 됩니다
            대화보기
            • poket73
              궁금해요 .. 어프리케이션?만드는 강좌였나요 .. 비트나미랑 아파치 설치하라고해서 설치해놨었는데 그냥 사용하면되는건가요?? ㅠㅠ
            • ctrl +o 파일 열기했는데 브라우저가 열리지 않습니다. 왜이런 건가요 ?
            • 밍구리
              윈도우 atom에서 자동 줄바꿈을할경우에는 컨트롤+, 를누른뒤 editor 탭 클릭 Soft Wrap 목록 체크해주시면됩니다
            • 시깅
              Hello web. 2018.04.13
            • daaawnstar
              Hello Web ~
            • 솔백아
              2018.04.12 Hello Web!
            • 효림
              잘 보고있어요!
            • 민지당
              잘보구이썽요 ㅎㅎ 정말 재밌어요
            • Dreaming_Joyy
              Atom editor으로 이제 HTML을 사용해서 WEB 제작을 시작했네요!! Hello web!!
            • 박정연
              감사합니다! 넘 재밌고 신나요!
            • 이혁
              설명이 쏙쏙들어옵니다
            • 조현규
              영상보다 이해가 안될때는 글을 보니 손쉽게 해결되네요..!
              재미있습니다..! 강의 감사드립니다 선생님
            • 유아
              공부 시작! 18/03/31
            • 완료 03/28/2018
            • Songhee
              너무 재밌네요 ㅠㅠㅠㅠ
            • Kelly
              대박 ~ ! ! !

              재미있고 신기해요 ~ ♡
            • 최인준
              매우 재밌어요!
            • cactusky
              다시해도 두근!
            • ㅇㅇ
              감사합니다
            • 서주희
              오 감사합니닷
              대화보기
              • 제갈량
                강좌 감사합니다. ^^
                저도 Brackets를 쓰고 있는데 아톰에 버금가는 에디터입니다.
                실시간으로 확인할 수 있는 브라우저도 지원하니 좋아요.
              • liganega
                자동 줄바꿈 설명에서 아톰의 최신버전에서는 preference 가 settings로 불립니다.
              • 강의 너무 재밌어요!
              • Orange Vert
                축하드려요옹- 나도 모르게 웃음이!
              • Julia Jihyun Hwang
                감사합니다 너무 강의 재밌고 유익해서 계속 연속해서 듣고있어요 최고최고!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기