✨ 구문 콘텐츠 정리
📌 제목 : <h1> - <h6>
HTML <h1> - <h6> 요소는 6단계의 구획 제목을 나타냅니다.
<h1>이 가장 중요하고<h6>이 가장 덜 중요한 제목입니다.- 웹 브라우저는 제목의 정보를 활용해 자동으로 목차를 생성할 수 있습니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
💡 참고사항
• 글자 크기를 조절하려고 <h1>을 사용하지 말 것 → 대신 CSS의 font-size 사용
• <h1>은 페이지당 하나만 사용 (웹 접근성 향상)
• <h1>부터 순차적으로 사용해야 웹 표준에 적합
두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없는 것 처럼 !
📌 본문 : <p></p>(문단)
HTML <p> 요소는 하나의 문단(문장들의 집합)을 나타냅니다.
<p>첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.</p> ✅ 문단은 블록 레벨 요소이며, 닫는 태그 </p> 이전에 다른 블록 요소가 분석되면 자동으로 닫힙니다.
✅ 줄바꿈이 자동으로 적용되지 않습니다!
🟡 빈 요소
📌 본문 : <br> (줄바꿈)
HTML <br> 요소는 줄바꿈(Line Break)을 생성합니다.
<p>
O’er all the hilltops<br />
Is quiet now,<br />
In all the treetops<br />
Hearest thou<br />
Hardly a breath;<br />
The birds are asleep in the trees:<br />
Wait, soon like these<br />
Thou too shalt rest.
</p>✅ <br> 요소는 여는 태그만 작성하면 됩니다!
✅ <br>을 사용한 만큼 줄바꿈이 적용됩니다.
⚠️
<br>을 문단 간 여백을 줄 때 사용하지 마세요!
→ CSS의 margin 속성을 활용하세요.
📌 본문 : <hr> (구분선)
HTML <hr> 요소는 콘텐츠의 주제 변경이나 장면 전환을 나타냅니다.
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr />
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>✅ 화면 너비만큼 선이 출력됩니다.
🟢 인용 요소
- 출처 텍스트는
<cite>요소로 제공 ➡️ 출력되지는 않는다.
📌 본문 : <blockquote></blockquote> (긴 인용문)
HTML <blockquote> 요소는 긴 인용문을 표현합니다.
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>✅ 기본적으로 들여쓰기가 적용됩니다.
✅ 출처는 <cite> 요소로 제공할 수 있습니다.
⚠️
<p>태그 안에<blockquote>태그를 사용하면 안 됩니다!
<p>
<blockquote>
Avian carriers can provide high delay, low throughput, and low altitude
service.
</blockquote>
</p>HTML 구조상 자동으로 <p>가 닫히기 때문입니다.
그래서 HTML 상으로는
<p></p>
<blockquote>
Avian carriers can provide high delay, low throughput, and low altitude
service.
</blockquote>
</p>이렇게 되어있어서 HTML에서 인식을 못해서 잘못된 코드이다.
📌 본문 : <q></q> (짧은 인용문)
HTML <q> 요소는 짧은 인용문을 표현할 때 사용됩니다.
• 브라우저에서 자동으로 따옴표(“ ”)를 추가합니다.
<p>
Mozilla 재단의 웹사이트에 따르면,
<q cite="https://www.mozilla.org/en-US/about/history/details/">
Firefox 1.0 은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q>
</p>✅ 줄바꿈 없이 간단한 인용문에 적합합니다.
🟠 미리 서식 정의된 텍스트 요소
📌 본문 : <pre></pre> (미리 서식화된 텍스트)
HTML <pre> 요소는 HTML 문서에서 작성한 그대로 표현합니다.
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>✅ 고정폭 글꼴이 사용됩니다.
✅ 공백과 줄바꿈이 그대로 유지됩니다.
고정폭 글꼴이란?
<pre>IIII</pre> <p>IIII</p>• 일반
<p>태그에서는 가변폭 글꼴을 사용합니다.
✅<pre>를 사용하면 글자가 동일한 간격으로 정렬됩니다.
📚 참고 문헌
