HTML & CSS

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

Chansman 2025. 3. 28. 11:05

🚀 HTML 입문자를 위한 환경 세팅 및 첫 HTML 문서 작성 실습 가이드

이번 글에서는 웹 개발을 처음 시작하는 분들이 HTML 코딩을 위한 환경 설정 방법과 간단한 실습을 통해 HTML 문서를 만드는 과정을 자세히 소개하겠습니다. 웹 개발은 이론만으로 끝낼 수 없습니다. 직접 손으로 타이핑하며 익히는 것이 무엇보다 중요하죠.

웹 개발 세계에는 이런 유명한 격언이 있습니다.

"백문이 불여일견, 백견이 불여일타!"
코딩은 100번 듣는 것보다 직접 타이핑하는 것이 가장 빠르고 정확한 학습법입니다.

그럼 지금부터 HTML 환경을 빠르게 구축하고 첫 HTML 문서를 직접 만들어봅시다!

📌 Step 1. 웹 브라우저 설치하기: 구글 크롬(Chrome)

HTML 문서를 보기 위해서는 웹 브라우저가 필요합니다. 웹 브라우저는 HTML 문서를 해석해서 화면에 보여주는 역할을 합니다. 강의에서는 구글 크롬을 사용하겠습니다.

🔹 왜 크롬인가요?

  • 세계에서 가장 많은 사람이 사용하는 브라우저입니다.
  • 속도, 성능, 호환성 등에서 우수합니다.
  • HTML, CSS 실습에 최적화되어 있습니다.

🔹 크롬 설치 방법

  • 크롬 다운로드 페이지 바로 가기
  • 페이지 접속 후 ‘Chrome 다운로드’ 버튼을 클릭하여 설치 파일을 내려받습니다.
  • 설치 파일을 실행한 후 간단히 설치 과정을 마무리하면 됩니다.

(설치 과정은 매우 간단해서 생략합니다.)

📌 Step 2. 코드 편집기 설치하기: 비주얼 스튜디오 코드(VS Code)

HTML 코딩을 하려면 편집 프로그램(에디터)이 필요합니다.
이번 강의에서 사용할 에디터는 **비주얼 스튜디오 코드(VS Code)**입니다.

🔹 VS Code를 선택한 이유?

  • 전 세계적으로 가장 인기 있는 코드 편집기입니다.
  • 무료이며 가벼우면서도 뛰어난 성능을 제공합니다.
  • 초보자부터 프로까지 폭넓게 사용됩니다.

🔹 VS Code 설치 방법

  • VS Code 다운로드 페이지 바로 가기
  • 운영체제(Windows/Mac)에 맞는 설치 파일을 내려받아 설치합니다.
  • 설치는 대부분 기본 옵션으로 ‘다음’만 눌러도 간단히 완료됩니다.

설치를 마치고 실행하면 아래와 같은 화면이 나타납니다. 이제 코딩 준비 완료입니다.

📌 Step 3. HTML 문서 만들기 실습

VS Code로 실제 HTML 문서를 간단히 만들어 봅니다.

🔹 HTML 문서 생성 방법

  1. 새 폴더를 만들어 VS Code에 드래그 앤 드롭하여 엽니다.
    • 예: HTML_CSS_Study라는 폴더를 바탕화면에 생성하고 VS Code에서 열기
  2. 열린 폴더에서 우클릭 후, New File을 선택해 새 HTML 파일을 만듭니다.
  3. 파일 이름 뒤에 꼭 .html 확장자를 붙여야 합니다.
    • 예시: sample.html

🔹 HTML 파일 내용 작성과 브라우저 확인

  • 생성한 HTML 문서를 VS Code에서 열고 내용을 입력합니다.
  • 예를 들어 본인의 이름을 써봅니다.
강윤호

 

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

📌 Step 4. VS Code 플러그인 설치하기 (Live Server)

VS Code에서 HTML 문서를 빠르게 열고 실시간 확인하려면 Live Server 플러그인이 매우 유용합니다.

🔹 Live Server 플러그인이란?

  • HTML 문서를 저장할 때마다 자동으로 브라우저를 새로고침 해줍니다.
  • 문서를 바로 브라우저에서 확인할 수 있어 편리합니다.

🔹 설치 방법

  1. VS Code의 왼쪽 메뉴에서 확장(Extensions, 퍼즐 모양) 메뉴 선택
  2. 검색창에 Live Server 입력
  3. 결과 중 첫 번째 플러그인(Ritwick Dey 제작)을 설치합니다.

🔹 Live Server 사용 방법

  • HTML 파일을 열고 오른쪽 아래의 Go Live 버튼 클릭
  • 자동으로 브라우저가 열리며 HTML 내용을 실시간으로 확인할 수 있습니다.
  • 종료할 때는 오른쪽 하단의 포트 번호를 클릭하면 됩니다.

이제 환경 설정 끝! 앞으로 HTML 문서 작업이 훨씬 편해집니다.

🚩 HTML 환경 구축 후 확인해 볼 핵심 내용 정리

단계항목목적
1 크롬 브라우저 설치 HTML 문서 확인용 브라우저
2 VS Code 설치 HTML, CSS 코드 작성 및 편집
3 HTML 문서 만들기 첫 번째 HTML 실습
4 Live Server 플러그인 설치 실시간으로 HTML 코드 확인

🔑 이번 강의에서 기억해야 할 중요한 점

  • 웹 개발은 이론 학습보다는 직접 실습이 더 중요합니다.
  • 코딩은 듣기만 해서는 절대 늘지 않습니다. 꼭 타이핑하며 연습하세요.
  • 크롬과 VS Code는 가장 보편적으로 사용되는 웹 개발 환경입니다.
  • Live Server 플러그인을 활용하면 실습 효율이 크게 올라갑니다.