[TIL] CSS 속성의 정의 및 syntax 확인 법, 속성의 단위

이지예·2022년 5월 30일

CSS

목록 보기

4/9

CSS 속성의 정의, syntax를 확인하는 방법

w3schools

실무자들이 가장 많이 참고하는 사이트
CSS 카테고리에 들어가면 속성들의 이름이 적혀있고,
font-size라는 속성을 눌러보면 정의와 사용법에 대한 내용이 있다.
기본값, 부모의 값을 상속 받을 수 있는지 여부,
애니메이션 가능 여부, 사용 가능한 CSS 버전,syntax가 있다.

버전은 굉장히 중요하다. CSS 버전에 따라 브라우저 지원율도 달라지기 때문이다.
그래서 작업을 할 때는 프로젝트의 브라우저 지원 범위를 확인해야 하고, 본인이 사용하는 CSS가 해당 브라우저들을 지원하는 범위에 있는지 CSS 버전을 파악하고 있는 것도 중요하다.

syntax는 문법을 나타낸다. 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있다.

그리고 대부분의 속성들이 가장 마지막 syntax에 initial이나 inherit이라는 값으로 선언할 수 있다는 것을 확인할 수 있다.
initial로 선언하는 경우 initial은 초깃값 즉, 속성의 기본값으로 초기화된다고 볼 수 있다.
인터넷 익스플로러에서는 지원하지 않는다.

inherit은 부모 요소의 해당 속성의 값을 상속하겠다는 의미이다.
속성의 정의에서 부모의 값을 상속 받을 수 있는지 여부가 yes라고 되어있을 때만 적용이 가능하다.

MDN

외국 사이트이지만, 한국 개발자들이 번역에 참여하여 한글로 제공되는 페이지도 있다.
기술 목록 - CSS - 완전한 참고서 - font-size
이 사이트도 마찬가리로 정의와 스펙을 요약해서 보여주고 있다.
MDN 사이트의 syntax 표기는 웹 표준을 정의하는 기관인 w3c의 syntax와 유사하게 제공 하고 있다.

w3schools는 속성의 간단한 스펙과 예제를 확인할 때, MDN은 개발적 버그나 추가적인 스펙을 확인할 때 이용할 수 있다.

속성 - 단위

CSS에서 길이를 표현하는 단위는 여러 가지가 있다.
그중 실무에서 가장 많이 접할 수 있는 절대 길이인 px(픽셀), pt(포인트) 그리고 상대길이인 %(퍼센트)와 em에 대해 살펴보자.

<절대 길이>

px

pixel의 약자로, 웹에서 가장 많이 사용되는 단위이다.
1px는 화면에 한 개의 점과 같다.
픽셀은 절대 길이라고는 하지만 컴퓨터 화면 등, 장치의 해상도에 따라 상대적인 단위이다.
다시 말하자면 픽셀은 상대 단위지만, 화면에서 고정된 크기 값을 가지고 있기 때문에 절대 길이라고 이해하면 된다.
픽셀은 웹 개발을 할 때 여러 환경에서도 디자인을 동일하게 표현하고, 브라우저 호환성 보장에도 유리한 장점을 가지고 있기 때문에 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있다.

pt(포인트)

컴퓨터가 없던 시절부터 있었던 단위로, 인쇄물이나 워드프로세서 프로그램에서 사용되어온 가장 작은 표준 인쇄 단위이다.
웹 화면에 인쇄용 문서를 위한 스타일을 정의할 때 유용하게 사용 가능하다.
사용하는 기기의 해상도에 따라 포인트의 차이가 있는데, Window에서는 9pt=12px로 보이고, Mac에서는 9pt=9px로 보인다.
그래서 포인트는 w3c에서도 웹 개발 시 권장하는 단위는 아니다.

<상대 길이>

%(퍼센트)

기본 글꼴 크기에 대해서 상대적인 값을 가진다.
상위 요소에 정의된 픽셀을 퍼센트로 늘리고 줄이고 할 수 있다.
예를 들어 폰트 사이즈가 100%이고, 상위 요소가 16px일 때 폰트 크기는 16px이 된다.
예제)

<div>
    <p class="px">단위 16px로 선언된 텍스트</p>
    <p class="pt">단위 12pt로 선언된 텍스트</p>
    <p class="percent">단위 100%로 선언된 텍스트</p>
    <p class="em">단위 1em로 선언된 텍스트</p>
</div>

div {font-size:16px}
.px{font-size:16px}
.pt{font-size:12pt}
.percent{font-size:100%}
.em{font-size:1em}

<p>의 상위인 <div>가 16px를 갖고 있기 때문에 percent font-size를 100%로 했을 때 이 픽셀은 <div>와 동일한 16px로 노출된다.
퍼센트 값을 200%로 수정하고 브라우저 화면에서 Ctrl+Shift+I를 눌러서 개발자 툴에 들어가보자.
실제로 곱하기 2인 32px로 나오는 것을 볼 수 있다.

em

선언한 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위이다.
1em은 현재 지정된 폰트 크기와 같고, 2em은 현재 폰트 크기의 두 배, 즉 200%를 의미한다.
em의 경우 <div>가 16px이고 폰트 사이즈는 상속이 된다.
폰트 사이즈를 기준으로 1em으로 설정해놓으면 상위요소의 1배 값인 1px로 선언된다.
2em으로 바꾸면 200%한 것과 동일한 크기인 32px로 computed된다.
만약 class가 em인 글자를 20px만큼 키워서 보고 싶다면
20/16=1.25em을 적으면 된다.
em은 소수점 3자리까지 선언 가능하다.