HTML을 사용하기 위해 개발 환경을 구축해 보자
<1. Visual Studio 다운로드>
1-1. Visual Studio Code 다운로드
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
![](https://blog.kakaocdn.net/dn/bssAW6/btrLWnu5fLe/9bN5AApQqiDPglolrf8ork/img.png)
1-2. 기본 경로는 건드리지 않음 (경로 확인만 해 볼 것)
![](https://blog.kakaocdn.net/dn/bU7J1z/btrLYjTvSPc/AgEInfZsVjpPEs7V4ira41/img.png)
1-3. 바탕화면에 바로가기 만들기 체크
![](https://blog.kakaocdn.net/dn/WnOoh/btrLTWEyQCb/WH5KDc0JoEhpWY1TwqrCgK/img.png)
![](https://blog.kakaocdn.net/dn/dTjD8H/btrLPoPnpzR/JSCsQpUaSFC9k5cCi4BhDk/img.png)
<2. Visual Studio 설정>
2-1. 인코딩 설정하기
![](https://blog.kakaocdn.net/dn/d9jsgO/btrL0Usf3CN/xnHuaODtG3ZcEWnKnnL2Ak/img.png)
2-2. Encoding UTF-8인지 확인
![](https://blog.kakaocdn.net/dn/bn0NK4/btrLOlSTvz2/XaDj78IM5n6OBKIHMoFmGk/img.png)
2-3. Mouse Wheel Zoom 체크
![](https://blog.kakaocdn.net/dn/2vujo/btrLZypuKoj/ONqQPxI8fkaaJFvRT7QWJK/img.png)
<3. 확장 패키지 설치>
3-1. 확장 패키지 접속
![](https://blog.kakaocdn.net/dn/louc2/btrLOfkVqUg/TCxs9BRhC7y4i5US6H5eM1/img.png)
3-2. 한국어 팩 설치
![](https://blog.kakaocdn.net/dn/U1P01/btrLQxFhmGt/Dhwj745kSO84KcZ6GYjqH1/img.png)
*한국어 팩의 경우 재접속 해야 적용되는데
restart 버튼 클릭하면 자동으로 재시동되고 적용됨
![](https://blog.kakaocdn.net/dn/nywgw/btrLStWWtSP/ssptBOeBVcqHInhzaObhF1/img.png)
3-3. previewer 설치
(Quick HTML Previewer)
=> 새로운 적용을 할 때마다 재시동할 필요 없이 자동 반영시켜 줌
![](https://blog.kakaocdn.net/dn/dgmMva/btrLXM2A2iS/7Q5zUtwgpDM9pdMokjjIQk/img.png)
3-4. HTML Snippets 설치
=> 태그를 어느 정도 자동완성 시켜 줌
![](https://blog.kakaocdn.net/dn/cWPuAg/btrLZzaQMGO/88YpiGb9abkNwMuKIr8bw0/img.png)
3-5. Auto rename Tag 설치
=> 시작 태그 기록 시 종료 태그 자동으로 입력해 줌
![](https://blog.kakaocdn.net/dn/PJfG0/btrLOniODo2/9dPHEFAy4vpxHIxD1OcZY0/img.png)
<4. 작업 폴더 지정>
4-1. 파일-폴더 열기 - 1_html-workspace 지정
(~신뢰합니까 버튼 나오면 신뢰한다고 해 주면 됨)
![](https://blog.kakaocdn.net/dn/BXRdb/btrLVXQOyXn/nNBJKs7qACGzWerj1n7Sd1/img.png)
![](https://blog.kakaocdn.net/dn/dTWSXM/btrLSuO7x98/TKREqqY6EnevrW6Nt9fHtk/img.png)
4-2. 오른쪽마우스 - 새 파일 - 파일 생성
![](https://blog.kakaocdn.net/dn/HMcno/btrLQxZBKN0/jRmx1i8KdmqOsNHJWKYeNk/img.png)
* 마우스 휠로 줌 가능
![](https://blog.kakaocdn.net/dn/bInTXw/btrLZypvsEy/3OQej2LS72f4f9SMakdhx0/img.png)
<5. 파일 구성>
5-1. <!DOCTYPE html>
= 나는 html 문서야!
![](https://blog.kakaocdn.net/dn/0bQ99/btrL2nudqt5/C72dmjJ2sISZMe8fT8mDWk/img.png)
5-2. html
= html 문서의 시작과 끝
![](https://blog.kakaocdn.net/dn/dZTKLG/btrL0TmBeGG/uIK4O7k7GHeZflvWkbKji1/img.png)
5-3. head, body
= html 문서 안에서의 영역
head: 눈에 안 보이는 환경 설정과 같은 코드를 기술
body: 눈에 보이는 화면 꾸미기용 코드를 기술
![](https://blog.kakaocdn.net/dn/Khnl3/btrLSt3DjFJ/59bIr3CZ1KatRWy7OytMi1/img.png)
*연결 프로그램 - 크롬 등의 웹 브라우저로 열어 보면
랜더링되어 내 코드대로 적용되어 나타남
렌더링 또는 이미지 합성(rendering 또는 image synthesis): 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정
![](https://blog.kakaocdn.net/dn/n5WfL/btrLPdNUpNH/Oq6g7s3k8ehP3Gw5hAshrk/img.png)
![](https://blog.kakaocdn.net/dn/RRciw/btrLZzPt4Q6/0iBJx45r0ADQK20fJpENp1/img.png)
*웹 브라우저에서 F12 눌러서 개발자 도구 탭으로 더욱 자세한 확인 가능함
![](https://blog.kakaocdn.net/dn/kRw9p/btrLXOF80FB/wIspTGaKC1T1FM159FG9Zk/img.png)