안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.
오늘은 HTML, CSS, JavaScript 등의 웹 프로그래밍 공부를 위한 개발환경을 구축해보는 시간을 갖겠습니다.
가장 먼저 해주셔야 할 것은 VS code의 설치입니다.
아직 설치가 되지 않으신분들께서는 아래의 글을 참고하셔서 설치를 완료한 후에 아래의 내용을 따라 와주세요!
2021.03.05 - [파이썬 기초/개발환경 구축] - [코딩유치원] 파이썬 개발환경 구축 3편 (VS code 설치 및 초기설정)
1. 프로젝트 폴더 만들기
가장 처음할 것은 HTML이나 기타 파일들을 전부 넣어두는 하나의 프로젝트용 폴더를 만드는 것입니다.
위치는 원하시는 어느 곳이든 상관없습니다. 이름은 제가 테스트해보니 한글로 만드셔도 작동하지만 웬만하면 영어로 해주세요.
보통 외국 프로그램들은 한글이랑 안 친해서 오류가 생기는 경우가 많거든요.
그리고 폴더를 생성하지 않고 그냥 바탕화면이나 기존 폴더를 사용해도 되지만 추천드리지 않아요.
나중에 파일을 찾을 때도 힘들고, 프로젝트를 하면서도 직관성이 떨어지니까요!
폴더를 만드셨으면 메뉴 텝에서 파일-열기를 선택하셔서 생성하신 폴더를 열어주세요.
2. HTML 파일 만들기
그러면 위의 그림처럼 화면이 나올텐데요. 좌측 상단을 보시면 +표시가 있는 아이콘이 2개 보이실 거에요.
왼쪽이 파일을 생성하는 아이콘이고, 오른쪽이 폴더를 생성하는 아이콘입니다. (물론 우리가 방금 만든 프로젝트 폴더 안에요)
html 문서(.html)를 작성하기 위해서는 파일 생성 아이콘을 클릭 후, 파일 이름.html으로 이름을 지어줍니다.
저는 first_web.html로 파일을 생성했습니다. 그리고는 아래와 같이 아주 기초적인 html 문서를 만들어 보았습니다.
워낙 간단한데다가 한 번 직접 입력해보시라고 소스코드는 별도로 올리지 않겠습니다.
자 여기까지 따라 하셨으면 html 파일을 한 번 실행시켜 볼 차례인데요.
해당 폴더에 직접 들어가셔서 파일을 더블 클릭 하셔도 되지만, 매번 그러기엔 번거롭잖아요?!
그래서 VS code에서 아래의 확장(Extension)을 설치해줍니다.
3. Open in Browser Extension 설치
Open in Browser는 VS Code에서 즉시 html 문서를 기본 웹 브라우저로 실행시킬 수 있도록 해주는 익스텐션입니다.
이 익스텐션으로 인해 우리는 html을 작성한 후, html 문서가 있는 파일에 들어가서 직접 클릭해서 열어주는 귀찮음을 겪지 않아도 됩니다.
설치하셨다면 사용법은 매우 간단합니다. 아래의 단축키 하나만 기억하세요.
Alt + B (Mac OS는 option + B)
: 기본 웹 브라우저로 html 실행
저는 보통 구글링이나 파이썬 웹 크롤링을 하기위해서 크롬을 기본 웹브라우저로 사용하고 있습니다.
여러분의 자유이지만 크롬을 사용하시는 것을 권장드립니다.
VS code HTML 실행 브라우저 설정 방법 (선택 사항)
아마도 별도로 크롬을 기본 웹 브라우저로 설정해두셨다면 크롬으로 html이 실행될 것입니다.
하지만 나는 다른 웹 브라우저를 기본으로 두고, VS code에서만 Chrome을 사용하시고 싶다면 아래와 같이 설정해주세요.
다시 아까의 익스텐션 탭으로 가서 open in browser를 우클릭 혹은 아래 사진의 톱늬바퀴 아이콘을 클릭해줍니다.
그리고 나오는 메뉴들 중, 확장 설정을 눌러주시면 아래와 같은 화면이 나타날 것입니다.
아래의 붉은색 사각형에는 아무 것도 쓰여있지 않을 것입니다. 여기에 Chrome을 입력해주시면 됩니다.
4. VS code HTML 자동완성
방금 전 HTML 문서를 직접 한타한타 작성하시면서 불편하다고 느끼지 않으셨나요?
저는 파이썬 코딩할 때부터 자동완성 기능의 편안함에 익숙해져 엄청 어색하더라구요.
그래서 찾아보았더니 다행히도 HTML 코딩 시에도 자동완성 기능을 사용할 수가 있습니다!
먼저 우측 하단의 Django HTML이라고 쓰여진 부분을 클릭해줍니다.
그러면 아래와 같이 여러 언어들이 보일텐데, HTML을 선택해주시면 끝입니다! 간단하죠?
꿀팁. ! + Tab
! + Tab 을 입력하시면 아래와 같이 HTML의 가장 기본 구조가 자동완성된답니다.
이것 외에도 태그 자동완성 기능도 있습니다. 참고로 <태그></태그> 이런식으로 생긴 것을 태그라고 합니다.
오늘 내용은 여기까지입니다. 따라 오시느라 고생 많으셨습니다~!
'웹 개발' 카테고리의 다른 글
| Javascript 문법 요약 정리 (4편. 배열_array) (0) | 2021.04.28 |
|---|---|
| Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문) (0) | 2021.04.23 |
| Javascript 문법 요약 정리 (2편. 연산자) (0) | 2021.04.22 |
| Javascript 문법 요약정리 (1편. 자료형과 기초 문법) (1) | 2021.04.21 |
| [코딩유치원] IT 개발 분야 (큰 그림을 그려보자!) (0) | 2021.04.11 |