HTML에서 글자 굵게 하는 법
텍스트를 <strong>이나 <b>로 감싸세요. 둘 다 굵게 만들어요.
모양은 똑같아요. 차이는 텍스트에 대해 무엇을 말하느냐예요.
strong과 b 차이
| 태그 | 의미 | 예 |
|---|---|---|
<strong> | 중요하거나 심각하거나 긴급한 내용 | <strong>Do not</strong> share your password. |
<b> | 눈에 띄지만 특별히 중요하지는 않음 | 요약문의 키워드, 상품 이름, 기사의 첫 단어들 |
목소리를 높일 만하거나 독자가 절대 놓치면 안 되는 내용이면 <strong>을 고르세요. 이런 종류의 텍스트를 굵게 쓰는 게 시각적 관례라면 <b>를 고르세요. 둘 다 맞지 않고 스타일만 원한다면 클래스를 준 <span>과 CSS를 쓰세요.
기울임꼴: em과 i
기울임꼴 태그 쌍도 같은 생각을 따라요.
| 태그 | 의미 | 예 |
|---|---|---|
<em> | 강세를 둔 강조: 위치를 옮기면 문장의 뜻이 바뀜 | I <em>never</em> said that. |
<i> | 다른 목소리: 외국어 단어, 전문 용어, 배 이름, 속마음 | <i lang="la">et cetera</i> |
위의 첫 두 문장은 단어가 같은데도 <em>이 놓인 위치 때문에 뜻이 달라요. <i>로 다른 언어의 구절을 표시할 때는 스크린 리더가 제대로 발음하도록 lang 속성을 추가하세요.
기본적으로 기울임꼴인 태그가 몇 개 더 있어요. <cite>(작품 제목), <dfn>(정의하는 용어), <address>, <var>예요. 알맞은 곳에 쓰고 나머지는 기본 스타일에 맡기세요.
굵게와 기울임꼴 함께 쓰기
한 태그를 다른 태그 안에 넣고, 반대 순서로 닫으세요.
<strong><em>text</strong></em>(잘못된 순서로 닫음)도 표시는 되지만, 브라우저가 트리를 고쳐야 해서 요소가 쪼개질 수 있어요. 어떻게 고쳐지는지는 태그 페이지를 보세요.
CSS로 굵게, 기울임꼴
스타일이 순전히 시각적이라면(카드 제목, 가격, 라벨) 태그를 추가하는 대신 요소 자체에 CSS를 쓰세요. font-weight는 굵기를, font-style은 기울임꼴을 조절해요.
마지막 줄은 의미와 모양이 별개라는 걸 보여 줘요. <strong>은 의미를 유지하면서 CSS로 다르게 꾸며져요. 전체 굵기 범위(100~900)는 CSS font-weight 페이지에서 다뤄요.
접근성
대부분의 스크린 리더는 기본 설정에서 <strong>이나 <em>에 목소리를 바꾸지 않기 때문에, 굵게와 기울임꼴은 주로 시각적 신호예요. 사용자가 놓치면 안 되는 것(오류, 필수 입력란, 마감일)은 스타일만이 아니라 단어 자체로 분명해야 해요. 긴 글을 기울임꼴이나 굵게 쓰는 것도 피하세요. 특히 난독증이 있는 독자에게는 읽기 더 어려워요.
자주 하는 실수
- 굵은 글씨를 제목처럼 씀. 섹션 위의
<b>텍스트 한 줄은 스크린 리더에게 제목이 아니에요.<h2>나<h3>을 쓰고 스타일을 입히세요. - 스타일링에
<strong>을 씀. 텍스트에 중요한 점이 없다면<b>나 CSS를 쓰세요. - 문단 전체를 굵게 함. 강조는 드물 때 효과가 있어요. 문단이 아니라 한 구절만 굵게 하세요.
- 닫는 태그 순서가 틀림.
<b><i>x</i></b>이지, 절대<b><i>x</b></i>가 아니에요. - 옛날 태그. 오래된 튜토리얼의
<font>태그는 더 이상 쓰지 않아요. 위의 태그나font-weight를 쓰세요.
자주 묻는 질문
HTML에서 글자를 굵게 하려면 어떻게 하나요?
단어가 중요하면 <strong>으로 감싸고(<strong>Warning:</strong>), 상품 이름처럼 특별히 중요하진 않지만 눈에 띄게만 하고 싶으면 <b>로 감싸세요. 둘 다 기본적으로 굵게 표시돼요.
<strong>과 <b>는 무엇이 다른가요?
<strong>은 텍스트가 중요하거나 심각하거나 긴급하다는 뜻이에요. <b>는 요약문의 키워드처럼 중요하다는 의미 없이 주의를 끌어요. 모양은 같고 차이는 의미예요. 스크린 리더, 검색 엔진, 다른 개발자에게는 그 의미가 중요해요.
HTML에서 글자를 기울임꼴로 하려면 어떻게 하나요?
문장의 뜻을 바꾸는 강세에는 <em>을 쓰고(어느 단어에 강세를 두느냐에 따라 뜻이 달라지는 경우), 외국어 단어, 전문 용어, 배 이름, 속마음처럼 다른 목소리의 텍스트에는 <i>를 쓰세요. 둘 다 기울임꼴로 표시돼요.
글자를 굵게 하면서 기울임꼴로도 하려면 어떻게 하나요?
태그를 중첩하세요. <strong><em>text</em></strong>처럼요. 연 순서의 반대로 닫아야 해요. CSS에서는 요소 하나에 font-weight: bold와 font-style: italic을 함께 지정하세요.
CSS로 글자를 굵게 할 수도 있나요?
네. 어떤 요소에든 font-weight: bold(또는 700)를 주면 돼요. 버튼 라벨이나 표 머리글 스타일처럼 순전히 시각적인 굵기에는 CSS를, 단어 자체가 중요하거나 강조된 경우에는 HTML 태그를 쓰세요.
