[ CSS 입문 ] width, height 속성 및 길이 단위

728x90

| 개요

width 와 height 속성은 HTML과 동일하게 "가로길이, 세로길이"를 의미합니다.

값을 정의 할때는 "100px" 처럼 숫자 뒤의 단위를 같이 작성하며 단위에 따라서 값이 다르게 표기됩니다.

아래의 길이 단위는 꼭 width와 height 속성에만 작성되는것이 아니라 font 사이즈나 다른 속성들의 사이즈를 잡는데 있어서도 사용되는 단위 이므로 꼭 확인 하도록 합니다.

[ 절대 길이 단위 ]

[ 상대 길이 단위 ]

※ 글꼴에 상대적인 길이 단위

: 주로 웹문서에서 사용되며, 다양한 장치에서 크기 조절이 가능함

: root요소란 <html>요소를 말한다. 각 요소마다 크기가 다를 수 있는 em과 달리, rem은 문서 전체에 일괄적이다.

root요소의 font-size를 참조하는 rem을 제외하고 글꼴에 상대적인 길이는 부모로부터 상속받은 font-size 값을 참조함.

부모에 font-size가 없을 때는 초기값을 참조

※ 브라우저 창(viewport)에 비례한 길이

#box { width: 100px; height: 60px; }

앞단계에서도 설명했든 속성과 속성 사이는 ; (세미콜론)으로 이어서 작성이 가능하고,

제일 마지막 속성값 뒤의 ; (세미콜론)은 생략이 가능하다.

하지만 추후 유지보수와 수정 작업시 오류가 날 가능성이 있으므로

꼭 속성값을 작성 뒤엔 ; (세미콜론)을 작성하도록 합시다.

728x90