실제로 CSS로 뭔가를 하기전에 기본부터 다지고 가는게 좋겠죠?
그래서 이번에는 각종 속성값에 쓰이는 단위를 한번 알아보도록 하겠습니다.
CSS는 절대값을 나타내는 inches, centimeters, points 등등 뿐 아니라 상대값을 나타내는 percentages나 em 단위를 지원합니다. 이런 단위들은 자주 쓰이기 때문에 꼭 짚고 넘어가시는 것이 좋습니다.
다음은 단위와 단위에 대한 설명 및 사용 예제입니다.
| Unit | Description | Example |
|---|---|---|
| % | 퍼센트 | p {font-size: 16pt; line-height: 125%;} |
| cm | 센티미터 | div {margin-bottom: 2cm;} |
| em | em 단위는 폰트의 사이즈와 동일하기 때문에 폰트사이즈를 12pt로 설정하면 각 em 단위는 12pt가 됩니다. 따라서 2em은 24pt가 되겠죠 | p {letter-spacing: 7em;} |
| ex | 이 값은 폰트의 x-높이값에 상대적인 값입니다. x-높이값은 해당 폰트의 소문자x값의 높이입니다. | p {font-size: 24pt; line-height: 3ex;} |
| in | 인치 | p {word-spacing: .15in;} |
| mm | 밀리미터 | p {word-spacing: 15mm;} |
| pc | picas라는 단위로 1 pica는 12 pt와 동일합니다; 따라서, 1인치에는 6 picas 가 존재합니다. | p {font-size: 20pc;} |
| pt | 포인트 단위로 1 pt는 72분의 1 인치입니다. | body {font-size: 18pt;} |
| px | 스크린 픽셀 단위 | p {padding: 25px;} |
example에 있는 내용을 css 파일에 작성해서 꼭!! 테스트해보세요~
Reference : http://www.tutorialspoint.com/css/css_measurement_units.htm
| [CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 5. Colors ( 색깔 ) (0) | 2016.06.12 |
| [CSS] 3. HTML에 CSS링크 - Associating Styles with HTML (0) | 2016.06.12 |
| [CSS] 2. Syntax ( 문법, 사용법 ) (0) | 2016.06.12 |
| [CSS] 1. CSS란 ? (0) | 2016.06.11 |