WEB1 - HTML & Internet

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. 윤수미
    크 감사합니다,
    새로운 즐거움,,
  2. 도도
    고3이라 수능끝나서 취미로 배우고 있는데 재밌어요! 양질의 강의 제공해주셔서 감사합니다
  3. 집게사장
    2023.11.13 수강완료
  4. 박화경
    2023.11.13.월 - 시이작(5)
  5. 므갱이
    11.8
  6. 져니
    10.27 완료
  7. nicktheman
    23.10.26 good
  8. 므갱이
    완료.
  9. 유재원
    완료
  10. KunWoo
    231023
  11. abiooi
    20231021 3일차 시작
  12. 18.10.2023
  13. 코율
    1일치 완
  14. 샌디에고러버
    2일차 수강 완. 진짜 신기합니다.
  15. 산할아버지
    23.10.08
  16. 진화한오소리
    마지막 말씀이 저에게 무엇이든 채울 수 있다고 말해주시는 거 같아서 떨리네요. 저는 open folder가 안 만들어져서 그냥 파일 만들어서 진행했습니다.
  17. 한비치야
    230927 완료
  18. 리니웹
    230926 완료
  19. 율무차
    2023.09.23 완료
  20. 정연세
    230920완
  21. 4Tomorrow
    윈도우 : Ctrl + O
  22. 정윤수
    23.09.03 완
  23. 후리한후리맨
    완료
  24. 이월겨울
    23.08.30 완료
  25. carpediem
    23.08.27 완료
  26. LI_ANLI
    23.08.22 완료
  27. 나쵸
    20230821 완료
  28. 30늦은나이아니라고해줘
    20230821완
  29. 윤슬
    2023,08,13 완료
  30. 양념묻은비니
    230810 완료
  31. 니코니코드
    2023.08.08
  32. 오옹오옹
    23.08.02
  33. 달리세
    2023.07.14
  34. 후리후리
    2023.07.06
  35. 코딩두
    23.07.04 완료
  36. 낸내코코딩
    Hello world~☆
    2023.06.28
  37. 코딩해볼게요
    2023.6.27
  38. 맑고 묽게
    2023.06.22 너무너무 신기해요
  39. 아멜리아
    2023.06.20
  40. 감사합니다.
  41. 어흥
    23.06.08 20:31
  42. 230606
  43. kimshell2
    23.06..05
  44. 이매진
    23.06.03
  45. 얄미
    html 파일은 저장됐는데 0KB뜨고 IE로 파일연결해도 그냥 열어봐도 파일이 열리지가 않는데 어떻게 해야하는걸까요?
  46. 해영
    단축기-->파일선택화면 단계까진 왔는데
    file name에 설정한 1.html을 적고 열면 되나요?
    open을 클릭해도 아무 변화가 없어요
  47. 파시
    23.05.08
  48. 파인만
    23.05.05
    항상 생각하는 점입니다.
    게으른 학생을 위한 최고의 선생님 같으세요 ..
    타고난 강연가(혹은 선생님) 같으십니다.
  49. nightsunny
    23.04.29 check.
  50. Quokka
    2023.04.28
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기