생활코딩

Coding Everybody

코스 전체목록

닫기

HTML 코딩 실습 환경 준비

 

 

---

 

 

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

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

 

 

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

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

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

 

 

이 수업에서 채택한 에디터는
Microsoft에서 만든
Visual Studio Code 입니다.
(Visual Studio가 아닙니다.) 

 

 

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

 

2023 best web development editor

 

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

 

 

 

바탕화면에 web이라는 이름의 폴더를 만들고
이 폴더를 Visual Studio Code로 열어주세요. 

 

 

 

메뉴 > open folder를 선택하고 파일찾기 화면에서 바탕화면으로 이동합니다. 
web 폴더를 만들고 폴더를 엽니다. 

 

 

 

1.html 파일을 생성하겠습니다.
WEB 폴더에서 오른쪽 클릭해서 New File...을 선택합니다.
파일명은 1.html입니다. 

 

 

 

파일의 내용은 Hello world로 할게요.

 

 

 

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

 

 

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

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

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

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

 

 

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

 

 

 

축하합니다.

 


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

댓글

댓글 본문
  1. 고원규
    2023.01.28
  2. Hertz
    2023-01-27
  3. 열공강아지
    1/23
  4. TheDuck
    2023. 01. 18 완료
  5. 김디두
    2023.1.17
  6. the02196
    2023. 01. 14 완료
  7. 박혜원
    2023.01.13
    시청 완료
  8. 초코파이
    혹시 프로그램에서 내용을 넣고 SAVE를 안해서 안나오는 거였을까요??? 하니까 나옵니다.!
    대화보기
    • 초코파이
      안녕하세요. 브라우저를 바꿔서 열어보았는데 하얀 화면만 나옵니다. 제가 뭘 잘못한걸까요? 표시된 파일은 로컬또는 공유 파일이라는데 무언가 설정을 다시 해야하는걸까요? 너무몰라서 죄송해요!
    • alicena
      2023.01.12
    • CometRookie
      첫 발자국을 찍어봅니다. 2023년 1월 10일 화요일
    • wowum7
      완료
    • 벌써 너무 재밌어요 :)
    • AgainstartJH
      2023년 01월 02일 월요일 학습완료!
    • 메론소다맛젤리
      감사합니당 ㅎㅎㅎㅎ atom 말고도 종류가 많아서 고민하다 visual studio code 잘 쓰고 있습니다!
      대화보기
      • 고냥이
        22.12.28. 재밌어요
      • 완주가자
        VSCode로 시작합니다!!
      • 호이수
        22.12.21

        sublime text로 시작했습니다
      • 씨퓨
        22.12.21
        visula studio code 에디터로 시작했습니다!
      • 프론트엔드공부몇년째공부중
        문제없을거같습니다
        에디터는 취향 or 기존에 써온 에디터를 쓰는것도 좋은 방법이죠
        여기서 atom은 선생님이 사용하는 에디터를 알려드린거 뿐인거같아요
        또는 visual studio code를 추천합니다
        대화보기
        • 메론소다맛젤리
          개발왕이 되려는 여행을 시작한 뉴비 해적단입니다. atom은 서비스 종료해서 다운로드가 안 되는데 brackets를 써서 학습해도 문제 없는지 선발대 선배님들의 조언 부탁드립니다!
        • 코딩공부아자잣
          재미있어용 히히
        • current
          22.12.05
        • 아주쉰우유
          22/11/21
        • 빵먹고싶다
          22.11.21
        • 감자
          22.11.21. 복습시작!
        • egoing
          오히려 권장입니다. ㅎㅎ
          대화보기
          • 굿굿
          • 무즈
            22.10.31 첫 코딩!
          • snowfield
            예:)
            대화보기
            • 하잉
              그럼 혹시 Visual Studio Code로 사용해도 되나요?!
            • 신귀중
              감사합니다
            • 22.10.26 화이팅
            • 김태헌
              감사합니다.
            • 김주환
              2022.10.25
            • 아리송
              감사합니다! 2022-10-14
            • 보통사람 박코딩
              할수있다
            • 221006-2
            • 아아뜨아
              221004
            • 김태현
              221003
            • 오늘만사는트롤
              221003
            • 220925
            • been06
              220923
            • 다응
              20220921
            • 봄밤
              시작~
            • 두번째도전
              22.09.16
            • 호로록
              검색해보니 atom이 2022/12/15에 종료된다고 합니다. 저도 vscode로 시작합니다.
            • FailCheck
              2022/09/14
            • 코딩왕초보
              2022.09.12
            • 마미몬
              2022.9.6 'Microsoft Visual Studio'로 시작해봅니다
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기