비전공자를 위한 HTML/CSS 강의 공부 기록입니다.
1. 절대 길이
절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않는다.
1) px
1px = 1/96th of 1 inch
절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장한다.
2) pt
1pt = 1/72 of 1 inch
컴퓨터가 없던 시절부터 있던 단위이다.
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다.
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들어 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보인다.
2. 상대 길이
상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.
%: 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
em: font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
rem: root의 font-size를 기준으로 값을 환산합니다.
vw: viewport의 width값을 기준으로 1%의 값으로 계산됩니다.
※ em과 rem의 차이
em과 rem은 모두 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미하는데 그 기준이 되는 값에 차이가 있다.
- em의 기준이 되는 값: 현재 스타일 규칙이 적용된 요소의 font-size
- 따로 font-size 값이 지정되지 않았다면 상속받은 값을 기준으로 한다. - rem의 기준이 되는 값: 최상위 요소(보통은 html 태그)에서 지정된 font-size
html {font-size: 16px; }
body { font-size: 2em; }
div.container { font-size: 2em; }
div.content1 { font-size: 2rem; }
div.content2 { font-size: 2em; }위의 코드에서 content1의 font-size는 32px(16*2) 이고 contant2의 font-size는 128px(16*2*2*2)이다.
