Ch.2 콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지
텍스트를 강조하는 법
strong과 em 태그의 의미적 차이를 이해한다b/i 태그와 strong/em 태그의 차이를 구별한다HTML 주석을 작성할 수 있다
모든 텍스트가 같은 무게라면 중요한 것을 어떻게 알까?
교과서를 펼치면 굵은 글씨, 기울임 글씨가 있습니다. 이것들은 '여기가 중요해!'라는 신호입니다.
HTML에서 텍스트를 강조하는 방법은?
strong(강한 강조)과 em(기울임 강조) — 의미를 담은 강조 태그입니다.
article
핵심 내용
텍스트에 의미를 담아 강조하는 두 가지 태그
<p>HTML에서 <strong>매우 중요한 내용</strong>은 strong 태그로 감쌉니다.</p>
<p>부가적인 <em>강조나 뉘앙스</em>는 em 태그를 사용합니다.</p>
<!-- 이것은 주석입니다. 화면에 보이지 않습니다 -->
<p>일반 텍스트입니다.</p>strong/em = 의미적 강조 (스크린 리더가 '강조'로 읽음) b/i = 시각적 강조만 (의미 없음) 접근성을 위해 strong/em을 사용하세요!
자기소개에 강조 표현을 추가해봅시다
스크린 리더가 '강조'로 인식하는 태그는?
HTML 주석 <!-- -->은 브라우저 화면에 표시된다
다음 중 시맨틱 태그가 아닌 것은?
텍스트 강조
compare_arrows
비교 정리
| 항목 | 인라인 요소 | 블록 요소 |
|---|---|---|
| 대표 태그 | <strong>, <em>, <a>, <span> | <h1>~<h6>, <p>, <div>, <ul> |
| 배치 방식 | 줄바꿈 없이 옆으로 나열 | 항상 새 줄에서 시작, 전체 너비 차지 |
| 크기 설정 | width/height 설정 불가 | width/height 설정 가능 |
edit_note
정리 노트
텍스트를 강조하는 법
강조 태그
- <strong>
- 의미적으로 중요한 텍스트를 굵게 표시
- <em>
- 강세를 둘 텍스트를 기울임꼴로 표시
- <b>
- 의미 없이 시각적으로만 굵게
- <i>
- 의미 없이 시각적으로만 기울임
의미적 vs 시각적
- strong/em
- 검색엔진과 스크린리더가 중요도를 인식
- b/i
- 단순 스타일링, 접근성에 영향 없음
★
의미가 있는 강조는 strong/em, 단순 꾸밈은 CSS를 사용하세요.
image
시각 자료
다이어그램: wd-scene-html-basics
check_circle
핵심 정리
- 1<strong> = 중요 강조, <em> = 뉘앙스 강조
- 2b/i보다 strong/em이 접근성에 좋다
- 3<!-- --> 주석은 화면에 표시되지 않는다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작