티스토리 뷰

<!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
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함