HTML 글자 강조 — strong · b · em · i · font-size · line-height 완전 정리

 

 

Web Development · HTML Text

HTML 글자 강조 4총사 —
strong · b · em · i 완전 정리

시각은 같은데 의미가 다른 태그들 + font-size, line-height로 글 다듬기

시작 오늘 분석할 코드

글자에 굵기·기울임을 주는 4가지 태그가 한 페이지에 모여 있다. 시각 효과는 비슷해 보이지만 의미와 사용 시점이 모두 다르다.

<style> p { font-size: 16px; line-height: 25px; } </style> <h2>제주 이색 여행지 - 이중섭 거리</h2> <p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p> <p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고 ...</p>

실제 출력 결과

제주 이색 여행지 - 이중섭 거리

주말마다 '서귀포문화예술디자인시장'이 열립니다.

'아트마켓'이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고 작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.

용어 용어 정리

strong의미상 중요 (자동 굵게)

b시각적 굵게만 (의미 없음)

em의미상 강조 (자동 기울임)

i시각적 기울임만 (의미 없음)

font-size글자 크기 (px·em·rem)

line-height줄 간격 — 가독성 핵심

---

1 같은 모양인데 왜 두 개씩?

HTML에서 strong과 b는 둘 다 굵게, em과 i는 둘 다 기울임으로 보인다. 시각적으로는 똑같다. 그래서 처음엔 "왜 굳이 두 개?" 싶다.

차이는 의미(semantic)에 있다.
strong·em → "이 부분은 중요하다" 라는 의미 정보 + 시각 효과
b·i → 단순한 시각 효과만

태그	시각	의미	스크린 리더	SEO
<strong>	굵게	중요	강세 넣어 읽음	가중치 ↑
<b>	굵게	없음	일반 읽음	일반
<em>	기울임	강조	강조 톤으로	가중치 ↑
<i>	기울임	없음	일반 읽음	일반

---

2 언제 어떤 태그를 쓰나?

strong (의미 굵게)

"경고: 클릭 전 확인하세요"
핵심 키워드
중요 알림
경고 문구

b (시각 굵게)

"신간 도서 해리 포터"
책 제목
제품명
고유명사 (단순 강조)

em (의미 기울임)

"이 시점이 매우 중요"
억양/뉘앙스
강조하고 싶은 단어
스크린 리더가 톤 변경

i (시각 기울임)

"Homo sapiens"
학명
외국어 단어
마음속 생각·기술용어

※ 헷갈리면 strong·em을 쓰는 게 안전하다. 의미 + 시각 둘 다 챙김. b·i는 "의미는 정말 없는데 굵기/기울임만 필요"한 특수 상황에만.

---

3 HTML4 → HTML5의 변화

옛날 HTML4 시절에는 <b>·<i>가 "단순 굵게/기울임"이었고, HTML5에서 의미를 부여하기 위해 <strong>·<em>이 권장됐다. 둘 다 살려놓고 의미를 분화시킨 것.

버전	b/i 의미	strong/em 의미
HTML4	단순 굵게/기울임	강조 (현재와 같음)
HTML5	의미 없는 시각 강조	의미상 중요/강조

※ 옛 코드 마이그레이션 시 <b>가 단순 디자인 용도였는지 의미상 강조였는지 판단해서 바꿔야 한다.

---

4 font-size — 글자 크기 단위

이번 코드의 p { font-size: 16px; }는 단락의 글자 크기를 16픽셀로 지정한다. 단위는 px 외에도 여러 가지가 있다.

단위	의미	예시	특징
px	픽셀 — 절대 단위	16px	고정 크기 — 모든 화면에서 같음
em	부모 글자 크기 기준	1.2em	중첩되면 누적
rem	html 글자 크기 기준	1.2rem	중첩 영향 없음 (권장)
%	부모 대비 비율	120%	em과 비슷

※ 0.8em은 부모 글자의 80% 크기. 2em은 200%. 누적되는 특성 때문에 깊이 중첩되면 의도치 않게 작아지거나 커진다.

반응형

---

5 line-height — 가독성을 결정하는 줄 간격

line-height는 한 줄의 위아래 여유 공간이다. 글자 크기가 16px이고 line-height가 25px이면, 줄 사이에 9px의 여백이 생긴다. 이 값에 따라 글의 인상이 완전히 달라진다.

font-size: 16px; line-height: 16px; → 줄과 줄이 너무 붙음 (답답) line-height: 24px; → 적당히 숨통 트임 (가독성 ↑) line-height: 40px; → 너무 떨어져 보여 어색

단위 작성법	예시	특징
px	line-height: 25px	고정 픽셀 (이번 코드)
비율 (단위 없음)	line-height: 1.6	글자 크기의 1.6배 — 권장
%	line-height: 160%	비율과 거의 동일

※ 실무 권장 line-height

• 본문: 1.6 ~ 1.8 (가독성 좋음)
• 제목: 1.2 ~ 1.4 (간격 좁게)
• 코드: 1.4 ~ 1.6
• 단위 없는 비율(1.6)이 폰트 크기 변경에 유연 — 실무 표준

---

6 자주 하는 실수

실수	증상	해결
디자인 위해 strong 남발	의미가 흐려져 SEO 약화	중요한 부분에만
b 대신 strong (또는 반대)	의미 부정확	의미 있으면 strong, 단순이면 b
line-height에 단위 px 고정	폰트 크기 변경 시 어색해짐	비율(1.6)로
font-size가 너무 작음	모바일에서 안 보임	본문 16px 이상
i를 일반 강조로 사용	읽기 흐름 끊어짐	em이나 strong이 더 적합

---

핵심 한 줄 요약

<strong>의미상 중요 + 자동 굵게

<b>단순 굵게 — 의미 없음

<em>의미상 강조 + 자동 기울임

<i>단순 기울임 — 학명·외국어용

font-sizepx(고정) 또는 rem(권장)

line-height가독성 핵심 — 1.6 ~ 1.8 권장

의미 vs 디자인의미는 태그로, 굵기·기울임 디자인은 CSS로

Tags

#strong #b #em #i #HTML #글자강조 #font-size #line-height #가독성 #시맨틱태그 #CSS #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

strong, b, em, i, HTML, 글자강조, font-size, line-height, 가독성, 시맨틱태그, CSS, 웹개발, 티스토리