CSS font-weight 텍스트 폰트 두껍게 그리고 보통 (with 웹아이콘)

이번에는 정말 간단한 CSS 스타일을 알아봅시다. HTML에서 특정 단어를 두껍게 만들기 위한 태그(요소)로는 <b>태그를 사용합니다. b는 Bold의 약자죠. 두껍게 처리하고자하는 단어를 <b>태그로 감싸주면 해당 텍스트만 두껍게 표시가 됩니다. 이것을 CSS에서도 얼마든지 적용시킬 수 있습니다.

 

두껍게

See the Pen CSS font-weight 두껍게 / 보통 by rgy0409 (@rgy0409) on CodePen.

위의 예시를 살펴보시기 바랍니다. <b>태그는 설명을 했으니 더 이상 언급을 하지 않고 바로 다음에 보이는 <span>태그를 살펴봅시다. <span>태그는 인라인 요소로 주로 문장의 특정 단어를 강조하고자 할 때 간편하게 사용할 수 있는 대표 HTML 요소입니다. CSS에서 span 태그를 선택 후 다음의 CSS 스타일을 입력해 주었습니다.

 

font-weight: bold;

 

따라서 <span>태그로 감싸여있는 친절한효자손이라는 단어만 두껍게 표현이 됩니다.

 

보통

이번에는 기본적으로 두꺼운 상태로 표시가 되는 태그의 CSS 속성을 반대로 보통 상태의 두깨로 변경해 봅니다. 두껍게 처리되는 태그로는 대표적으로 <h1~6> 태그가 있습니다. 따라서 위의 예시에 나와있는 <h3>의 첫번째 문장은 아무런 CSS 옵션이 없기에 원래의 속성대로 H3에 의해 두껍게 텍스트가 처리됩니다. 반면 두번째 <h3>태그는 텍스트가 보통 상태입니다. CSS에서 다음의 스타일을 추가했기 때문입니다.

 

font-weight: normal;

 

weight라는 단어의 뜻은 무게라는 의미를 가지고 있습니다. 즉 폰트의 무게! 두껍게와 얇게로 해석할 수 있습니다.

 

웹 아이콘

font-weight는 웹 아이콘에도 영향을 줍니다. font 속성 변화를 줄 수 있는 모든 요소에 영향을 줄 수 있습니다. 단 어떤 웹 아이콘이냐에 따라 효과가 확실할수도, 미미할수도 있습니다. 위의 예시를 살펴보시면 두 개의 애플 로고가 있는데 오른쪽만 아주 미세하게 살짝 더 커져있는 상태입니다. bold 효과 때문입니다. 하지만 큰 차이는 없으며 오히려 선명도가 떨어지는 단점이 발생할 수 있으니 차라리 이럴때는 font-weight 보다는 font-size를 활용해 물리적으로 크기를 직접 키우는게 훨씬 좋습니다. 끝.