[HTML/CSS] CSS의 Font속성
[HTML/CSS] CSS의 Font속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
Font속성은 글꼴을 설정하기 위해 사용합니다. Font는 다음과 같은 효과를 부여합니다. * Font-style * Font-variant * Font-weight * Font-size * Font-family |
|
|
|
|
Font-style
|
태그 |
속성 |
속성값 |
비고 |
|
style |
font-style |
nomal |
보통 모양 (기본값) |
|
italic |
이탤릭체, 필기체 기울임 | ||
|
oblique |
기울임 | ||
| initial | 기본값으로 설정 | ||
| inherit | 부모 요소의 속성값을 이어감 |
|
이탤릭체, 기울임 효과를 지정합니다. |
Font-variant
|
태그 |
속성 |
속성값 |
비고 |
|
style |
font-variant |
nomal |
소문자를 소문자로 표기 (기본값) |
|
small-caps |
소문자를 작은 대문자로 표기 | ||
|
initial |
기본값으로 설정 | ||
| inherit | 부모 요소의 속성값을 이어감 |
|
소문자를 작은 대문자로 바꿀 수 있습니다. (한글에서는 필요가 없어요.) |
Font-weight
|
태그 |
속성 |
속성값 |
비고 |
|
style |
font-weight |
nomal |
보통 굵기, number 400과 같음 (기본값) |
|
bold |
볼드체, 굵은 글씨 number 700과 같음 | ||
|
bolder |
부모 요소의 값보다 굵은 글씨 | ||
|
lighter |
부모 요소의 값보다 얇은 글씨 | ||
|
number값 |
100, 200 ~ 800, 900 | ||
| initial |
기본값으로 설정 | ||
| inherit | 부모 요소의 속성값을 이어감 |
|
볼드체, 글자의 굵기 효과를 지정합니다. |
Font-size
|
태그 |
속성 |
속성값 |
비고 |
|
style |
Font-size |
medium |
xx-small, x-small, small, large, x-large, xx-large |
|
smaller |
부모 요소의 값보다 작은 글씨 | ||
|
larger |
부모 요소의 값보다 큰 글씨 | ||
| 크기값 |
px, %, em 등 | ||
| initial | 기본값으로 설정 | ||
| inherit | 부모 요소의 속성값을 이어감 |
|
글자의 크기를 지정합니다. medium을 기본값으로 하며 xx-small, x-large등의 상대크기를 지정 할수도 있어요. |
Font-family
|
태그 |
속성 |
속성값 |
비고 |
|
style |
Font-family |
글꼴, 글꼴 유형 |
글꼴 이름이나 글꼴 유형을 표기함 |
|
initial |
기본값으로 설정 | ||
|
tinherit |
부모 요소의 속성값을 이어감 |
|
글꼴은 웹브라우저의 기본 글꼴을 기본값으로 하며 글꼴 이름에 띄어쓰기가 있으면 [ ' ]작은 따옴표 혹은 [ " ]큰 따옴표로 감싸줍니다. 여러 개의 글꼴을 설정 할때는 [ , ]쉼표로 구분 하며 마지막에는 "글꼴"보다 "글꼴 유형"을 작성해주는것이 호환성 측면에서 더욱 유리합니다. 글꼴 유형은 5개가 있으며 * serif : 명조계열의 글꼴, 삐침이 있음 * sans-serif : 굵기가 일정한 고딕계열의 글꼴, 삐침이 없음 * monospace : 폭과 간격이 일정한 글꼴 * cursive : 필기계열의 글꼴 * fantasy : 화려한 글꼴 예) p {font-family: "Malgun Gothic", "Times New Roman", serif;} "Malgun Gothic"글꼴을 적용하되 글꼴이 존재하지 않으면 "Times New Roman"글꼴을 적용 하고 그마저도 없으면 "serif"글꼴 유형을 선택합니다. 한글과 영어의 글꼴을 다르게 설정하기앞에 있는 글꼴을 우선 적용하기 때문에 한글이 없는 글꼴을 먼저 작성 해주고, 한글 글꼴을 뒤에 작성해주면 한글과 영어가 다르게 적용됩니다. 예) p {font-family: "Times New Roman", "Malgun Gothic", serif;} |
Font
|
여러가지 효과를 동시에 부여하도록 "Font"만 사용하여 한줄로 한번에 사용할수도 있습니다. 한번에 사용하려면 "style→variant→weight→size/line-height→family" 순서로 작성해야 속성마다 띄어쓰기로 구분 합니다. (부여하지 않는 속성은 생략 하면 되지만 이중 size와 family는 필수로 작성해야 합니다. 또한 한줄로 작성 할때는 size에 [ / ]를 넣어 line-height(줄간격)을 함께 표기할 수 있습니다.) 예) p {font:italic small-caps bold 30px/15px serif;} |
< 연습하기 >
