반응형
이번 포스팅에서는 CSS3에서 사용되는 단위인 px, rem, em의 차이에 대하여 공부를 해보고자 한다.
이 단위들은 웹 페이지의 요소들의 크기를 지정하는 데 사용된다.
각 단위에 대한 설명
px(픽셀)
- px은 "픽셀"을 나타내며, 고정된 크기를 나타낸다.
- 예를 들어, font-size: 16px;는 해당 텍스트의 글꼴 크기를 16픽셀로 설정한다.
- 픽셀 단위로 크기를 지정하므로, 장치의 해상도에 따라 크기가 변하지 않는다.
- 고정 크기로 웹 페이지를 디자인하고자 할 때 주로 사용된다.
rem (루트 엠)
- rem은 "루트 엠"을 나타내며, 상대적인 크기를 나타낸다.
- 기본적으로 HTML 요소의 기본 글꼴 크기인 "루트 엠"을 기준으로 삼는다.
- 예를 들어, font-size: 1.2rem;은 해당 텍스트의 글꼴 크기를 루트 엠의 1.2배로 설정한다.
- 상위 요소의 크기에 영향을 받지 않고, 오직 루트 엠을 기준으로 상대적인 크기를 조정한다.
- 반응형 웹 디자인에 유용하며, 루트 엠을 조정함으로써 전체적인 디자인의 크기를 일괄적으로 조정할 수 있다.
em (엠)
- em은 "엠"을 나타내며, 상대적인 크기를 나타낸다.
- 기본적으로 해당 요소의 부모 요소의 글꼴 크기를 기준으로 삼는다.
- 예를 들어, font-size: 1.2em;은 해당 텍스트의 글꼴 크기를 부모 요소의 글꼴 크기의 1.2배로 설정한다.
- 상위 요소의 크기에 영향을 받으며, 계층적인 구조에서 부모 요소의 크기가 변경되면 자식 요소의 크기도 변경된다.
- 주로 상대적인 크기를 적용하거나, 상위 요소의 크기에 따라 유동적인 크기를 조정하고자 할 때 사용된다.
px, rem, em은 각각 고정 크기, 루트 엠 기준의 상대적인 크기, 부모 요소 기준의 상대적인 크기를 나타내므로, 웹 페이지의 요소들의 크기를 조정하는 데 유용하게 사용된다.
선택할 단위는 디자인의 목적과 요구에 따라 결정되어야 한다.
예제
박스의 크기를 px, rem, em을 사용하여 설정하는 예제 코드
<!DOCTYPE html> <html> <head> <style> .container { width: 300px; height: 200px; } .box1 { width: 200px; /* 픽셀 */ height: 120px; /* 픽셀 */ } .box2 { width: 70%; height: 70%; } .box3 { width: 80%; height: 80%; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
위의 코드에서는 .container 클래스의 요소를 가진 컨테이너 박스를 생성한다.
그 안에는 .box1, .box2, .box3 클래스의 요소로 세 개의 박스를 만든다.
- .box1은 width: 200px;와 height: 120px;를 사용하여 고정된 픽셀 크기로 설정된다.
- .box2와 .box3는 상위 .container 요소의 크기를 기준으로 백분율 단위를 사용하여 크기를 조정한다.
- .box2는 width: 70%;와 height: 70%;를 사용하여 .container의 너비와 높이의 70%로 설정된다.
- .box3은 width: 80%;와 height: 80%;를 사용하여 .container의 너비와 높이의 80%로 설정된다.
이 예제를 실행하면 각 박스가 설정된 크기에 따라 다르게 표시된다.
첫 번째 박스는 항상 200px * 120px로 고정되어 있지만, 두 번째와 세 번째 박스는 .container 요소의 크기에 따라 유동적으로 조정된다.
반응형
'Front-End > HTML & CSS' 카테고리의 다른 글
| [CSS] 뷰포트(ViewPort) (0) | 2023.07.03 |
|---|---|
| [CSS] Flex 컨테이너 (0) | 2023.06.29 |
| [CSS] flex 태그 (0) | 2023.05.29 |
| [Front-End] HTML 입력 양식 (0) | 2022.10.20 |
| [Front-End] HTML 공간 분할 (0) | 2022.10.19 |