HTML을 사용하기 위해 개발 환경을 구축해 보자
<1. Visual Studio 다운로드>
1-1. Visual Studio Code 다운로드
https://code.visualstudio.com/
1-2. 기본 경로는 건드리지 않음 (경로 확인만 해 볼 것)
1-3. 바탕화면에 바로가기 만들기 체크
<2. Visual Studio 설정>
2-1. 인코딩 설정하기
2-2. Encoding UTF-8인지 확인
2-3. Mouse Wheel Zoom 체크
<3. 확장 패키지 설치>
3-1. 확장 패키지 접속
3-2. 한국어 팩 설치
*한국어 팩의 경우 재접속 해야 적용되는데
restart 버튼 클릭하면 자동으로 재시동되고 적용됨
3-3. previewer 설치
(Quick HTML Previewer)
=> 새로운 적용을 할 때마다 재시동할 필요 없이 자동 반영시켜 줌
3-4. HTML Snippets 설치
=> 태그를 어느 정도 자동완성 시켜 줌
3-5. Auto rename Tag 설치
=> 시작 태그 기록 시 종료 태그 자동으로 입력해 줌
<4. 작업 폴더 지정>
4-1. 파일-폴더 열기 - 1_html-workspace 지정
(~신뢰합니까 버튼 나오면 신뢰한다고 해 주면 됨)
4-2. 오른쪽마우스 - 새 파일 - 파일 생성
* 마우스 휠로 줌 가능
<5. 파일 구성>
5-1. <!DOCTYPE html>
= 나는 html 문서야!
5-2. html
= html 문서의 시작과 끝
5-3. head, body
= html 문서 안에서의 영역
head: 눈에 안 보이는 환경 설정과 같은 코드를 기술
body: 눈에 보이는 화면 꾸미기용 코드를 기술
*연결 프로그램 - 크롬 등의 웹 브라우저로 열어 보면
랜더링되어 내 코드대로 적용되어 나타남
렌더링 또는 이미지 합성(rendering 또는 image synthesis): 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정
*웹 브라우저에서 F12 눌러서 개발자 도구 탭으로 더욱 자세한 확인 가능함