CSS font-style, 텍스트 스타일을 변경하는 속성

FONT-STYLE 속성이란?

font-size는 텍스트 크기, font-family는 글꼴을 선택하는 속성입니다. font-style는 주로 폰트를 이탤릭체로 변경하는데 사용하는 속성입니다. 

 

사용법

p {
  font-style: italic;
}

• font-style 뒤에 속성값을 입력합니다
  • italic : 글꼴이 기울어집니다
  • normal : 기본값입니다. 기울어지지 않은 평범한 글꼴입니다
  • oblique : 마찬가지로 글꼴을 기울입니다

 

italic과 oblique의 차이점?

italic도 글꼴을 기울이고, oblique도 같은 기능을 한다면 왜 이렇게 두개나 만들었는지 궁금해졌어요. 그래서 이번에도 검색해보았습니다

 

itatic을 사용한다는건 폰트 제작자가 명시적으로 디자인한 이탤릭체 스타일을 이용하라는 뜻입니다. 다시 말해서 폰트 자체가 이탤릭체를 지원할 경우 가능한 속성값이죠.

반면에 oblique은 폰트 제작자가 이탤릭체를 지원하지 않을 경우 사용합니다. 기울어지게 임의적으로 만들기 때문에 폰트에 따라서는 약간 어색할 수 있다고 하네요.

 

HTML에서 바로 이탤릭체를 사용하는 방법

CSS에서 정의하지 않고 바로 HTML 코드에 이탤릭체를 적용하는 방법도 있습니다. 바로 <i>와 <em> 태그입니다.

<p>이 텍스트는 <em>이탤릭체</em>로 표시됩니다.</p>
<p>이 텍스트는 <i>이탤릭체</i>로 표시됩니다.</p>

예전에는 <i> 태그를 많이 사용했지만, 요즘은 <em>을 많이 사용한다고 해요.

두 태그의 중요도가 다르게 때문인데요. <i> 태그의 경우는 단순하게 텍스트를 이탤릭체로 변경한다는 의미이고, <em>은 검색엔진에게 '이 부분은 내가 강조하기 위해서 이탤릭체를 넣은거야'라는 의미를 부여해줍니다. 시멘틱 웹구조를 만들려면 <em>을 써야겠죠?

 

그렇지만, <em>태그보다 font-style을 더 써야 하는 이유는?

일관성이 있기 때문이에요. 만약 HTML em 태그를 써서 텍스트를 스타일링 했는데 em을 빼야 하는 상황이라면? 여기저기 사용한 em 태그를 일일이 찾아서 지워줘야 합니다. 하지만 CSS를 사용하면 한 번의 수정으로 모든 요소에 적용된 스타일을 변경할 수 있어요.

 

또 하나의 이유는 역할을 구분하는거죠. HTML은 웹페이지의 구조를 정의하는데 집중하고 CSS는 스타일을 만드는데 집중하는게 각자의 역할에 충실한 겁니다. 결국 이 얘기도 일관성과 향후 유지보수성이 중요하다는 말이네요.

 

지금까지 font-style에 대해서 알아보았습니다. font와 관련된 다른 CSS 속성들도 공부한 내용 정리하면서 계속 글 올리겠습니다.