문단과 강조

p는 문단(paragraph) 하나를 나타냅니다. 문단 안의 글에 뜻을 더할 때는 strong과 em을 씁니다. strong은 중요한 글, em은 말할 때 힘주어 읽는 자리라는 뜻이고, 굵게 · 기울여 그리는 것은 그 뜻을 보여 주는 기본 모양일 뿐입니다.

글을 굵게 하고 싶을 때 어느 태그를 쓰느냐로 끝나지 않습니다. 같은 굵은 글자라도 strong은 '이 글이 중요하다'는 뜻을 나무에 남기고, 굵은 모양만 낸 글은 그런 뜻이 없습니다. em은 어느 낱말에 두느냐에 따라 같은 문장의 뜻이 달라집니다. 그래서 강조 요소는 모양이 아니라 뜻을 보고 고릅니다(브라우저 규칙 3). 이 레슨에서는 문단, 두 강조 요소의 뜻, 모양이 같아도 뜻이 다른 짝을 봅니다.

<p><em>먼저</em> 김치를 볶아요.</p>

1문단 p

<p>김치볶음밥은 15분이면 됩니다.</p>
<p>잘 익은 김치를 쓰세요.</p>

p 하나가 문단 하나입니다. 브라우저는 문단마다 줄을 새로 시작하고, 문단 위아래에 틈을 둡니다. 이 틈은 HTML이 아니라 CSS가 정합니다. 잰 값의 margin-top · margin-bottom은 문단 위아래의 바깥 여백이고, 브라우저가 처음부터 가진 모양(기본 스타일)이 16px로 정해 두었습니다. 여백은 10단원 '박스 모델'에서 자세히 봅니다.

2중요한 글 strong, 힘주어 읽는 글 em

<p><strong>불 조심</strong></p>
<p><em>먼저</em> 김치를 볶아요.</p>

strong은 중요한 글(strong importance)입니다. 주의할 점, 꼭 지켜야 할 것에 씁니다. 브라우저는 굵게(700) 그립니다. em은 강조(emphasis) — 말로 읽을 때 힘이 가는 낱말입니다. 브라우저는 기울여(italic) 그립니다.

em은 자리를 옮기면 같은 문장의 뜻이 바뀝니다.

<p>먼저 <em>김치를</em> 볶아요.</p>

글자는 같고 기울어진 낱말만 다릅니다. 화면에서는 작은 차이지만, 나무에는 어느 낱말에 힘이 가는지가 남습니다.

3모양이 같아도 뜻은 다르다 — strong과 b

<p><strong>불 조심</strong></p>
<p><b>불 조심</b></p>

두 줄의 화면은 똑같이 굵습니다. 다른 것은 나무에 든 요소의 이름입니다. b는 굵은 모양으로 눈길만 끌 글(뜻의 무게 없이 — 상품 이름, 글 속 핵심어)에 쓰는 요소이고, '중요하다'는 뜻은 없습니다. 같은 굵은 글이라도 중요한 경고는 strong으로 씁니다. 나무를 읽는 쪽은 모양이 아니라 요소 이름에서 뜻을 얻습니다(브라우저 규칙 3). em과 i도 같은 짝입니다 — 둘 다 기울여 그리지만, em만 '힘주어 읽는다'는 뜻입니다.

예제

조리 팁 두 줄입니다. 어느 글이 굵게, 어느 글이 기울여 그려질지, 둘째 문장에서 힘이 가는 낱말은 무엇인지 먼저 적어 본 뒤 결과 화면을 펴 보세요.

<p><strong>불 조심</strong></p>
<p>김치를 <em>먼저</em> 볶아요.</p>

자주 틀리는 곳

틀린 생각: strong은 글자를 굵게 하는 태그다.

화면에서 늘 굵게 보이니, 굵게 하는 태그로 여기게 됩니다.

<p><strong>달걀 2개</strong></p>

재료 이름을 눈에 띄게 하려고 strong을 썼습니다. 굵게 보이는 것은 브라우저의 기본 모양이고, 이 요소의 뜻은 '중요하다'입니다. 중요해서가 아니라 눈에 띄게만 하려 했다면 맞지 않는 요소입니다.

맞는 규칙: strong은 중요함, em은 힘주어 읽는 자리라는 뜻의 요소입니다. 굵게 · 기울인 모양은 기본 스타일일 뿐이라 CSS로 바꿀 수 있고, 모양을 바꿔도 뜻은 그대로입니다(브라우저 규칙 3).

틀린 생각: b와 strong은 같은 요소다.

결과 화면이 똑같아, 이름만 다른 같은 요소로 여기게 됩니다.

<p><b>참기름</b></p>
<p><strong>참기름</strong></p>

굵기는 둘 다 700입니다. 그래도 나무에는 b와 strong이 다른 요소로 남고, 중요하다는 뜻은 strong에만 있습니다.

맞는 규칙: 모양이 같아도 요소 이름이 다르면 뜻이 다릅니다. 중요한 글은 strong, 뜻의 무게 없이 눈길만 끌 글은 b로 씁니다.

틀린 생각: 문단 사이를 더 띄우려면 빈 문단을 끼운다.

빈 줄을 하나 넣으면 틈이 한 줄만큼 넓어질 것 같습니다.

<p>김치를 볶아요.</p>
<p>밥을 넣어요.</p>

<p>김치를 볶아요.</p>
<p></p>
<p>밥을 넣어요.</p>

빈 문단을 끼운 둘째 코드도 결과 화면이 첫째와 같습니다. 빈 p는 높이가 0이고, 그 위아래 여백이 이웃 문단의 여백과 겹쳐 틈은 그대로 16px입니다.

맞는 규칙: 빈 p로는 틈을 넓힐 수 없습니다. 문단 사이 틈은 CSS가 정하는 바깥 여백이고, 여백을 바꾸는 법은 10단원 '박스 모델'에서 배웁니다.

확인 문제

1. 예제에서 '불 조심'을 strong 대신 em으로 감쌌습니다. '불 조심'은 화면에 어떻게 그려질까요?

<p><em>불 조심</em></p>
<p>김치를 <em>먼저</em> 볶아요.</p>

• ① 굵게 그려진다
• ② 기울여 그려진다
• ③ 굵고 기울여 그려진다

2. '센 불'을 힘주어 읽게 하려고 합니다. ____ 두 자리에 같은 요소 이름을 쓰세요.

<p><____>센 불</____>에 볶아요.</p>

<p><em>센 불</em>에 볶아요.</p>

3. 동아리 공지입니다. 두 문단 가운데 '중요하다'는 뜻이 나무에 남는 글은 무엇일까요?

<p><b>사진 동아리</b> 모임</p>
<p><strong>카메라 꼭!</strong></p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. 그다음 em을 '먼저'에서 '볶아요'로 옮겨 저장 · 새로고침하고, 문장을 소리 내어 읽어 힘이 가는 곳이 어떻게 바뀌는지 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.