데이터 형식 - 정수와 실수, 길이, 백분율 단위(percentage unit), 색상(color)

 

 

데이터 형식

데이터	스타일시트에서 사용되는 프로퍼티의 값
데이터 형식	테이터를 표현하는 방식

 

·       정수와 실수

·       길이

·       백분율 단위(percentage unit)

·       색상(color)

 

 

 

정수와 실수

·       10진법으로 표기,

·       양과 음 지정,

·       단위와 함께 사용시 해당 단위로 표현할 수 있는 값 범위로 제한되어집니다.

 

 

 

길이

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

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

 

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

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

 

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

 

 

백분율 단위(percentage unit)

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

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

 

 

 

색상(color)

키워드(keyword) 또는 RGB 값을 사용합니다.

 

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

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

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

 

 

색상 키워드

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

silver, teal, white, yellow