글자 모양 바꾸는 방법 - font-style

font-style은 글자 모양을 정하는 속성으로, 글자를 이탤릭채로 표현할지 여부를 결정합니다.
1 min read

font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다.

 

기본형

font-style : normal | italic | oblique
  • normal : 보통 모양입니다.
  • italic : 기울임꼴입니다.
  • oblique : 기울임꼴입니다.

 

italic 은 기울어진 글꼴이 처음부터 디자인 되어 있는 반면, oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐입니다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹에소는 주로 italic 을 사용합니다.

 

예제

<p class="no">Normal - Lorem ipsum dolor sit amet.</p>
<p class="it">Italic - Lorem ipsum dolor sit amet.</p>
<p class="ob">Oblique - Lorem ipsum dolor sit amet.</p>
.no {
  font-style: normal;
}
.it {
  font-style: italic;
}
.ob {
  font-style: oblique;
}

 

기타 CSS 참조

You may like these posts

  • text-transform 영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.   기본형 text-transform : none | capita…
  • font-weight font-weight 속성으로 글자의 굵기를 지정합니다.   기본형 font-weight : normal | bold | bolder | lighter | number normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 …
  • text-decoration text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다.   기본형 text-decoration : none | line-through | overline | underline none : 선을 만들지 않습니다. line-throu…
  • font-variant font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.   기본형 font-variant : normal | small-caps normal : 일반적인…
  • 텍스트 자간을 조절해보십시오. 강조하고 싶은 글자나 큰 글자들은 글자 사이 간격을 조절해 여유있게 표시하면 읽기 편합니다. 텍스트 간격 조절하기 letter-spacing 속성은 낱 글자 사이의 간격을 조절하고, word-spacing 속성은 단어와 단어 사이의 간격을 조절합니다.  …
  • 텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 할 수 있습니다.   text-shadow text-shadow는 글자에 그림자 효과를 주어 텍스트를 좀 더 입체적으로 보이게…

Post a Comment