고정 헤더 영역
상세 컨텐츠
본문
반응형
font-weight 속성 - 글자 굵기 지정하기
- 글자 굵기를 조절할 수 있다.
<style>
p {
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
}
</style>속성
- normal : 일반적인 형태로 기본 값이다.
- bold | lighter | bolder : 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게 나타낸다.
- 100 ~ 900 사이의 수치 : 400은 normal, 700은 bold에 해당하고 세밀하게 굵기를 조절할 수 있다.
font-variant 속성 - 작은 대문자로 표시하기
- 소문자를 작은 대문자로 표시할 때 사용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.variant {
font-variant: small-caps;
font-weight: bold;
}
<style>
</head>
<body>
<p><span class="variant">사과(Apple)</span> / 사과(Apple)</p>
<p><span class="variant">바나나(Banana)</span> / 바나나(Banana)</p>
<p><span class="variant">체리(Cherry)</span> / 체리(Cherry)</p>
</body>
</html>
font-style 속성 - 글자 스타일 지정하기
- 글자의 스타일을 변경할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h2>애국가</h2>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</body>
</html>속성
- normal : 일반적인 형태로 표시
- italic | oblique : 이탤릭체로 표시한다.
font 속성 - 글자 속성을 한꺼번에 묶어 표현하기
- font 속성을 이용하면 font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한꺼번에 묶어 약식으로 표현할 수 있다.
<style>
p {
font: <font-style><font-variant><font-weight><font-size/line-height><font-famliy> | caption | icon | menu | message-box | small-caption | status-bar
}
</style>속성
- font-* : font로 시작하는 글꼴 관련 속성을 한꺼번에 나열한다.
- caption : 캡션에 어울리는 글꼴 스타일로 표시한다.
- icon : 아이콘에 어울리는 글꼴 스타일로 표시한다.
- menu : 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다.
- message-box : 대화상자에 어울리는 글꼴 스타일로 표시한다.
- small-caption : 작은 캡션에 어울리는 글꼴 스타일로 표시한다.
- status-bar : 상태 표시줄에 어울리는 글꼴 스타일로 표시한다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p style="font:icon;">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
<p style="font:menu;">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
<p style="font:message-box;">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
<p style="font:small-caption;">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
<p style=font:16px/25px "맑은 고딕">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
<p style="font:bold italic 12pt">동해물과 백두산이 마르고 닳도록. 하느님이 보우하사 우리나라 만세</p>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 문단 스타일 (1) (0) | 2021.04.20 |
|---|---|
| [CSS 기초] 텍스트 스타일 (0) | 2021.04.19 |
| [CSS 기초] 글꼴 관련 스타일 (1) (0) | 2021.04.15 |
| [CSS 기초] 주요 선택자 (0) | 2021.04.13 |
| [CSS 기초] 스타일과 스타일 시트 (0) | 2021.04.12 |
댓글 영역