상세 컨텐츠

본문 제목

[Web UI 기초 #3] 내 첫 HTML 문서 만들기 - 기본 구조부터 핵심 태그까지

프로그래밍 언어/Front-End

by gobugi306 2025. 6. 2. 18:03

본문

HTML의 기본 개념을 배웠다면, 이제 가장 중요한 단계는 '직접 써보는 것'입니다. 단순히 머릿속으로 이해한 것과 손으로 입력해보며 체득하는 감각은 완전히 다릅니다.  

 

실습을 통해 감을 잡고, "웹페이지가 이렇게 만들어지는구나!"라는 감각을 익혀보세요.

 

이 글에서는 최대한 간단한 방식으로 HTML 파일을 만들고, 그 안에 내용을 채워보고 브라우저에서 확인하는 과정을 단계별로 진행해보겠습니다. 복잡한 이론보다는 "따라하면서 이해하기"에 집중했습니다.

🛠️ 준비물: 메모장과 브라우저만 있으면 OK

HTML을 작성하기 위해 특별한 프로그램이 필요하지 않습니다. 윈도우의 메모장, 맥의 텍스트 편집기만 있어도 충분해요!

💡 더 편한 도구들

  • VS Code (무료, 추천!) : 
    Visual Studio Code는 입문자도 사용하기 쉬운 무료 편집기로, 자동 완성, 실시간 미리보기 등의 기능이 있어 HTML 학습에 매우 유리합니다.
  • 메모장++ (윈도우) : 가볍고 빠른 윈도우용 텍스트 편집기

하지만 처음에는 메모장으로도 충분합니다.

📋 1단계: 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>내 첫 번째 웹페이지</title>
</head>
<body>
    <!-- 여기에 실제 내용이 들어갑니다 -->
</body>
</html>

각 부분의 역할

🏷️ <!DOCTYPE html>

  • "이 문서는 HTML5로 작성되었습니다"라고 브라우저에게 알려주는 선언문
  • 문서 형식을 정의하는 선언 (Document Type Declaration)
  • 반드시 문서 맨 첫 줄에 위치해야 합니다

🏷️ <html lang="ko">

  • 전체 문서를 감싸는 루트 요소
  • lang="ko"는 이 페이지가 한국어로 작성되었음을 의미

🏷️ <head> 영역

  • 브라우저와 검색엔진을 위한 정보들이 들어가는 곳
  • 실제 화면에는 보이지 않음
  • <title>: 브라우저 탭에 표시되는 제목
  • <meta charset="UTF-8">: 한글이 깨지지 않게 하는 인코딩 설정
  • <meta name="viewport"...>: 모바일에서도 잘 보이게 하는 설정

🏷️ <body> 영역

  • 실제로 화면에 보여질 내용이 들어가는 곳

🎯 2단계: 실제로 파일 만들어보기

Step 1: 메모장 열기

  1. 윈도우: 윈도우 키 + R → notepad 입력 → 엔터
  2. 맥: command + space → 텍스트 편집기 검색

Step 2: 위의 기본 템플릿 복사해서 붙여넣기

Step 3: 파일 저장

  1. Ctrl + S (맥: Cmd + S)
  2. 파일명: my-first-page.html (확장자 .html 필수! .txt로 저장하지 않기)
  3. 바탕화면에 저장
⚠️ 저장할 때 파일 이름 뒤에 .html 확장자를 꼭 붙이고, 파일 형식을 '모든 파일(.)'로 선택하세요. 그렇지 않으면 my-first-page.html.txt처럼 저장되어 브라우저에서 열리지 않을 수 있습니다.
⚠️ 파일 인코딩을 확인하세요! UTF-8을 선택하면 됩니다.

Step 4: 브라우저에서 확인

  • 바탕화면의 my-first-page.html 파일을 더블클릭
  • 브라우저가 열리면서 페이지가 표시됩니다

🎉 축하합니다! 첫 HTML 문서 완성!

더보기
✔️ HTML 파일이 브라우저에서 잘 열렸나요?

📝 3단계: 핵심 태그로 내용 채우기

이제 <body> 안에 실제 내용을 넣어보겠습니다. 가장 많이 사용하는 핵심 태그 5개부터 시작해보죠.

1️⃣ 제목 태그 (<h1> ~ <h6>)

<body>
    <h1>안녕하세요! 저는 홍길동입니다</h1>
    <h2>저에 대한 소개</h2>
    <h3>취미</h3>
    <h3>좋아하는 음식</h3>
</body>

💡 제목 태그 사용 팁:

  • <h1>은 페이지당 한 개만 사용 (가장 중요한 제목)
  • <h2>, <h3> 순서대로 계층적으로 사용
  • 👉 크기 때문에 고르는 게 아니라, 내용의 중요도와 의미에 따라 태그를 선택. 웹 접근성(접근 가능한 웹사이트)을 위한 중요한 기준이 됩니다.

2️⃣ 문단 태그 (<p>)

<body>
    <h1>안녕하세요! 저는 홍길동입니다</h1>
    
    <h2>저에 대한 소개</h2>
    <p>저는 웹 개발을 배우고 있는 초보 개발자입니다. 
       HTML을 처음 배우면서 이 페이지를 만들어보았어요.</p>
    
    <h3>취미</h3>
    <p>독서와 영화 감상을 좋아합니다. 
       특히 공상과학 소설과 액션 영화를 즐겨봅니다.</p>
</body>
더보기
✔️ 제목(h1)과 문단(p)의 차이를 눈으로 확인했나요?

3️⃣ 목록 태그 (<ul>, <li>)

<h3>좋아하는 음식</h3>
<ul>
    <li>치킨</li>
    <li>피자</li>
    <li>햄버거</li>
    <li>파스타</li>
</ul>

<h3>배우고 싶은 기술</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

💡 목록 태그 구분:

  • <ul>: 순서가 없는 목록 (동그라미 • 표시)
  • <ol>: 순서가 있는 목록 (1, 2, 3... 숫자 표시)

4️⃣ 링크 태그 (<a>)

<h3>유용한 링크</h3>
<p>더 많은 HTML 정보는 
   <a href="https://developer.mozilla.org/ko/">MDN 문서</a>에서 
   확인할 수 있습니다.</p>

<p><a href="mailto:hong@example.com">이메일로 연락하기</a></p>

💡 링크 태그 활용:

  • href="URL": 다른 웹페이지로 이동
  • href="mailto:이메일": 이메일 앱 실행
  • href="tel:전화번호": 전화 앱 실행

5️⃣ 이미지 태그 (<img>)

<h3>내 사진</h3>
<img src="https://via.placeholder.com/300x200" alt="홍길동 프로필 사진">

💡 이미지 태그 주의사항:

  • src: 이미지 파일 경로 (필수)
  • alt: 이미지 설명 텍스트 (필수, 접근성을 위해, 시각장애인을 위한 필수 정보)
  • HTML5에서 <img>는 닫는 태그 없이 사용하는 빈 요소 (void element)입니다.

🎨 4단계: 완성된 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홍길동의 자기소개</title>
</head>
<body>
    <h1>안녕하세요! 저는 홍길동입니다</h1>
    
    <img src="https://via.placeholder.com/300x200" alt="홍길동 프로필 사진">
    
    <h2>저에 대한 소개</h2>
    <p>저는 웹 개발을 배우고 있는 초보 개발자입니다. 
       HTML을 처음 배우면서 이 페이지를 만들어보았어요.</p>
    
    <h3>취미</h3>
    <p>독서와 영화 감상을 좋아합니다. 
       특히 공상과학 소설과 액션 영화를 즐겨봅니다.</p>
    
    <h3>좋아하는 음식</h3>
    <ul>
        <li>치킨</li>
        <li>피자</li>
        <li>햄버거</li>
        <li>파스타</li>
    </ul>
    
    <h3>배우고 싶은 기술</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    
    <h3>연락처</h3>
    <p>더 많은 HTML 정보는 
       <a href="https://developer.mozilla.org/ko/">MDN 문서</a>에서 
       확인할 수 있습니다.</p>
    <p><a href="mailto:hong@example.com">이메일로 연락하기</a></p>
</body>
</html>

✅ 실습 과제: 나만의 자기소개 페이지 만들기

위의 예시를 참고해서 자신만의 자기소개 페이지를 만들어보세요!

포함할 내용:

  • 나의 이름과 인사말 (<h1>)
  • 자기소개 문단 (<p>)
  • 취미나 관심사 (<h3>, <p>)
  • 좋아하는 것들의 목록 (<ul>, <li>)
  • 유용한 링크 하나 이상 (<a>)
확장 과제: 
같은 형식으로 "내가 좋아하는 영화 TOP3" 나 "올해 이루고 싶은 목표" 등 다양한 주제로 다른 HTML 페이지도 만들어보세요.
실습을 반복할수록 태그의 쓰임새가 손에 익습니다.

🎯 다음 글에서는...

지금까지 따라한 내용만으로도 하나의 웹페이지가 완성되었습니다.  
아직은 단순한 소개 페이지이지만, 웹 개발의 본질은 바로 이런 작은 페이지에서 시작합니다.

다음 글에서는 HTML을 보다 의미 있게 구성하는 방법, 즉 시맨틱 태그(header, main, section 등)를 활용하여  
웹페이지를 구조적으로 작성하는 법을 배워보겠습니다.

 

'프로그래밍 언어 > Front-End' 카테고리의 다른 글

[Web UI 기초 #4] 시맨틱 태그로 HTML 구조화하기  (7) 2025.06.09
[Web UI 기초 #부록] 용어 집중 설명: HTML 입문자가 꼭 알아야 할 핵심 용어 정리  (1) 2025.05.30
[Web UI 기초 #2] 웹 개발의 첫걸음, HTML을 알아보자  (0) 2025.05.27

관련글 더보기

댓글 영역

티스토리툴바