HTML, CSS
CSS 단위는 왜 이렇게 많은걸까...
lazy_cat
2022. 3. 2. 16:01
CSS 길이 단위는 생각보다 많다..!
그래서 실제로 뭘 써야할지 잘 모르겠다ㅜ
우선 고정은 px, 반응형에 따라 사이즈 변화가 필요할 경우 %, em을 쓰고 있긴한데
(이유도 모른체 폰트 사이즈도 px로 주는 나란 사람..ㅎ)
그외 다양한 단위들은 왜 있는 것이며...
어떤 경우에 써야하는지 문득 궁금해져서 서치 후 정리해본다.
CSS 길이 단위
1. 절대 단위
| 단위 | 사이즈 (px 기준 반올림 적용) | 설명 |
| cm | 37.8px | |
| mm | 3.8px | |
| in | 96px | |
| px | 1px | - 모니터에 따라 상대적인 크기를 가짐 - PC버전 코딩에서 주로 사용 |
| pt | 1.3px | - 인쇄용 단위 - 주로 문서에서 많이 사용하는 단위 - 크로스 브라우저 결과가 매우 다를 수 있어 웹에서는 사용하지 않는 편 |
| pc | 15.6px |
2. 상대 단위
| 단위 | 사이즈 (px 기준 반올림 적용) | 설명 |
| em | 16px | - 부모 요소의 사이즈에 대한 상대값 - 따라서 작업시 상속과 관련하여 복잡한 상황이 생기는 경우가 있을 수 있음 - 부모 요소의 크기가 정해져 있이 않을 경우 16px로 계산 |
| rem | 16px | - root em - em과 성질이 같으나 최상위 root, html을 기준으로 한다는 차이가 있음 em과 rem 중 뭘 써야 할까? |
| % | - | - 부모 요소를 기준으로 한 비율 사이즈 |
3. Viewport 단위
| 단위 | 사이즈 | 설명 |
| vh | 전체 높이 1200px의 경우 1vh = 12px |
- viewport height - 뷰포트 높이값의 1/100 = 1vh - 세로 기준 화면 가득 차게할 경우 height: 100vh; |
| vw | 전체 넓이 960px의 경우 1vh = 9.6px |
- viewport width - 뷰포트 넓이값의 1/100 = 1vw - 가로 기준 화면 가득 차게할 경우 width: 100vw; |
| vmin | 브라우저 크기가 1200x960px의 경우 1vmin = 9.6px |
- viewport minimum - 웹 브라우저의 넓이와 높이 중 더 작은 값을 기준으로 함 |
| vmax | 브라우저 크기가 1200x960px의 경우 1vmax = 12px |
- viewport maximum - 웹 브라우저의 넓이와 높이 중 더 높은 값을 기준으로 함 |
*Viewport : 전체 웹 페이지 가운데 브라우저 창에 보이는 영역.
뷰포트 단위가 있는 것은 이번에 정리하면서 알게 된 사실!
모바일을 많이 사용하기 때문에 많이 쓰일 것 같은 단위라고 생각된다.
앞으로 사이즈 규격을 정할 때 각 단위들의 성격을 고려해서
어떤 식으로 해야 더 효율적일지 생각해보면서 작업해봐야겠다 :)