3강. 기본 태그 | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 여러분은 웹 페이지에서 가장 자주 쓰이는 기본 텍스트 태그들을 직접 사용해, 제목과 문단이 있는 글을 화면에 구성할 수 있게 됩니다. 지난 강에서 HTML의 뼈대(골격)를 만들었다면, 이번 강은 그 body 안을 실제 내용으로 채우는 첫걸음입니다.

구체적으로는 네 가지 태그를 배웁니다. 제목을 만드는 h1~h6, 문단을 만드는 p, 줄을 바꾸는 br, 그리고 구분선을 긋는 hr입니다. 여기에 더해, 초보자가 반드시 알아야 할 브라우저의 공백 처리 방식도 함께 이해합니다.

📰 제목 태그 — h1부터 h6까지

이 섹션에서는 글의 제목을 만드는 제목 태그(heading)를 살펴보겠습니다.

모든 글에는 제목이 있습니다. 신문 기사에 큰 제목과 작은 소제목이 있듯, 웹 페이지도 제목의 중요도를 여섯 단계로 나눕니다. 이것이 h1부터 h6까지의 제목 태그입니다. <h1>이 가장 크고 중요한 제목이고, 숫자가 커질수록 덜 중요한 하위 제목이 되어 <h6>이 가장 작습니다. 아래 코드를 body 안에 넣어 봅니다.

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

브라우저로 열어 보면 위에서 아래로 갈수록 글자 크기가 작아지는 것을 볼 수 있습니다. 각 줄은 <h1>로 열고 </h1>로 닫는 짝을 이루며, 그 사이에 제목으로 쓸 글자를 넣습니다.

여기서 중요한 원칙이 있습니다. 제목 태그는 글자 크기를 키우려고 쓰는 것이 아니라, 내용의 '구조와 중요도'를 나타내려고 쓴다는 것입니다. 한 페이지에서 <h1>은 그 페이지 전체의 대표 제목으로 보통 하나만 쓰고, 그 아래 큰 단락은 <h2>, 그 안의 작은 단락은 <h3> 식으로 순서대로 내려가며 씁니다. 이렇게 하면 검색 엔진과 화면 낭독기가 글의 구조를 올바로 이해합니다. '작게 보이고 싶다'는 이유로 <h4>를 쓰는 것은 잘못된 사용입니다.

📄 문단 태그 — p

이 섹션에서는 글의 본문을 이루는 문단 태그를 살펴보겠습니다.

제목 아래에는 본문 내용이 들어갑니다. 이 본문의 한 덩어리, 즉 문단을 만드는 것이 <p> 태그입니다. p는 문단을 뜻하는 영어 'paragraph'의 첫 글자입니다. 아래처럼 사용합니다.

<h2>오늘의 일기</h2>
<p>오늘은 HTML을 배웠습니다. 생각보다 재미있었습니다.</p>
<p>내일은 CSS를 배울 예정입니다. 기대가 됩니다.</p>

이 코드를 브라우저로 보면, 두 개의 문단이 각각 별도의 줄에 표시되고 문단 사이에 약간의 간격이 생깁니다. <p>는 이렇게 자기 앞뒤로 줄바꿈과 여백을 만들어, 글 덩어리를 자연스럽게 구분해 줍니다.

이런 성질을 가진 태그를 블록(block) 요소라고 부릅니다. 블록 요소는 한 줄 전체를 차지하며 위아래로 쌓입니다. 앞서 배운 제목 태그(h1~h6)와 문단 태그(p)가 모두 블록 요소입니다. 그래서 제목과 문단은 나란히 옆에 붙지 않고, 언제나 위에서 아래로 차곡차곡 배치됩니다. 이 '블록'이라는 개념은 앞으로 배치를 배울 때 매우 중요하니 기억해 두세요.

↩️ 줄바꿈과 공백 — br과 브라우저의 규칙

이 섹션에서는 초보자가 가장 많이 헷갈리는 부분, 즉 줄바꿈과 공백 처리를 살펴보겠습니다.

많은 사람이 처음에 이렇게 생각합니다. '코드에서 엔터로 줄을 바꾸면 화면에서도 줄이 바뀌겠지.' 그러나 그렇지 않습니다. HTML에는 중요한 규칙이 있습니다. 코드에 아무리 여러 칸의 공백이나 여러 줄의 엔터를 넣어도, 브라우저는 그것을 하나의 공백으로만 취급한다는 것입니다. 이를 '공백 압축'이라고 합니다. 다음 코드를 보세요.

<p>첫 번째 줄
두 번째 줄</p>

