퍼블리싱 로그/기초셋팅

환경 세팅 & HTML 구조

AI랑노는 또또 2025. 7. 8. 18:13

HTML을 시작하기 위한 필수 준비물: 개발 환경 세팅

HTML을 배우기 위해 꼭 복잡한 툴이 필요한 것은 아닙니다. 하지만 효율적으로 작업하고 실시간 결과를 확인하기 위해서는 최소한의 개발 환경을 세팅해 두는 것이 좋습니다.

가장 추천하는 도구는 바로 [VS Code (Visual Studio Code)]입니다. 무료이며, 가볍고, 다양한 확장 기능을 통해 HTML뿐 아니라 CSS, JS까지 연동해서 사용할 수 있습니다.

환경 세팅 & HTML 구조

VS Code 설치 방법:

  1. 공식 사이트에 접속
  2. 운영체제에 맞는 설치 파일 다운로드 후 실행
  3. 설치가 완료되면 실행 후 기본 폰트, 테마, 확장팩 설치 가능

추천 확장팩:

  • Live Server: HTML 파일을 저장할 때마다 브라우저가 자동으로 새로고침 되어 실시간 확인이 가능
  • Prettier: 코드 자동 정리 기능
  • Auto Close Tag & Auto Rename Tag: 태그 자동 닫기 및 수정 기능

설치가 완료되면, 작업할 폴더를 하나 생성하고 index.html 파일을 만들어봅시다. 이 파일이 앞으로 우리가 연습할 HTML 문서의 기본이 됩니다.

 

HTML 기본 구조 이해하기

HTML 문서는 브라우저가 웹페이지를 해석하기 위한 일종의 설계도입니다. 하나의 HTML 문서에는 반드시 포함되어야 할 기본 구조 태그들이 있으며, 이를 잘 이해하는 것이 중요합니다.

아래는 가장 기본적인 HTML 문서의 구조입니다:

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나의 첫 번째 HTML</title>
</head>
<body>
  <h1>안녕하세요, HTML!</h1>
  <p>이 문서는 기본 HTML 구조를 설명합니다.</p>
</body>
</html>

 

각 태그의 역할:

  • <!DOCTYPE html>: HTML5 문서임을 선언
  • <html>: 전체 HTML 문서의 시작과 끝
  • <head>: 페이지 설정 및 메타 정보 (브라우저에게 주는 정보)
  • <meta>: 문자 인코딩, 모바일 대응 등을 설정
  • <title>: 브라우저 탭에 표시될 제목
  • <body>: 사용자에게 보여지는 실제 콘텐츠 영역

이 구조는 앞으로 어떤 웹페이지를 만들더라도 공통적으로 사용하는 뼈대입니다. 특히 lang="ko"는 한글 웹사이트임을 나타내므로 꼭 포함시켜야 합니다.

파일 저장, 실행, 디버깅까지 한 번에: 실습 팁

앞서 만든 index.html 파일을 브라우저에서 확인하려면, VS Code에서 직접 열 수도 있고, Live Server 확장팩을 설치했다면 우측 하단 "Go Live" 버튼을 클릭하면 자동으로 실행됩니다.

이제 파일을 저장(Ctrl + S)하고 내용을 수정해보세요. 예를 들어 <p> 태그 안의 문장을 바꿔보면, 브라우저가 자동으로 변경 사항을 반영합니다. 이렇게 하면서 HTML 태그의 구조와 결과물을 동시에 확인할 수 있어 학습 효율이 매우 높아집니다.

또한, **브라우저의 개발자 도구(F12)**를 활용하면 HTML 구조를 실시간으로 확인하거나 특정 태그에 어떤 스타일이 적용되어 있는지도 알 수 있습니다. 앞으로 CSS, JS로 확장해갈 때 이 도구는 꼭 필요한 필수 무기가 됩니다.

팁: HTML은 문법이 단순하지만, 열고 닫는 태그, 중첩 구조, 잘못된 위치에 태그 사용 등에서 실수가 자주 발생합니다. 브라우저는 자동으로 어느 정도 수정해주지만, 의도대로 동작하는지 항상 눈으로 확인하는 습관이 중요합니다.

 

 HTML 학습의 다음 단계로 나아가기

 

기본 구조를 익혔다면, 이제는 실제로 다양한 HTML 태그를 써보면서 익히는 단계로 나아가야 합니다. <h1> ~ <h6>, <p>, <a>, <img>, <ul>/<ol> 등 콘텐츠를 구성하는 요소들이 매우 다양하게 존재합니다. 이 태그들은 각각 문서의 의미와 역할을 구분짓는 시멘틱한 구조를 형성하게 됩니다.

또한, CSS를 연결해서 시각적으로 꾸미거나, JavaScript를 활용해서 동적인 기능을 부여할 수 있게 됩니다. 이처럼 HTML은 웹 프론트엔드 개발의 첫 출발점이며, 모든 웹 기술의 뼈대가 되므로 확실하게 기초를 다져두는 것이 좋습니다.

 

 

저작자표시 비영리 변경금지 (새창열림)