강조와 중요성 (Emphasis and importance)
강조와 중요성이란 무엇인가요? (What are emphasis and importance?)
사람들이 말로 대화할 때, 우리는 종종 문장의 의미를 바꾸기 위해 특정 단어에 강세를 두어 말합니다. 또한 특정 단어가 중요하거나 무언가 다르다는 것을 표시하고 싶을 때도 있죠. HTML은 이러한 효과를 텍스트 콘텐츠에 마크업(표시)할 수 있도록 다양한 시맨틱 요소들을 제공합니다. 이 섹션에서는 가장 흔하게 쓰이는 몇 가지 요소들을 살펴보겠습니다.
강조 (Emphasis)
우리가 말로 대화할 때 무언가를 강조하고 싶으면, 특정 단어에 강세(stress) 를 주어 우리가 말하려는 의미를 미묘하게 바꿉니다. 이와 비슷하게, 글로 쓰인 언어에서는 강조하고 싶은 단어를 주로 이탤릭체(기울임 꼴)로 표시하는 경향이 있습니다. 예를 들어, 아래의 두 문장은 서로 다른 의미를 가집니다.
나는 네가 늦지 않아서 기뻐. (I am glad you weren't late.)
나는 네가 늦지 않아서 기뻐. (I am glad you weren't late.)
첫 번째 문장은 상대방이 늦지 않은 것에 대해 진심으로 안도하는 것처럼 들립니다. 반면에, "glad(기뻐)"와 "late(늦지 않아서)"라는 단어가 모두 이탤릭체로 표시된 두 번째 문장은 약간 비꼬거나 수동 공격적인 느낌이 납니다. 상대방이 약간 늦게 도착한 것에 대한 짜증을 표현하는 것이죠.
HTML에서 이런 경우를 마크업할 때는 <em> (emphasis, 강조) 요소를 사용합니다. 문서를 읽기 더 흥미롭게 만들어 줄 뿐만 아니라, 이 태그들은 스크린 리더(시각 장애인용 화면 낭독기)에 의해 인식되어 다른 억양과 목소리 톤으로 읽어주도록 설정될 수 있습니다.
브라우저들은 기본적으로 이 태그를 이탤릭체로 스타일링하지만, 단순히 글씨를 기울이기 위한 목적으로 이 태그를 사용해서는 안 됩니다. 단순히 기울임 꼴 스타일이 필요하다면 <span> 요소를 사용하고 CSS를 적용하거나, 어쩌면 <i> 요소를 사용하는 것이 맞습니다 (아래 내용 참조).
<p>I am <em>glad</em> you weren't <em>late</em>.</p>강한 중요성 (Strong importance)
정말 중요한 단어를 강조하기 위해, 우리는 말할 때 그 단어에 큰 강세를 두고, 글을 쓸 때는 그 단어를 굵게(bold) 표시하는 경향이 있습니다. 예를 들면 다음과 같습니다:
이 액체는 맹독성입니다. (This liquid is highly toxic.)
당신만 믿겠습니다. 절대 늦지 마세요! (I am counting on you. Do not be late!)
HTML에서 이런 경우를 마크업할 때는 <strong> (strong importance, 강한 중요성) 요소를 사용합니다. 이 역시 문서를 훨씬 유용하게 만들어 줄 뿐만 아니라, 스크린 리더가 이를 인식하여 다른 목소리 톤으로 읽어줄 수 있게 합니다.
브라우저들은 기본적으로 이 태그를 굵은 글씨체(bold)로 스타일링합니다. 하지만 마찬가지로, 단순히 글씨를 굵게 만들기 위해 이 태그를 사용해서는 안 됩니다. 텍스트를 시각적으로만 굵게 만들려면 <span> 요소에 CSS를 적용하거나, 어쩌면 <b> 요소를 사용하는 것이 맞습니다.
<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>원한다면 <strong> 태그와 <em> 태그를 서로 중첩해서(안에 품어서) 사용할 수도 있습니다:
<p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p>💡 강사님의 취업 꿀팁:
만약 기술 면접에서 "시각적으로 글씨를 굵게 처리하려면 어떤 태그를 써야 할까요?"라는 질문을 받는다면, "단순한 시각적 효과라면 CSS의font-weight: bold;를 사용해야 합니다. HTML의<strong>이나<em>태그는 컴퓨터에게 이 부분이 정말 중요하거나 강조된다는 '의미'를 전달해야 할 때만 사용해야 하며, 이를 통해 시각 장애인을 위한 스크린 리더기가 억양을 다르게 읽어주는 등 웹 접근성(Web Accessibility)을 향상시킬 수 있습니다." 라고 답변해 보세요. 면접관분들이 이 지원자는 웹의 기본기를 정말 잘 이해하고 있다고 흐뭇해하실 거예요!
강조와 중요성을 직접 다뤄봅시다 (Let's play with emphasis and importance)
이 섹션에서는 여러분이 직접 강조와 중요성 태그를 다뤄보시길 바랍니다:
- 아래 코드 블록에서 "Play" 버튼을 클릭하여 MDN Playground에서 예제를 수정해 보세요.
- 메인 제목(
h1)에서 "Emphasis"라는 단어에는 강조(<em>)를, "importance"라는 단어에는 강한 중요성(<strong>)을 부여해 보세요. - 첫 번째 단락(
p)에서 커피 머신의 이름에 강한 중요성을 부여하고, 커피를 묘사하는 형용사들에는 강조를 부여해 보세요. - 두 번째 단락(
p)에서 온도를 나타내는 설명 ("cold")과 여러분이 취해야 할 행동 ("wrap up warm to avoid falling ill")에 강한 중요성을 부여하세요. "falling ill(병에 걸리는 것)" 부분에는 마크업을 추가로 덧붙여서 강조되면서 동시에 중요하도록(중첩) 만들어 보세요.
만약 실수를 했다면, MDN Playground의 Reset(초기화) 버튼을 눌러 작업 내용을 지울 수 있습니다. 정말 막혀서 어떻게 해야 할지 모르겠다면, 코드 블록 아래에 있는 정답(solution)을 확인해 보세요.
/* CSS 영역 (숨김 처리됨) */
h1 {
font-weight: normal;
}<h1>Emphasis and importance</h1>
<p>
My new coffee machine is called The Percolator 2000. It produces the most
sublime and wonderful brew.
</p>
<p>
In the dead of winter, it will be cold. You should wrap up warm to avoid
falling ill.
</p>여러분이 완성한 HTML 코드는 아래와 같은 모습이어야 합니다:
<h1><em>Emphasis</em> and <strong>importance</strong></h1>
<p>
My new coffee machine is called <strong>The Percolator 2000</strong>. It
produces the most <em>sublime</em> and <em>wonderful</em> brew.
</p>
<p>
In the dead of winter, it will be <strong>cold</strong>. You should
<strong>wrap up warm to avoid <em>falling ill</em></strong>.
</p>이탤릭체, 굵은 글씨, 밑줄… (Italic, bold, underline…)
지금까지 우리가 논의한 요소들(<em>, <strong>)은 명확하게 연관된 시맨틱(의미)을 가지고 있습니다. 반면, <b>, <i>, 그리고 <u> 태그가 처한 상황은 다소 복잡합니다. 이 태그들은 CSS가 제대로 지원되지 않거나 아예 존재하지 않던 시절에, 사람들이 텍스트를 굵게 하거나 이탤릭체로 만들거나 밑줄을 긋기 위해 생겨난 것들입니다.
이처럼 의미(semantics)에는 영향을 주지 않고 오직 시각적인 표현(presentation)에만 영향을 미치는 요소들을 표현용 요소(presentational elements) 라고 부릅니다. 앞서 살펴본 바와 같이, 웹 접근성(accessibility)과 검색 엔진 최적화(SEO) 등에서 시맨틱이 너무나도 중요하기 때문에, 이러한 표현용 요소들은 더 이상 예전과 같은 목적(단순 시각적 꾸밈)으로 사용되어서는 안 됩니다.
HTML5에서는 <b>, <i>, <u> 태그에 새롭고 다소 헷갈리는 시맨틱 역할을 부여하여 재정의했습니다.
여러분이 기억해야 할 가장 좋은 규칙은 다음과 같습니다: 전통적으로 굵은 글씨, 이탤릭체, 밑줄로 전달되던 의미를 표현해야 하는데, 딱히 더 적합한 시맨틱 요소가 없을 때만 <b>, <i>, 또는 <u> 태그를 사용하는 것이 적절합니다. 그리고 보통은 훨씬 더 적합한 태그가 존재합니다. <strong>, <em>, <mark>, 또는 <span> 태그가 더 적절하지는 않을지 항상 먼저 고민해 보세요.
항상 웹 접근성 마인드셋(accessibility mindset) 을 유지하세요. '이탤릭체'라는 시각적인 개념 자체는 스크린 리더를 사용하는 시각 장애인 분들이나 라틴 알파벳이 아닌 다른 문자 체계를 사용하는 사람들에게는 별로 도움이 되지 않기 때문입니다.
<i>태그는 전통적으로 이탤릭체로 전달되던 의미를 나타낼 때 사용합니다: 외국어, 분류학적 명칭(학명), 전문 용어, 마음속 생각 등...<b>태그는 전통적으로 굵은 글씨로 전달되던 의미를 나타낼 때 사용합니다: 핵심 키워드, 제품 이름, 리드 문장(문단의 첫 핵심 문장) 등...<u>태그는 전통적으로 밑줄로 전달되던 의미를 나타낼 때 사용합니다: 고유 명사, 철자 오류(오타) 등...
참고 (Note):
사람들은 텍스트에 '밑줄'이 쳐져 있으면 본능적으로 그것을 하이퍼링크(클릭할 수 있는 링크)와 강하게 연관 지어 생각합니다. 따라서 웹에서는 오직 링크에만 밑줄을 치는 것이 가장 좋습니다. 의미론적으로 정말 적합할 때만<u>요소를 사용하되, CSS를 사용해서 기본적으로 생기는 밑줄 스타일을 웹에 더 적합한 다른 형태(예: 빨간색 물결 밑줄 등)로 변경하는 것을 고려하세요. 아래 예제가 이를 어떻게 할 수 있는지 보여줍니다.
<p>
The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
hummingbird in Eastern North America.
</p>
<p>
The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
<i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>
<p>Someday I'll learn how to <u class="spelling-error">spel</u> better.</p>
<dl>
<dt>Semantic HTML</dt>
<dd>
Use the elements based on their <b>semantic</b> meaning, not their
appearance.
</dd>
</dl>💡 강사님의 실무 꿀팁 추가:
사실 현업 프론트엔드 개발을 하시다 보면<b>,<i>,<u>를 볼 일은 많이 줄어들었습니다. 디자인 시안을 퍼블리싱할 때는 보통<span>태그에 클래스를 부여하고 CSS로 폰트 웨이트, 스타일, 텍스트 데코레이션을 제어하는 방식이 훨씬 유지보수하기 편하거든요. 그래서 이 챕터의 핵심은 "눈에 보이는 스타일을 위해 HTML 태그를 고르지 말라"는 점입니다!
