CSS 데이터 형식

   

데이터 형식

데이터 : 스타일시트에서 사용되는 프로퍼티의 값

   

정수와 실수

10진법으로 표기, 양과 음 지정, 단위와 함께 사용시 값 범위 제한

   

길이

글꼴 및 이미지 크기 조절. 상대 단위와 절대 단위로 분류

h1 { margin: 0.5em; } /* em, 요소의 글꼴(font) 높이 */ h1 { margin: 1ex; } /* x-height, 글자 'x'의 높이 */ p { font-size: 12px; } /* pixels, 화면에 상대적으로 */

   

상대 단위 : em(글꼴의 크기), ex(글꼴의 x너비), px(픽셀)

h1 { margin: 0.5in; } /* 인치(inche), 1in = 2.54cm */ h2 { line-height: 3cm; } /* cm, centimeter */ h3 { word-spacing: 4mm; } /* mm, millimeter */ h4 { font-size: 12pt; } /* 포인트(point), 1pt = 1/72 in */ h4 { font-size: 1pc; } /* 피카(pica), 1pc = 12pt */

   

in(인치), cm(센티미터), mm(밀리미터), pt(포인트:1/72인치), pc(피카:12인치)

   

백분율 단위(percentage unit)

선택적 기호( '+'또는'-', 기본값은'+'), 수치(소수점 있거나 없거나), '단위 : '%'

p { line-height: 120%; } /* 요소의 글꼴 크기('font-size')의 120% */

   

색상(color)

키워드(keyword) 또는 RGB 값 사용.

body {color: black; background: white; } h1 { color: maroon; } h2 { color: olive; }

em { color: #f00; } /* #rgb */ em { color: #ff0000; } /* #rrggbb */ em { color: rgb(255,0,0); } /* 정수 범위: 0 - 255 */ em { color: rgb(100%, 0%, 0%); } /* 유동(float) 범위: 0.0% - 100.0% */

em { color: rgb(255,0,0); } /* 정수 범위: 0 - 255 */ em { color: rgb(300,0,0); } /* 255로 잘림 */ em { color: rgb(110%, 0%, 0%); } /* 100%로 잘림 */

   

색상 키워드

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,

silver, teal, white, yellow