topic★★★★★난이도 · 약 15분

텍스트를 강조하는 법

strong, em으로 의미적 강조. 인라인 요소와 블록 요소의 차이를 구분한다.

#strong#em#인라인#블록#접근성

왜 배우는가

시각적 강조(b, i)가 아니라 의미적 강조(strong, em)를 사용해야 스크린 리더가 올바르게 읽어준다. 접근성의 첫걸음이다.

텍스트에 의미를 담아 강조하는 두 가지 태그

html

<p>HTML에서 <strong>매우 중요한 내용</strong>은 strong 태그로 감쌉니다.</p>
<p>부가적인 <em>강조나 뉘앙스</em>는 em 태그를 사용합니다.</p>

<!-- 이것은 주석입니다. 화면에 보이지 않습니다 -->
<p>일반 텍스트입니다.</p>

strong = 의미적 강한 강조, em = 의미적 기울임 강조. b/i는 시각적 강조만 해서 비권장.

구분	의미 있는 강조 (권장)	시각적 강조만 (비권장)
코드	`<strong>경고: 삭제 불가</strong>`	`<b>경고: 삭제 불가</b>`
코드	`<em>선택 사항입니다</em>`	`<i>선택 사항입니다</i>`

strong/em = 의미적 강조 (스크린 리더가 '강조'로 읽음) b/i = 시각적 강조만 (의미 없음) 접근성을 위해 strong/em을 사용하세요!

구분	인라인 요소	블록 요소
대표 태그	`<strong>`, `<em>`, `<a>`, `<span>`	`<h1>`~`<h6>`, `<p>`, `<div>`, `<ul>`
배치 방식	줄바꿈 없이 옆으로 나열	항상 새 줄에서 시작, 전체 너비 차지
크기 설정	width/height 설정 불가	width/height 설정 가능

자기소개에 강조 표현을 추가해봅시다

html

<h2>자기소개</h2>
<p>
  안녕하세요! 저는 <strong>웹 개발</strong>을 배우고 있는 학생입니다.
  <em>특히 프론트엔드에 관심이 많습니다.</em>
</p>

<!-- TODO: 나중에 포트폴리오 링크 추가 -->
<p>이 홈페이지는 <strong>HTML, CSS, JavaScript</strong>로 만들었습니다.</p>

strong으로 핵심 키워드를, em으로 부가 설명을 강조한 예시.

태그	설명
`<strong>`	의미적으로 중요한 텍스트를 굵게 표시
`<em>`	강세를 둘 텍스트를 기울임꼴로 표시
`<b>`	의미 없이 시각적으로만 굵게
`<i>`	의미 없이 시각적으로만 기울임

구분	설명
strong/em	검색엔진과 스크린리더가 중요도를 인식
b/i	단순 스타일링, 접근성에 영향 없음

의미가 있는 강조는 strong/em, 단순 꾸밈은 CSS를 사용하세요.

실기 드릴 3문항

edit실기 드릴 · 단답형

스크린 리더가 '강조'로 인식하는 태그는?

check_circle실기 드릴 · OX

HTML 주석 은 브라우저 화면에 표시된다.

edit실기 드릴 · 단답형

다음 중 시맨틱 태그가 아닌 것은? (header, nav, div, article)