html 9. 서식

브라우저에서 strong 태그는 b, em 태그는 i 로 표시된다는데 이거 이해 못함. 
b i 는 굵게, 기울임꼴을 나타내는 반면,
strong em 은 강조 그 자체라는데
처음에는 이해를 못했다.

---

CLAUDE 답변

핵심은 시각적 표현 vs 의미(semantic) 차이야.

---

b / i → "그냥 이렇게 보여줘" (스타일 지시)

strong / em → "이 내용이 중요해 / 강조야" (의미 부여)

---

브라우저가 렌더링할 때 결과물은 똑같아 보여. 둘 다 굵게, 기울임으로 나옴.

근데 코드 입장에서 의미가 다른 거야.

<b>오늘 마감</b>         <!-- "굵게 보여줘" -->
<strong>오늘 마감</strong> <!-- "이게 중요한 정보야" -->

---

왜 구분하냐?

1. 스크린 리더 (시각장애인 보조기기) — <strong> 만나면 "중요한 내용입니다" 톤으로 읽어줌. <b>는 그냥 읽고 지나감.
2. SEO — 검색엔진이 <strong> 안의 텍스트를 "중요 키워드"로 가중치 줌.
3. CSS로 스타일 바꿨을 때 — <b>는 스타일 지시 자체가 목적이라 굵기 바꾸면 의미가 흔들림. <strong>은 "중요하다"는 의미가 유지됨.

---

한 줄 정리:

b/i = 디자이너 지시 / strong/em = 작가의 의도

실무에서 웬만하면 <strong>, <em> 쓰는 게 맞고, <b>, <i>는 "의미는 없는데 그냥 굵게/기울여야 할 때" (예: 책 제목, 전문용어 첫 등장 등) 쓰는 용도로 남아있어.

---

GPT 답변

헷갈리는 포인트가 맞아.
핵심은 “보이는 모양”이냐, “의미”냐 차이임.

HTML에는 크게 두 종류가 있다고 보면 된다.

1. 그냥 모양만 바꾸는 태그
2. 이 텍스트가 어떤 의미인지 알려주는 태그

예시로 보면 쉬움.

<b>중요한 글자</b>
<strong>중요한 글자</strong>

브라우저에서는 둘 다 보통 굵게 보인다.

근데 내부 의미는 다름.

• b = "그냥 굵게 보여줘"
• strong = "이 내용은 중요함"

즉:

• b는 디자인 중심
• strong은 의미 중심

마찬가지로:

<i>기울임</i>
<em>강조</em>

브라우저에서는 둘 다 기울어져 보일 가능성이 높다.

근데 의미는:

• i = 그냥 스타일상 기울임
• em = 강조해서 읽어야 함

차이를 현실 비유로 하면:

• b, i → 형광펜/폰트 꾸미기
• strong, em → "여기 중요함"이라는 의도 전달

왜 이렇게 나눴냐면, HTML은 원래 “문서 구조와 의미”를 설명하려고 만들어졌기 때문임.

예를 들어 스크린리더(시각장애인용 음성 읽기 프로그램)는:

<strong>주의하세요</strong>

이런 걸 만나면 목소리를 더 강하게 읽기도 함.

근데:

<b>주의하세요</b>

는 그냥 굵은 글씨일 뿐이라 의미상 중요하다고 판단 안 할 수 있음.

정리하면:

• b = 시각적으로 굵게
• strong = 중요하다는 의미를 가진 강조
• i = 시각적으로 기울임
• em = 문맥상 강조

그리고 브라우저가 기본적으로:

• strong → 굵게
• em → 기울임

으로 보여주도록 설정해둔 거임.

즉 “strong이 b로 표시된다”는 말은:

“브라우저 기본 스타일이 strong을 굵게 렌더링한다”는 뜻이지,
strong과 b가 같은 태그라는 뜻은 아님.

 

HTML에는 특별한 의미를 가진 텍스트를 정의하기 위한 여러 요소가 포함되어 있다.

---

HTML 서식 요소

서식 요소는 특수한 유형의 텍스트를 표시하도록 설계됨.

• <b>- 굵은 글씨
• <strong>- 중요 텍스트
• <i>- 이탤릭체 텍스트
• <em>- 강조된 텍스트
• <mark>- 표시된 텍스트
• <small>- 더 작은 글씨
• <del>- 삭제된 텍스트
• <ins>- 삽입된 텍스트
• <sub>- 아래첨자 텍스트
• <sup>- 위첨자 텍스트

---

HTML <b> 및 <strong> 요소

이 HTML <b>요소는 특별한 중요도 없이 텍스트를 굵게 표시한다. 

<b>This text is bold</b>

HTML <strong>요소는 중요도가 높은 텍스트를 정의함. 이 요소 안의 내용은 일반적으로 굵게 표시됨.

<strong>This text is important!</strong>

 

---

HTML <i> 및 <em> 요소

HTML <i>요소는 텍스트의 일부를 다른 어조나 분위기로 표현한다. 요소 안의 내용은 일반적으로 이탤릭체로 표시된다.

팁: 이 <i>태그는 전문 용어, 다른 언어의 구문, 생각, 선박 이름 등을 나타내는 데 자주 사용된다.

<i>This text is italic</i>

HTML <em>요소는 강조된 텍스트를 정의합니다. 이 요소 안의 내용은 일반적으로 이탤릭체로 표시된다.

팁: 화면 낭독기는 단어에 <em> 강세를 주어 발음한다.

<em>This text is emphasized</em>

---

HTML <small> 요소

HTML <small>요소는 더 작은 텍스트를 정의한다.

<small>This is some smaller text.</small>

---

HTML <mark> 요소

HTML <mark>요소는 표시하거나 강조해야 할 텍스트를 정의한다.

<p>Do not forget to buy <mark>milk</mark> today.</p>

---

HTML <del> 요소

HTML <del>요소는 문서에서 삭제된 텍스트를 정의합니다. 브라우저는 일반적으로 삭제된 텍스트에 줄을 그어 표시한다.

<p>My favorite color is <del>blue</del> red.</p>

---

HTML <ins> 요소

HTML <ins>요소는 문서에 삽입된 텍스트를 정의한다. 브라우저는 일반적으로 삽입된 텍스트에 밑줄을 긋는다.

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

---

HTML <sub> 요소

HTML 요소는 아래첨자 텍스트를 정의한다. 아래첨자 텍스트는 일반 줄보다 반 문자 아래에 나타나며, 때로는 더 작은 글꼴로 표시된다. 아래첨자 텍스트는 H₂O<sub> 와 같은 화학식에 사용할 수 있다.

<p>This is <sub>subscripted</sub> text.</p>

---

HTML <sup> 요소

HTML 요소는 위첨자 텍스트를 정의한다. 위첨자 텍스트는 일반 줄보다 반 문자 위에 나타나며, 때로는 더 작은 글꼴로 표시됩니다. 위첨자 텍스트는 WWW [1]<sup> 와 같은 각주에 사용할 수 있다.

<p>This is <sup>superscripted</sup> text.</p>

---

HTML 텍스트 서식 요소

Tag                              Description

<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text