Chapter 1-3. 개발환경 구축 및 문서 만들기(노트기준)

🚀 HTML 코딩 환경 설정하기: 크롬과 VS 코드 설치 및 첫 실습 가이드

웹 개발을 배우기 시작할 때, 가장 먼저 해야 할 일은 코딩 환경을 만드는 것입니다. 이번 포스팅에서는 웹 브라우저인 크롬(Chrome)과 코드 에디터인 비주얼 스튜디오 코드(VS Code)를 설치하고, 간단한 HTML 문서 작성 실습까지 진행해 보겠습니다.

---

📌 1. HTML 코딩 환경 설정의 중요성

웹 개발은 이론만으로 익힐 수 없습니다. 반드시 직접 실습하며 손에 익혀야 합니다.

"백문이 불여일견, 백견이 불여일타!"
HTML 코딩은 직접 타이핑하며 배우는 것이 가장 효율적입니다.

HTML 문법이나 코드 작성 요령은 설명을 듣는 것보다 직접 코드를 작성하며 경험하는 것이 가장 중요합니다.

---

🌐 2. 웹 브라우저 크롬 설치하기

웹 브라우저는 HTML 문서를 해석하여 화면에 표시하는 역할을 합니다.
강의에서는 크롬을 사용합니다.

🔹 크롬을 사용하는 이유는?

• 전 세계에서 가장 많이 사용되는 브라우저입니다.
• 빠르고 안정적인 성능으로 웹 개발 환경에 적합합니다.
• HTML, CSS 등 웹 표준 지원이 뛰어납니다.

🔹 크롬 설치 방법

1. 크롬 다운로드 페이지로 이동
2. 페이지에서 Chrome 다운로드 버튼을 클릭하여 설치 파일을 받습니다.
3. 다운로드한 설치 파일을 실행하여 설치를 완료합니다. (설치는 매우 간단합니다.)

---

🚀 3. 코드 편집기: Visual Studio Code 설치하기

코드 편집기(에디터)는 HTML 문서를 작성하고 수정할 때 사용하는 필수 프로그램입니다.
강의에서는 **비주얼 스튜디오 코드(VS Code)**를 사용합니다.

🔹 VS Code를 선택한 이유는?

• 전 세계적으로 가장 인기 있는 코드 에디터입니다.
• 무료이면서 성능이 뛰어나고 다양한 확장 기능이 있습니다.
• 초보자부터 전문가까지 폭넓게 사용됩니다.

🔹 VS Code 설치 방법

1. VS Code 다운로드 페이지로 이동
2. 운영체제에 맞는 설치 파일을 다운로드하여 실행합니다.
3. 설치 과정에서 별도의 설정 없이 다음(next) 버튼만 누르면 됩니다.
   • (자세한 설치 안내는 별도의 문서로 제공됩니다.)

설치 후 처음 실행하면 코딩을 시작할 준비가 완료됩니다!

---

🖥️ 4. VS Code에서 HTML 문서 만들기 (첫 번째 실습)

이제 실제로 VS Code에서 HTML 문서를 만들어 보겠습니다.

🔹 HTML 문서 생성하기

1. 원하는 위치에 새 폴더를 생성합니다.
   • 예시: HTML_CSS_Study 폴더
2. 이 폴더를 VS Code 창으로 드래그 앤 드롭하여 열어줍니다.
   • VS Code에서 "이 폴더를 신뢰하느냐?"라는 메시지가 나오면, 신뢰(Trust)를 선택합니다.
3. VS Code 내 폴더에서 우클릭 → New File을 클릭하여 새 문서를 생성합니다.
4. 파일 이름을 입력할 때 반드시 확장자를 .html로 지정합니다.
   • 예시: sample.html

🔹 HTML 문서 작성과 확인하기

• 생성한 HTML 파일에 원하는 내용을 작성합니다. 예를 들어 본인의 이름을 적습니다.
•  

강윤호

• 저장(Ctrl+S) 후 HTML 문서를 웹 브라우저에서 열어봅니다.
• HTML 문서를 웹 브라우저로 열면 렌더링이 되어 화면에 표시됩니다.
• VS Code에서는 파일을 수정할 수 있지만, 브라우저에서는 내용을 확인만 가능합니다.

---

🚀 5. 실시간 미리보기 기능: Live Server 플러그인 설치하기

VS Code에서 HTML 문서를 쉽게 확인하고 실시간 미리보기 기능을 사용하기 위해서는 Live Server 플러그인을 설치하는 것이 좋습니다.

🔹 Live Server 플러그인이란?

• HTML 문서를 VS Code에서 바로 열어볼 수 있게 해줍니다.
• HTML 문서를 저장할 때마다 자동으로 브라우저에서 실시간으로 새로고침이 됩니다.

🔹 Live Server 설치 방법

1. VS Code의 왼쪽 메뉴에서 확장(Extensions)을 선택합니다.
2. 검색창에 Live Server를 입력하여 플러그인을 찾습니다.
3. 가장 위에 나오는 Live Server 플러그인을 선택하고 Install 버튼을 눌러 설치합니다.

🔹 Live Server 사용 방법

• HTML 파일이 열려 있는 상태에서 VS Code 우측 하단에 있는 Go Live 버튼을 클릭합니다.
• 브라우저가 자동으로 열리며, 파일을 저장할 때마다 내용이 바로 반영됩니다.
• Live Server를 끄려면 브라우저 탭을 닫고, VS Code 하단 포트(예: 5500)를 클릭하여 중지합니다.

---

📄 6. 이번 HTML 문서 작성 실습의 요약 정리

이번 강의에서 우리가 배운 내용을 다시 한 번 간단히 정리하면 다음과 같습니다.

단계주요 내용설명

1	코딩 환경 중요성 강조	이론보다 실습을 통한 코딩의 중요성
2	웹 브라우저(크롬) 설치	가장 널리 쓰이는 크롬 브라우저 설치
3	코드 에디터(VS Code) 설치	코드 작성에 최적화된 VS Code 설치
4	HTML 문서 작성 실습	VS Code를 이용한 HTML 문서 만들기와 확인
5	Live Server 플러그인 설치	실시간 HTML 문서 확인 기능 제공