처음 개발을 접하면 css의 다양한 단위는 항상 개발에 통일성을 해치고 헷갈리는 요소입니다
따라서 처음 개발을 시작할때에 알아가면 좋을만한 css 크기 단위를 쉬운 내용으로 정리해 보았습니다
1. px (픽셀)
- 정의 : 디스플레이를 구성하는 최소단위 우리말로 화소라고도 함
- 우리가 보는 컴퓨터는 이 작은 픽셀 점으로 구성된당
픽셀 수가 많을 수록 고해상도라고 합니다
하지만 이 픽셀은 일반적인 물리적 크기로 나타내서는 안됩니다
50px 짜리 아이콘을 만들었다고 한들 몇 cm 인지 몇 mm 인지는 알 수 없습니다 .
이건 PPI에 따라 달라지기 때문입니다 . 그렇다면 ppi 는 무엇일까요
<div style="width: 100px; height: 100px; background-color: cadetblue"></div>
PPI란
- pixel per inch로 1인치당 몇개의 픽셀로 이루어져 있는지를 나타내는 단위입니다
- 10 ppi 기준으로 1인치(2.54cm)에 10개의 픽셀 있고 10X10 100개의 픽셀로 이루어 진다는 뜻입니다
웹 , 모바일은 72 ppi 기준
저 해상도 사진을 확대하면 안티앨리어싱이라는 계단 현상이 발생하는 경우를 자주 보곤 합니다.
이러한 이유가 비트맵기반이기 때문이다 . 채워야할 픽셀의 개수가 부족해 지므로 평균값으로 표현해 계단 현상이 발생하는 것입니다.
→ SVG 를 사용하는이유
- svg는 벡터 기반이기 때문에 점과 선으로 이루어져 계단 현상이 발생하지 않습니다
DPI
- dots per inch 의 약자 입니다
- 프린터 성능에 사용되며 10dpi 기준 1인치(2.54cm) 기준 10 X 10 100개의 점으로 이루어진다는 뜻입니다
- ppi와 비슷한 논리지만 같지는 않습니다 → 인쇄용은 CMYK를 사용하기에
DP (Device Independent Pixel)
- 안드로이드 사이즈 단위
- PPI가 다른 디바이스에서 PX로 표현하면 밀도가 클수록 작게 보입니다
- 화소와 밀도에 따라 변하지 않는 DP를 사용합니다
- 픽셀과 상관없이 어떤 디바이스든 같은 비율을 유지한다는 뜻입니다
PT
- IOS 사이즈 단위입니다
- DP 와 유사하지만 다릅니다
- 1pt 는 물리적 크기입니다
- 애플 기기에서는 인치와 pt 사이 상수 변환이 없습니다 즉 1pt는 디바이스 별로 다릅니다
% (퍼센트)
- 주로 상대적인 크기를 설정할때 사용합니다
- 부모의 크기의 퍼센트 만큼을 차지하게 됩니다
- 이때 부모의 크기가 설정 되어있지 않다면 원하는 대로 되지 않습니다 . → 부모의 값 width와 height를 선언하지 않은 경우
<div style="width: 50%; height: 100px; background-color: cadetblue"></div>
상대 주소기 때문에 부모 태그 기준으로 동적으로 값이 바뀌는 것을 볼 수 있습니다
em , rem
em 과 rem은 상대적인 값입니다
부모요소의 font-size의 영향을 받아서 값이 결정되게 됩니다
예를 들어, font-size : 16px 경우, 상대 단위는 브라우저에 의해 다음같이 결정됩니다
0.5em = 16 px x 0.5 = 8px1em = 16 px x 1 = 16px
여기서 font-size를 20px로 늘릴 경우, 상대 단위도 다음과 같이 비례해서 증가되게 됩니다.
0.5em = 20 px x 0.5 = 10px
반대로 font-size를 10px로 줄일 경우, 상대 단위도 다음과 같이 비례해서 감소되게 됩니다.
0.5em = 10 px x 0.5 = 5px
위와 font-size 값에 증감에 비례해서 유동적으로 길이가 결정되고 싶은 속성에 em이나 rem 단위를 사용해서 길이 지정을 해줄 수 있습니다.
<body>
<p>123123</p>
</body>- 위 p태그의 font-size는 16px이 아닙니다 1em입니다
- 브라우저 기본 픽셀은 16px
- TIP : html의 기본 픽셀을 10 px로 설정하고 1.6rem으로 폰트사이즈를 설정하면 기본 픽셀 사이즈 설정이 가능하다
- rem과 em의 차이는 r(oot)em 이고 em 은 부모의 폰트 사이즈의 값을 상대적으로 가져간다
- 이때 rem에서 root를 body가 아니라 html 기준으로 한다
vw , vh
vw
- 100vw는 전체 화면 기준
- 스크린 크기 기준으로 꽉 채워준다
vh
- 100vh 전체 화면 기준
- 스크린 기준 꽉 채워 줍니다
<div style="width: 50vw; height: 50vh; background-color: cadetblue"></div>
vw와 vh 는 스크린 크기 기준
%는 부모 요소 기준 다르다 !!
%랑 주요 차이점을 생각해야함
- %는 overflow가 가능합니다 즉 화면을 넘어가거나 스크린 보다 큰 값을 가져갈 수 있습니다
- vw, vh 는 현재 화면의 스크린 크기를 기준으로 가져갑니다
vmin 과 vmax
- vmin 은 가로와 세로중 더 짧은것을 기준으로
- vmax는 더 긴것을 기준으로 값을 가져간다
<div style="width: 50vmax; height: 50vmin; background-color: cadetblue"></div>