✍️
EPISODE 02
strong · em · blockquote · code · pre · 위/아래첨자
텍스트 요소
글을 더 풍부하고 의미 있게 표현하는 다양한 텍스트 태그(strong, em, blockquote, q, cite, code, pre, sup/sub, mark, del, ins, abbr)를 익힙니다.
HTML텍스트시맨틱
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 html-01
결과물
의미가 명확한 블로그 형식 글 작성
이 강의에서 배우는 것
- 1strong/em과 b/i의 의미적 차이를 안다
- 2blockquote · q · cite로 인용을 적절히 표현한다
- 3code/pre로 인라인·블록 코드를 다룬다
- 4sup/sub/mark/del/ins/abbr 같은 보조 태그를 활용한다
1. 강조 태그
strong — 의미적 중요
html
<p>이 약은 <strong>하루 3번</strong> 복용해야 합니다.</p>굵게 표시되며, 스크린리더가 강조해 읽어줍니다. 단순 굵게가 아닌 “중요한 내용”의 의미를 가집니다.
em — 강세
html
<p>나는 <em>정말</em> 배가 고프다.</p>기울임으로 표시되며, 말하는 억양의 강세를 의미합니다.
b / i — 시각적 표현 (의미 없음)
| 태그 | 시각 | 의미 |
|---|---|---|
| <strong> | 굵게 | 있음 |
| <b> | 굵게 | 없음 |
| <em> | 기울임 | 있음 |
| <i> | 기울임 | 없음 |
💡
가능하면 <b>, <i>보다 <strong>, <em>을 사용하세요. SEO와 접근성에 유리합니다.
2. 인용 태그
blockquote — 블록 인용
html
<blockquote cite="https://example.com">
<p>"Education is not the filling of a pail, but the lighting of a fire."</p>
</blockquote>cite — 작품 제목/출처
html
<p><cite>해리포터와 마법사의 돌</cite>은 J.K. 롤링이 쓴 소설입니다.</p>q — 인라인 인용
html
<p>선생님은 <q>열심히 하면 반드시 된다</q>고 말씀하셨습니다.</p>브라우저가 자동으로 인용 부호를 붙여줍니다.
3. 코드 관련 태그
code — 인라인 코드
html
<p>변수 선언은 <code>let</code> 또는 <code>const</code>를 사용합니다.</p>pre — 서식 보존 텍스트 블록
html
<pre><code>
function greet(name) {
console.log("안녕하세요, " + name + "!");
}
</code></pre>4. 줄바꿈과 구분선
html
<p>서울 강남구<br>테헤란로 123<br>4층 401호</p>
<p>첫 번째 섹션</p>
<hr>
<p>두 번째 섹션 — 위 hr이 시각적 구분</p>⚠️
단락 사이 여백을 위해 <br>을 여러 번 쓰지 마세요. CSS의 margin/padding을 사용하세요.
5. 위첨자 / 아래첨자
html
<p>물의 화학식: H<sub>2</sub>O</p>
<p>피타고라스 정리: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>6. 기타 유용한 태그
html
<p>시험 범위: <mark>3장부터 5장까지</mark></p>
<p>가격: <del>50,000원</del> → 35,000원</p>
<p>회의 날짜: <del>3월 5일</del> <ins>3월 7일</ins></p>
<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기본 언어입니다.</p>