티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
h1 {
background: silver;
}
.font {
font: bold normal small-caps 18px/1.6 "돋움", Dotum, sans-serif;
background: aqua;
}
</style>
</head>
<body>
<h1>font를 이용한 단축 표현</h1>
<p>font 속성을 이용하면 font-family, font-size, line-height, font-weight,
font-style, font-variant 속성을 한 번에 선언할 수 있습니다. 단축 표기가 가능한 속성에는 margin,
padding, border 등이 있습니다.</p>
<p class="font">font를 이용한 단축 표현 시 주의해야 할 점은 선언 순서를 지켜야 한다는 것입니다.
선언의 1순위는 font-weight, font-style, font-variant 속성이며, 2순위는 font-size
3순위는 line-height 속성입니다. 이때 line-height는 폰트 관련 속성이 아닌 텍스트 관련 속성이지만,
font 속성으로 한 번에 선언이 가능합니다. 이 때 line-height 앞에 슬래시(/)를 붙여주어야 합니다. 마지막으로
선언해야 할 속성은 font-family 속성으로 font-size와 함께 반드시 지정해야 하는 필수 속성입니다.</p>
</body>
</html>
font를 이용한 단축 표현
font 속성을 이용하면 font-family, font-size, line-height, font-weight, font-style, font-variant 속성을 한 번에 선언할 수 있습니다. 단축 표기가 가능한 속성에는 margin, padding, border 등이 있습니다.
font를 이용한 단축 표현 시 주의해야 할 점은 선언 순서를 지켜야 한다는 것입니다. 선언의 1순위는 font-weight, font-style, font-variant 속성이며, 2순위는 font-size 3순위는 line-height 속성입니다. 이때 line-height는 폰트 관련 속성이 아닌 텍스트 관련 속성이지만, font 속성으로 한 번에 선언이 가능합니다. 이 때 line-height 앞에 슬래시(/)를 붙여주어야 합니다. 마지막으로 선언해야 할 속성은 font-family 속성으로 font-size와 함께 반드시 지정해야 하는 필수 속성입니다.
'java,web study > 5주차 (7월 29일~8월 4일)' 카테고리의 다른 글
| Text Shadow (0) | 2013.08.01 |
|---|---|
| css로 문자 정렬하기 (0) | 2013.08.01 |
| z-index (0) | 2013.08.01 |
| '>' 식별자 사용(자손) 테이블 속성 스타일 바꾸기 (0) | 2013.07.31 |
| 스타일로 입력폼 만들기 (0) | 2013.07.31 |