HTML 완전 정복: 이것만 알면 웹 페이지 뼈대 세운다! (필수 태그 & 기본 구조 가이드)
HTML 완전 정복: 이것만 알면 웹 페이지 뼈대 세운다! (필수 태그 & 기본 구조 가이드)
안녕하세요, 여러분! 지난번 프론트엔드의 핵심 언어 삼총사(HTML, CSS, JavaScript) 이야기를 재미있게 보셨나요? 오늘은 그중에서도 가장 기본이자 웹 페이지의 '뼈대'를 만드는 HTML에 대해 좀 더 깊이 파고드는 시간을 가져보려고 합니다.
"HTML 태그 너무 많은데 뭘 먼저 외워야 하지?", "빈 페이지에 뭐부터 써야 할지 막막해요!" 라고 생각하시는 분들, 정말 많으실 거예요. 걱정 마세요! 모든 태그를 다 외울 필요는 없답니다. 자주 쓰이고 중요한 핵심 태그 몇 가지와 기본 구조만 알아도 충분히 웹 페이지의 틀을 잡을 수 있어요.
이 글에서는 마치 레고 블록을 조립하듯, 웹 페이지를 만들기 위한 **HTML의 기본 설계도(구조)**와 **꼭 필요한 핵심 블록(태그)**들을 쉽고 명확하게 알려드릴 거예요. 이 글만 잘 따라오시면, 빈 문서가 어엿한 웹 페이지의 기초를 갖추는 놀라운 경험을 하실 수 있을 겁니다! 자, HTML의 세계로 함께 풍덩 빠져볼까요?
HTML, 정말 간단해요! (핵심 역할 다시 보기)
시작하기 전에, HTML이 뭐였는지 딱 한 문장으로 기억해볼까요? HTML은 웹 페이지의 내용(콘텐츠)이 어떤 의미를 가지고 어떤 구조로 이루어져 있는지 브라우저에게 알려주는 언어입니다. 글자, 그림, 버튼 같은 내용물을 제자리에 배치하고 "이건 제목이야", "이건 문단이야" 라고 이름표를 붙여주는 역할이죠. 집 짓기로 치면 설계도이자 뼈대! 기억나시죠?
모든 HTML 문서의 시작: 기본 구조 (이것만 알면 반은 성공!)
텅 빈 메모장을 열고 HTML 문서를 만들려고 할 때, 가장 먼저 작성해야 하는 기본 뼈대가 있습니다. 마치 편지를 쓸 때 정해진 형식이 있는 것처럼, HTML 문서도 기본적인 약속이 있어요. 아래 구조는 어떤 HTML 문서를 만들든 거의 항상 동일하게 사용되니, 눈에 익혀두시면 정말 편하답니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여기에 웹 페이지 제목이 들어가요!</title>
<!-- 여기에 CSS 파일 연결 등 추가 정보가 들어갈 수 있어요 -->
</head>
<body>
<!-- 여기에 사용자가 실제로 보게 될 내용이 들어갑니다! -->
<h1>안녕하세요!</h1>
<p>이 부분이 웹 브라우저 화면에 보여지는 내용이에요.</p>
</body>
</html>자, 하나씩 살펴볼까요? 너무 겁먹지 마세요!
- <!DOCTYPE html>: "이 문서는 HTML5 표준에 따라 작성되었습니다!" 라고 웹 브라우저에게 알려주는 선언문입니다. 그냥 맨 위에 항상 써준다고 생각하시면 돼요. 특별한 기능은 없지만 약속 같은 거예요.
- <html> ... </html>: 모든 HTML 요소들을 감싸는 가장 최상위 태그입니다. "여기서부터 여기까지가 HTML 문서입니다!" 라는 의미죠. lang="ko" 같은 속성을 넣어 '이 문서는 한국어로 작성되었다'고 표시할 수도 있습니다.
- <head> ... </head>: 웹 페이지의 부가 정보를 담는 영역입니다. 사용자의 눈에는 직접 보이지 않지만, 웹 브라우저나 검색 엔진이 웹 페이지를 이해하는 데 필요한 중요한 정보들이 들어갑니다.
- <meta charset="UTF-8">: 이 문서의 문자 인코딩 방식이 UTF-8임을 알려줍니다. 이걸 써줘야 한글이나 다른 특수문자가 깨지지 않고 잘 보여요. (거의 필수!)
- <title> ... </title>: 웹 브라우저 탭에 표시되는 페이지의 제목을 지정합니다. 검색 결과에도 노출되니 중요해요!
- 이 외에도 CSS 파일 연결, JavaScript 파일 연결, 검색 엔진 최적화(SEO) 정보 등이 <head> 안에 들어갑니다.
- <body> ... </body>: 사용자가 웹 브라우저 화면에서 실제로 보게 될 모든 내용이 들어가는 영역입니다! 글자, 이미지, 버튼, 링크 등 우리가 보는 웹 페이지의 본문 콘텐츠는 모두 이 <body> 태그 안에 작성해야 해요. 여기가 진짜 우리가 꾸미고 채워나갈 공간이죠!
어때요? 생각보다 간단하죠? 이 기본 구조만 딱 갖춰 놓으면 이제 <body> 안에 내용을 채워 넣을 준비가 된 겁니다!
꼭 알아야 할 HTML 필수 태그 (핵심 레고 블록들!)
이제 <body> 안에 내용을 채워 넣을 때 사용하는, 정말 자주 쓰이고 중요한 핵심 태그들을 알아봅시다. 이것들만 잘 활용해도 꽤 그럴듯한 웹 페이지 구조를 만들 수 있어요!
(참고: 대부분의 HTML 태그는 <태그이름>으로 시작해서 </태그이름>으로 닫아주는 쌍으로 이루어져 있습니다. 내용물은 그 사이에 넣어요!)
- 제목 태그: <h1> ~ <h6>
- <h1>가장 큰 제목</h1>
- <h2>중간 크기 제목</h2>
- ...
- <h6>가장 작은 제목</h6>
- 역할: 문서의 제목이나 소제목을 나타냅니다. <h1>이 가장 중요하고 큰 제목이며, 숫자가 커질수록 중요도와 크기가 작아집니다. 단순히 글자를 크게 만들기 위해서가 아니라, 문서의 구조를 명확히 하고 **검색 엔진 최적화(SEO)**에도 중요하니 의미에 맞게 사용하는 것이 좋습니다!
- 문단 태그: <p>
- <p>여기는 하나의 문단입니다. 글 내용을 여기에 쭉 작성하면 됩니다.</p>
- 역할: **하나의 문단(Paragraph)**을 나타냅니다. 웹 페이지에서 가장 많이 사용되는 텍스트 블록이죠. 줄 바꿈을 하고 싶을 때 엔터를 치는 대신 <p> 태그로 감싸주면 됩니다.
- 링크 태그: <a>
- 구글로 이동하기
- 역할: 다른 웹 페이지나 문서 내 특정 위치로 **이동하는 링크(Hyperlink)**를 만듭니다.
- 핵심 속성: href (Hypertext Reference) 속성 안에 이동할 **주소(URL)**를 적어줍니다.
- 이미지 태그: <img>
- <img src="이미지파일_경로.jpg" alt="이미지 설명">
- 역할: 웹 페이지에 이미지를 삽입합니다.
- 핵심 속성:
- src (Source): 표시할 이미지 파일의 경로나 URL을 적어줍니다.
- alt (Alternative text): 이미지를 표시할 수 없을 때 대신 보여줄 텍스트 설명입니다. 웹 접근성(스크린 리더 사용자)과 SEO에도 중요하니 꼭 작성하는 습관을 들이세요!
- 특징: <img> 태그는 닫는 태그(</img>)가 없는 빈 태그(Empty tag) 입니다.
- 목록 태그: <ul>, <ol>, <li>
- 순서 없는 목록 (<ul> - Unordered List):
-
<ul> <li>항목 1</li> <li>항목 2</li> <li>항목 3</li> </ul> - 순서 있는 목록 (<ol> - Ordered List):
-
<ol> <li>첫 번째 항목</li> <li>두 번째 항목</li> <li>세 번째 항목</li> </ol> - 역할: 여러 항목들을 목록으로 묶어서 보여줄 때 사용합니다. <ul>은 순서가 중요하지 않은 목록(보통 점 • 으로 표시), <ol>은 순서가 중요한 목록(숫자 1, 2, 3... 으로 표시)을 만듭니다. 각 목록의 항목은 <li> (List Item) 태그로 감싸줍니다.
- 구역 나누기 태그: <div>, <span>
- <div>이 안의 내용은 하나의 구역으로 묶입니다.</div>
- 이 문장 안의 <span style="color:blue;">이 부분만</span> 특별하게 처리할 수 있어요.
- 역할: 특별한 의미는 없지만, 콘텐츠를 논리적인 구역으로 묶거나(div), 문장 내 **일부 요소(span)**를 묶어서 CSS로 스타일을 적용하거나 JavaScript로 제어하기 위해 사용합니다.
- <div>는 블록(Block) 요소 (한 줄 전체 차지), <span>은 인라인(Inline) 요소 (자신의 내용만큼만 공간 차지)라는 차이가 있습니다. (이건 나중에 CSS 배울 때 더 중요해져요!)
더 나아가기: 의미를 담는 시맨틱 태그 (Semantic Tags)
위의 태그들만으로도 웹 페이지를 만들 수 있지만, HTML5에서는 태그 자체에 의미를 부여하여 코드의 가독성을 높이고 검색 엔진 및 접근성을 향상시키는 시맨틱 태그 사용을 권장합니다. <div>로만 구조를 짜는 것보다 훨씬 좋아요!
- <header>: 페이지 상단이나 특정 섹션의 머리말 영역 (로고, 제목, 네비게이션 등)
- <nav>: 다른 페이지로 이동하는 네비게이션 링크들을 묶는 영역 (메뉴)
- <main>: 해당 문서의 핵심 주요 콘텐츠를 담는 영역 (페이지 당 한 번만 사용 권장)
- <section>: 문서 내에서 관련된 콘텐츠를 하나의 주제로 묶는 영역 (보통 제목 태그와 함께 사용)
- <article>: 독립적으로 존재해도 의미가 완전한 개별 콘텐츠 영역 (블로그 게시글, 뉴스 기사 등)
- <aside>: 본문 내용과 직접적인 관련은 적지만 부가적인 정보를 담는 영역 (사이드바, 광고 등)
- <footer>: 페이지 하단이나 특정 섹션의 꼬리말 영역 (저작권 정보, 연락처 등)
이 태그들을 사용하면 <div>로만 둘러싸인 코드보다 훨씬 구조가 명확해지고 이해하기 쉬워집니다. 마치 잘 정리된 서랍장 같다고 할까요?
간단 예제: 배운 내용으로 페이지 만들어보기!
자, 지금까지 배운 기본 구조와 필수 태그들을 활용해서 아주 간단한 자기소개 페이지의 뼈대를 만들어 볼까요?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홍길동의 자기소개 페이지</title>
</head>
<body>
<header>
<h1>안녕하세요, 홍길동입니다!</h1>
</header>
<nav>
<ul>
<li><a href="#about-me">나에 대해</a></li>
<li><a href="#skills">나의 기술</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
<main>
<section id="about-me">
<h2>나에 대해</h2>
<img src="my-photo.jpg" alt="홍길동 사진">
<p>저는 웹 개발에 열정을 가진 학생입니다. 새로운 것을 배우는 것을 좋아합니다.</p>
</section>
<section id="skills">
<h2>나의 기술</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript (열심히 배우는 중!)</li>
</ul>
</section>
</main>
<footer id="contact">
<p>연락처: gdhong@email.com</p>
<p>© 2025 홍길동. All rights reserved.</p>
</footer>
</body>
</html>어때요? 시맨틱 태그를 사용하니 어디가 머리말이고, 메뉴이고, 본문인지 한눈에 들어오죠? 여기에 CSS로 디자인을 입히면 훨씬 멋진 페이지가 될 거예요!
마무리하며: 뼈대를 튼튼하게!
오늘은 HTML의 기본 구조와 웹 페이지를 만드는 데 꼭 필요한 핵심 태그들, 그리고 코드의 의미를 더해주는 시맨틱 태그까지 알아보았습니다. 생각보다 어렵지 않죠?
HTML은 웹 개발의 가장 첫걸음이자 기본 중의 기본입니다. 오늘 배운 내용들을 바탕으로 직접 코드를 작성하고 눈으로 확인하는 연습을 꾸준히 해보세요. 처음에는 어색하더라도 자꾸 사용하다 보면 금방 익숙해질 거예요. 튼튼한 HTML 뼈대를 세우는 능력은 앞으로 CSS로 디자인을 입히고 JavaScript로 기능을 더하는 데 아주 중요한 밑거름이 될 거랍니다!
다음번에는 이 HTML 뼈대에 멋진 옷을 입혀주는 CSS에 대해 더 자세히 알아보는 시간을 갖도록 할게요. 그때까지 오늘 배운 내용, 꼭 복습해보세요! 여러분의 즐거운 코딩 여정을 응원합니다!