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

코스 전체목록

닫기

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. Steve
    2024.10.02 다시 오지 말자.
  2. 눈농
    24.09.27 완료
  3. Asension
    24.09.20 완료
  4. DMSH
    ㅎㅇㅌ
  5. 냠냠개발자
    완료
  6. goodday
    캉료!
  7. qoeqpeqoeoq
  8. diditdidit
    24.08.06 완
  9. diditdidit
    24.08.02 완료
  10. name_1241
    완료
  11. 반짝반짝
    완료
  12. yeeun4155
    완료
  13. 완료
  14. 김진현
    24.06.17 완료
  15. Sansol Park
    파일 선택 화면에서 1.html을 적고 열기(Open)를 클릭해도 아무 변화가 없는 경우, 다음 단계를 확인해보세요.

    먼저 새 폴더를 생성해야 합니다. 바탕화면 또는 데스크탑에 web이라는 폴더를 만드세요.
    Visual Studio Code에서 해당 폴더를 열어야 합니다. Exploerer 버튼을 누르고, 메뉴에서 'Open Folder'를 선택하세요. 파일 메뉴 밑에서도 'Open Folder'를 선택할 수 있습니다.
    파일을 찾는 화면이 나오면, 새로 만든 web 폴더를 선택하고 열기(Open) 버튼을 누르세요.
    이후에 새 파일을 만들 때는:

    오른쪽 클릭을 해서 'New File'을 선택하세요.
    파일 이름을 정하는 화면이 나오면, 원하는 이름과 확장자를 입력하세요. 예를 들어, 1.html이라고 입력하세요.
    위 단계를 따라 파일을 생성하고 열어보세요. 여전히 문제가 있는 경우, 폴더와 파일 생성 과정에서 실수가 없는지 다시 확인해보세요.
    대화보기
    • Sansol Park
      HTML 파일이 저장되었는데 0KB로 표시되고, Internet Explorer로 파일을 열어도 파일이 열리지 않는 문제를 해결하기 위해 다음 단계를 시도해 보세요:

      Visual Studio Code에서 파일 생성 및 저장 확인:

      파일을 생성할 때, Visual Studio Code에서 오른쪽 클릭하여 New File ...을 선택하고 파일 이름을 지정할 때 확장자가 .html로 끝나는지 확인합니다. 예를 들어, index.html로 저장해야 합니다.
      파일이 제대로 저장되었는지 확인하기 위해 Visual Studio Code에서 파일 내용을 입력한 후, 저장(Ctrl + S 또는 Cmd + S)을 다시 한 번 확인합니다.
      폴더 위치 확인:

      파일을 저장한 폴더가 제대로 설정되었는지 확인합니다. 예를 들어, 바탕화면 또는 데스크탑에 web이라는 폴더를 만들고 그 폴더 안에 파일을 저장해야 합니다.
      파일 크기 확인:

      저장된 파일의 크기가 0KB로 표시된다면, 파일 내용이 제대로 입력되지 않았을 가능성이 있습니다. Visual Studio Code에서 파일을 열어 내용을 다시 입력하고 저장해 보세요.
      브라우저에서 파일 열기:

      Internet Explorer 대신 다른 브라우저(예: Chrome, Firefox)를 사용해 파일을 열어보세요. Internet Explorer가 HTML 파일을 제대로 렌더링하지 못하는 경우가 있습니다.
      위의 단계를 따라도 문제가 해결되지 않는다면, 파일 경로나 저장 방법에 문제가 있을 수 있으므로 다시 한 번 확인해 보시기 바랍니다.
      대화보기
      • 결이
        24.05.29 완료!
      • 폴린
        완료!
      • 할수있다
        완료!
      • 안성
        완료
      • 산불
        완료
      • 코딩앤수학
        2024-05-03 완료
      • 야생의코린이
        2024-05-01 완료
      • 2024-05-01 완료
      • 이사야
        2024-04-26 완료!
      • 맘에드시나요
        실습 준비 완료
      • 키위
        완료
      • astrotak
        24-04-19 완료
      • nathan
        2024-04-19 완료
      • 혁이
        완료
      • 포레스트
        설명을 정말 재밌고 친절하게 잘 알려 주시는 것 같아요 정말 감사합니다!
      • 마우스오른쪽버튼
        완료
      • 곽두식
        24.04.02 완료
      • ssaegyu
        24.4.1 완료
      • 허정우
        20240320 완료
      • hanryang
        2024 BEST WEB DEVELOPMENT EDITOR
        Hello world!
      • 굿모닝
        크롬에서 파일을 여는 방법은 command +o 이다!
      • beginner
        20240227
      • 이든
        24.02.26 - 1일차 완료
      • hg042428
        24.02.22. 감사합니다 ;)
      • jaydenyoon
        2.19-html2
      • 사슴튀김소스
        24.2.18 감사합니다
      • 김돕희
        덕분에 깔았어요~
      • 4월의눈꽃
        20240129
      • 바구
        2024.01.20
      • 레나
        2024.01.20
      • ECLECTIC
        시작
      • 미래도비
        1.12
      • 정현준
        24.01.12 완료
      • 24.01.09
      버전 관리
      egoing@gmail.com
      현재 버전
      선택 버전
      graphittie 자세히 보기