왕초보 엔지니어, 코딩하다

코스 전체목록

닫기

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. ssunme_01
    22.06.27 finish
  2. 예스아이캔
    22.06.24
  3. 코딩 넌 나에게 호기심을 줬어
    아톰 설치 완료
    대화보기
    • 코딩 넌 나에게 호기심을 줬어
      2022.06.22
    • 22.06.21
    • 코드몰라요
      vs짱!
      대화보기
      • 코드몰라요
        220619 -html 수강완료. 빨리 배우고 백엔드해야지..
      • 쌀광부
        2022/6/18 재 수강완료
        아직도 프로그램 사용하실분들은
        1. atom
        2. vscode,
        3. notepad++

        이 세가지중 하나 사용하시면 됩니다.
        아직도 아톰이 짱입니다.
      • 시대의 흐름
        2022/6/11 수강완료!
      • 리언
        220610
      • 원이
        220607
      • 그린2022
        너무 감사합니다!:)
      • 내일도날
        감사합니다~~
      • 가비
        2022-05-28 좋은영상 무료로 배포해주셔서 감사합니다^^
      • 20220527

        첫 시작! 감사합니다.
      • 하쿠나마타타
        20220526

        재시작

        감사합니다.
      • scientist
        220525
      • UK Lee
        22.05.24
      • 뀰뀰
        220522
      • 빡빡
        5/19
      • 달걀
        22/05/18
      • Babystep
        22/05/17
      • Babystep
        22/05/17
      • 김재원
        5/11
      • 생활코수
        5/5
      • 감사합니다.
      • 니파타
        22.04.30
      • pdj870509
        22.04.29
      • 신상민
        완료
      • 피지오겔갓
      • 스톤골렘
        수강완료
      • 22.04.21
      • rhdwhdgu
        22.04.21
      • 리민
        완!
      • 레녹
        ~22.04.18
      • 허은성
        완료
        22.04.16
      • 매듭달열하루
        22.04.12
      • Jisung Song
        22.04.10 수강완료
      • 서우
        22.04.10.
      • 김태훈
        22/04/06/ 실습 준비과정 완료
      • usi_soft
        22/04/06(월) 완료
      • _갈비_
        2022/04/03(일)
        실습 준비과정 완료
      • 완료
      • 2022/04/01 (금)
        코딩 실습준비.
      • 조인우
        코딩 하기위한 에디터 - atom 설치완료!

        오픈, 세이브 등의 약자를 잘 기억!!

        처음으로 웹 페이지를 만드니 두근두근 하네요!!!!둑흔둑흔
      • 프래머
        'HTML 코딩 실습 환경 준비' 완료
        2022-03-17

        코딩을 하기 위해서는 에디터가 필요하다.
        에디터로는 메모장 등을 사용해도 되지만,
        통일을 위해(코딩이 더 편하기도 함) Atom이라는 에디터를 사용한다.
        (물론 에디터는 자유기 때문에, 저는 개인적으로 좋아하는 VSC 사용)

        Ctrl + O를 눌러서 내가 만든 웹을 열 수 있다.
        아무 글자나 적고 .html로 저장한 후 열면 (웹페이지에)글자가 나온다.
      • 녹차
        2022.03.13.
      • 꾸준히가답이다
        오늘도 이어서
      • B_frog
        220307
      • 이윤
        020306
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기