코드에서는 엔터로 두 줄로 나눴지만, 브라우저에서는 '첫 번째 줄 두 번째 줄'처럼 한 줄로 이어져 보입니다. 그렇다면 화면에서 실제로 줄을 바꾸려면 어떻게 할까요? 바로 <br> 태그를 씁니다.

<p>첫 번째 줄<br>두 번째 줄</p>

이제 <br>이 있는 자리에서 화면의 줄이 바뀝니다. <br>은 'break'의 줄임말로 줄바꿈을 뜻합니다. 그런데 이 태그에는 특별한 점이 있습니다. <p>...</p>처럼 여닫는 짝이 아니라, 혼자 쓰이는 태그라는 것입니다. 이렇게 닫는 태그 없이 홀로 쓰이는 태그를 빈 요소(void element)라고 부릅니다. 줄바꿈은 감쌀 내용이 없으니 닫을 필요도 없는 것입니다.

다만 주의할 점이 있습니다. <br>은 시(詩)나 주소처럼 정말로 줄을 바꿔야 하는 곳에만 써야 합니다. 문단과 문단을 나누는 데는 <br>을 여러 개 쓰지 말고, 앞서 배운 <p>를 각각 써야 올바릅니다.

➖ 구분선 — hr

이 섹션에서는 내용을 시각적으로 나누는 구분선 태그를 살펴보겠습니다.

글을 쓰다 보면 주제가 바뀌는 지점에 가로 선을 그어 구분하고 싶을 때가 있습니다. 이때 쓰는 것이 <hr> 태그입니다. hr은 'horizontal rule(수평선)'의 줄임말입니다.

<h2>1부. HTML 기초</h2>
<p>여기까지 HTML의 기본을 배웠습니다.</p>
<hr>
<h2>2부. CSS 기초</h2>
<p>이제 CSS를 배워 봅시다.</p>

브라우저로 보면 <hr>이 있는 자리에 가로 선 하나가 그어져, 위아래 내용이 시각적으로 나뉩니다. <hr> 역시 <br>처럼 닫는 태그가 없는 빈 요소입니다. 감쌀 내용 없이 그 자리에 선 하나를 긋는 역할만 하기 때문입니다.

이렇게 <hr>은 주제가 전환되는 지점을 표시하는 데 유용합니다. 다만 선의 모양(색·두께 등)을 바꾸는 것은 나중에 배울 CSS의 몫이니, 지금은 '주제를 나누는 선을 긋는 태그' 정도로 이해하면 충분합니다.

⚠️ 자주 하는 실수

이 섹션에서는 이 태그들을 쓸 때 흔히 저지르는 실수를 정리하겠습니다.

첫 번째, 제목 태그를 크기 조절용으로 쓰는 것입니다. 앞서 강조했듯 h1~h6은 '중요도'를 나타내는 것이지 '글자 크기'를 위한 것이 아닙니다. 크기는 나중에 CSS로 얼마든지 바꿀 수 있으니, 태그는 내용의 구조에 맞게 선택해야 합니다.

두 번째, br을 남용하는 것입니다. 문단을 나누려고 <br><br>을 연달아 쓰는 것은 좋지 않은 습관입니다. 문단은 반드시 <p>로 나누고, <br>은 한 문단 안에서 줄만 바꿀 때 제한적으로 쓰세요.

세 번째, 빈 요소에 닫는 태그를 붙이는 것입니다. <br>이나 <hr>은 혼자 쓰이는 태그이므로 </br> 같은 닫는 태그가 필요 없습니다. 여닫는 태그와 빈 요소를 구분하는 감각을 길러 두면 좋습니다.

📝 핵심 요약

이번 강에서는 웹 페이지의 기본 텍스트 태그를 배웠습니다.

h1~h6 — 제목 태그로, 글자 크기가 아니라 내용의 중요도·구조를 나타냅니다. h1은 보통 하나만, 순서대로 사용합니다.
p — 문단을 만드는 태그이며, 제목과 함께 한 줄 전체를 차지하는 '블록 요소'입니다.
공백 압축과 br — 코드의 엔터·여러 공백은 하나로 합쳐지며, 화면에서 줄을 바꾸려면 빈 요소인 <br>을 씁니다.
hr — 주제를 나누는 가로 구분선을 긋는 빈 요소입니다.

이제 제목과 문단으로 글의 뼈대를 세울 수 있게 되었습니다. 다음 강에서는 여러 항목을 나열하는 목록과, 다른 페이지로 이동하는 링크를 배워, 페이지에 구조와 연결을 더해 보겠습니다. 다음 강 「목록과 링크」에서 이어가겠습니다.

기본 태그