CSS / Reference / font-style
개요
font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다.
- 기본값 : normal
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 1
문법
font-style: normal | italic | oblique | initial | inherit
- normal : 보통 모양입니다.
- italic : 기울임꼴입니다.
- oblique : 기울임꼴입니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 줄이 oblique입니다.
하지만, 대부분의 글꼴이 italic과 oblique의 모양이 같습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p { font-family: "Segoe UI"; }
.no { font-style: normal; }
.it { font-style: italic; }
.ob { font-style: oblique; }
</style>
</head>
<body>
<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>
</body>
</html>
font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3
box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow 속성을 사용합니다.
CSS / Reference / background-repeat
background-repeat는 배경 이미지의 반복 여부와 반복 방향을 정하는 속성입니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1
overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2
word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3
opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3
CSS / Reference / font-variant
font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / background-size
background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3
CSS / Reference / border-width
border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width