-
CSS 속성값 단위(px, rem, em)프론트엔드/CSS 2020. 9. 15. 07:00
CSS를 이용해서 주로 하게 되는 작업 중 하나는 바로 각종 글자, 이미지의 크기를 조절하는 일이다.
그럴때마다 다양한 크기 단위가 있어서 고민하게 된다.
일반적으로 word 프로그램을 쓸 때는 'pt'라는 단위 하나만 사용하면 됐다.
하지만 CSS에서 크기 단위는 'px', 'rem', 'em', '%' 등 다양한 크기 단위가 존재한다.
사실 사용하면서 이들을 구분해서 사용하기 쉽지 않다.
그래도 이를 잘 활용하면 더 이쁘게 웹페이지를 꾸밀 수 있다.
단위의 구분
다양한 크기 단위는 크게 둘로 나뉜다. 바로 절대 단위와 상대 단위다.
절대 단위의 경우 말그대로 그 단위 자체로 어떠한 크기를 나타낼지 딱 정해진 단위를 말한다.
반대로 상대 단위는 기준을 어디에 두느냐에 매번 달라지는 크기를 말한다.
사실 우리가 쓰기 익숙한 건 절대 단위다.
하지만 CSS에선 절대 단위보단 상대 단위가 더 많이 쓰인다.
왜냐면 CSS에서 설정한 스타일 값은 다양한 환경(모니터 크기, 모바일이냐 PC여부, 브라우저 차이)에서 구현되어야 하기 때문에 절대적인 값만 설정하면 특정 상황서 통일된 스타일이 반영되지 않기 때문이다.
절대 단위
상대 단위
in, cm, mm, pt, pc 등
em, ex, px, % 등
CSS의 주요 단위
1. 'px' : 픽셀
초반에 CSS를 배우면 가장 많이 사용하게 되는 단위다.
1px은 픽셀이라고 읽고 한국어로는 화소라고도 말한다.
1px은 화소 1개의 크기를 말한다.
그런데 이 1px이란것은 해상도에 따라서 상대적인 크기를 갖는다.
그래서 명확하지 않는데 대부분 브라우저는 1px을 1/96 인치의 절대단위로 인식한다.
px은 일반적으로 요소의 크기, 이미지 크기의 지정에 주로 사용된다.
2. '%' : 백분율
'%'단위는 px'처럼 어떤 기준을 가지고 있지 않는 상대적인 값이다.
대신 다른 요소들을 기준으로 '%'를 설정하면 그 기준점이 되는 요소에 맞춰 값이 변경된다.
3. em : 요소의 글꼴크기
em은 상위 요소가 가진 크기에 따라 변한다.
예시를 들면 em은 상속 관계에서 부모 요소가 가진 사이즈를 참조해서 같은 사이즈를 갖는다.
만약 부모 요소가 '16px'을 가졌다면, '1em'은 '16px', '2em'은 '32px'인 셈이다.
하지만 부모 요소의 크기가 바뀌면 'em'도 그에 따라 값이 변한다.
그래서 em을 사용할 때는 상속 관계를 잘 따져봐야 한다.
상속 관계가 복잡해지면 em의 크기가 각자 달라질 수 있기 때문이다.
<body> <style> div{ font-size:30px; } #em1{ font-size: 1em; } #em2{ font-size: 2em; } #em3{ font-size: 3em; } </style> <div> M <p id="em1"> M - 1em </p> <!-- div 태그의 'M'과 같은 사이즈(30px) --> <p id="em2"> M - 2em </p> <!-- div 태그의 'M'의 2배 사이즈(60px) --> <p id="em3"> M - 3em </p> <!-- div 태그의 'M'의 3배 사이즈(90px) --> </div> </body>4. rem : 루트 요소의 글꼴 크기
<body> <style> div{ font-size:30px; } #rem1{ font-size: 1rem; } #rem2{ font-size: 2rem; } #rem3{ font-size: 3rem; } </style> <div> M // 30픽셀로 크기 단위 설정 <p id="rem1"> M - 1rem </p> <!-- 글자크기 16px --> <p id="rem2"> M - 2rem </p> <!-- 글자크기 32px --> <p id="rem3"> M - 3rem </p> <!-- 글자크기 48px --> </div> </body>'rem'도 'em'과 마찬가지로 상대적인 크기다. 그리고 상위 요소의 영향을 받는다.
그런데 이때 'em'처럼 바로 위의 부모 요소를 참조하는 것이 아니다.
'rem'은 최상위 요소인 <html>태그의 영향을 받는다.
'rem'은 'em'과 같은 상위 요소의 영향을 받지만, 자잘한 부모 상속이 아닌 <html>의 영향을 받는다.
참고로 <HTML>의 기본 폰트 사이즈는 '16px'이다.
즉 디폴트 상황에서 'rem'은 기본 '16px'인 것이다.
'프론트엔드 > CSS' 카테고리의 다른 글
애니메이션(Animation) (0) 2020.09.16 트랜지션 (transition) (0) 2020.09.16 reset CSS (0) 2020.09.15 플렉스 박스: 'align-content' (0) 2020.08.27 플렉스 박스: 'flex-wrap ' (0) 2020.08.27