CSS 단위
CSS 단위들은 웹의 다양한 상황에 적용되며, 각각의 특성과 사용 방법을 이해하고 적절히 활용하는 것이 중요하다.
Pixel px
- pixel은 CSS에서 가장 일반적으로 사용되는 단위.
- 화면에 표시되는 가장 작은 단위
- 모니터나 디바이스 화면 해상도에 따라 크기가 다르게 표현된다.
- 크기, 여백, 경계선 등의 다양한 요소를 정확하게 제어하기 위해 사용된다.
- 고정된 크기를 가지고 다른 요소들과의 상대적인 크기를 지정할 수도 있다.
고정 크기 요소
특정 요소의 크기를 정확히 제어하고 싶을 때 사용된다.
예로, 로고 이미지의 크기 혹은 버튼 크기 등.
.logo {
width: 200px;
}
.button {
width: 150px;
height: 40px;
}정렬 및 여백
요소들의 정렬이나 여백을 설정할 때 사용한다.
예로, 요소들 사이의 간격을 일정하게 유지하거나, 요소를 수평 또는 수직으로 정렬할 때 사용된다.
.container {
margin-top: 20px;
padding: 10px;
}
.column {
width: 300px;
margin-right: 20px;
}주의
픽셀은 정확한 크기 제어를 가능하게 해주지만, 반응형 디자인과 유연한 레이아웃을 구현하는 데에는 다른 단위들이 더 적합할 수 있다. 꼭 프로젝트의 목적, 요구사항에 따라 다른 단위들과 혼합하여 사용하는 게 좋다.
percent %
- %는 CSS에서 많이 사ㅏ용되는 상대적인 단위입니다.
- 부모 요소의 크기에 대한 비율로 크기를 설정할 수 있다.
- 예를 들어, 부모 요소의 너비가 200px이고 자식 요소의 너비를 50%로 설정하면, 자식 요소의 너비는 100px가 됨.
반응형 웹
%는 반응형 웹디자인에서 주로 사용된다.
Viewport크기에 따라 요소의 크기를 자동으로 조정하여 다양한 화면 크기에서 일관된 레이아웃을 유지할 수 있다.
.container {
width: 100%; /* 부모 요소의 100% 크기 */
}
.column {
width: 50%; /* 부모 요소의 50% 크기 */
}비율 및 배율 조정
요소들 사이의 비율이나 배율을 유지하고 싶을 때 %를 사용할 수 있다.
예로, 이미지의 너비를 50%로 설정하면 이미지들은 부모 요소의 크기에 비례하여 반응한다.
.image {
width: 50%; /* 부모 요소의 50% 크기 */
}텍스트 크기 조정
폰트 크기를 상대적으로 조정할 때 %를 사용할 수 있다.
부모 요소의 크기에 대한 비율로 자식 요소의 폰트 크기를 설정할 수 있다.
Viewport height vh
- CSS에서 사용되는 상대적인 단위 중 하나
- Viewport는 웹 페이지가 표시되는 브라우저 창의 영역을 의미한다.
- 현재 뷰포트(브라우저 창)의 높이에 상대적인 크기를 나타내는 단위
- 뷰포트 높이에 대한 비율로 요소의 크기를 조정하는 데에 사용된다.
- 1vh는 뷰포트의 높이의 1/100을 나타낸다. 50vh는 뷰포트 높이의 50%와 동일.
반응형 웹
vh는 반응형 웹에서 주로 활용된다.
- 반응형 디자인에서 뷰포트의 크기에 따라 자동으로 조정되는 유동적인 레이아웃을 구현하는 데 유용
- 뷰포트 크기가 변경될 때마다 요소의 크기가 조정되어 다양한 디바이스에서 일관된 경험을 제공할 수 있음
.section {
height: 100vh; /* 뷰포트 높이의 100% 크기 */
}Viewport에 맞춘 요소 크기
특정 요소를 뷰포트의 크기에 맞게 조정할 때 vh를 사용할 수 있다.
예로 전체 화면 배경 이미지를 설정학거나 뷰포트의 일부분을 차지하는 요소를 만들 때 유용하다.
.hero-section {
height: 80vh; /* 뷰포트 높이의 80% 크기 */
}
.background-image {
width: 100vw; /* 뷰포트 너비의 100% 크기 */
}세로 중앙 정렬
vh를 사용하여 요소를 세로 중아아에 정렬할 수 있다.
부모 요소의 높이에 대한 비율로 자식 요소를 정렬한다.
.parent {
height: 100vh; /* 뷰포트 높이의 100% 크기 */
display: flex;
align-items: center;
}Viewport width vw
- CSS에서 사용되는 상대적인 단위 중 하나
- 뷰포트 너비에 대한 비율로 요소의 크기를 조정하는 데 사용된다.
- 1vw는 뷰포트의 너비의 1/100을 나타낸다. 50vw는 뷰포트 너비의 50%와 동일.
반응형 웹
vw는 반응형 웹에 주로 활용된다. 화면의 너비에 상대적으로 크기를 조정하여 다양한 디바이스와 화면 크기에서 일관된 레이아웃을 유지할 수 있다.
.container {
width: 100vw; /* 뷰포트 너비의 100% 크기 */
}Viewpor에 맞춘 요소 크기
특정 요소를 뷰포트의 크기에 맞게 조정할 때 vw를 사용할 수 있다.
전체 화면 배경 이미지를 설정하거나 뷰포트의 일부분을 차지하는 요소를 만들 때 유용
.hero-section {
width: 80vw; /* 뷰포트 너비의 80% 크기 */
}
.sidebar {
height: 100vh; /* 뷰포트 높이의 100% 크기 */
}가로 중앙 정렬
vw를 사용하여 요소를 가로 중앙에 정렬할 수 있다.
부모 요소의 너비에 대한 비율로 자식 요소를 정렬한다.
.parent {
width: 100vw; /* 뷰포트 너비의 100% 크기 */
display: flex;
justify-content: center;
}em
- em은 요소의 상대적인 크기를 나타내는 단위
- 기본적으로 요소의 상위 요소에 대한 폰트 크기에 대한 배수로 설정된다.
- 예를 들어, 부모 요소의 폰트 크기가 16px이고 자식 요소의 크기를 2em으로 설정하면, 자식 요소의 크기는 32px가 된다.
또한, 중첩된 요소의 경우 em은 상위 요소의 폰트 크기를 상속받아 계산된다.
상대적인 폰트 크기 조정
em은 상위 요소의 폰트 크기를 상속받아 계산되기 때문에 폰트 크기를 상대적으로 조정하는 데 유용하다.
중첩된 요소에서 상위 요소에서 상위 요솟의 폰트 크기를 기준으로 크기를 조절할 수 있다.
.parent {
font-size: 16px; /* 부모 요소의 폰트 크기 */
}
.child {
font-size: 1.2em; /* 부모 요소의 1.2배 크기 */
}상대적인 요소 크기 조정
em은 요소의 크기를 상대적으로 조정하는 데에도 사용될 수 있다.
요소의 너비, 높이, 여백 등을 상위 요소의 폰트 크기에 비례하여 조절할 수 있다.
.container {
font-size: 16px; /* 부모 요소의 폰트 크기 */
}
.box {
width: 10em; /* 부모 요소의 10배 크기 */
height: 2em; /* 부모 요소의 2배 크기 */
margin-top: 1em; /* 부모 요소의 1배 크기 */
}주의
중첩된 요소의 경우 부모 요소의 폰트 크기를 상속받아 계산되므로 계산 및 유지보수에 주의해야 함
rem
- CSS에서 사용되는 상대적인 단위 중 하나
- "루트 요소(root element)"의 폰트 크기에 상대적인 크기를 나타냄.
- HTML 요소의 폰트 크기를 기준으로 설정
- em과 마찬가지로 폰트 크기에 대한 배수로 작동, rem은 중첩된 요소의 영향을 받지 않고 항상 루트 요소의 폰트 크기를 기준으로 설정된다. 이는 전역적인 크기 조정에 유용하다.
전역적인 크기 조정
- 전체 웹 페이지에서 일관된 크기 조정을 적용할 수 있다.
- 루트 요소의 폰트 크기를 조정함으로써 모든 요소의 크기를 일관되게 조절할 수 있다.
html {
font-size: 16px; /* 루트 요소(HTML 요소)의 폰트 크기 */
}
.container {
width: 20rem; /* 루트 요소의 20배 크기 */
height: 10rem; /* 루트 요소의 10배 크기 */
}폰트 크기에 상대적인 요소 크기 조정
- rem은 폰트 크기에 상대적인 크기를 나타내므로, 요소의 크기를 폰트 크기를 기준으로 조정
- 텍스트 기반 요소의 크기를 폰트 크기와 일관성 있게 유지하는 데 도움
.parent {
font-size: 18px; /* 부모 요소의 폰트 크기 */
}
.child {
width: 2rem; /* 부모 요소의 2배 크기 */
height: 1.5rem; /* 부모 요소의 1.5배 크기 */
}rem은 폰트 크기에 따라 자동으로 조정되며, 중첩된 요소의 계산에는 영향을 받지 않는다. 이를 통해 전역적인 크기 조정과 일관된 스케일링을 적용하면서도 계산 및 유지보수가 용이해진다.
주의
브라우저의 기본 폰트 크기 설정에 영향을 받을 수 있다는 점.
기본 설정에 의존하지 않고 명시적으로 루트 요소의 폰트 크기를 설정하는 것이 좋다.
CSS를 자주 써왔으면서 단위에 대한 부분은 항상 헷갈렸다.
이번 기회에 제대로 알게 되어 좋은 선택을 할 수 있을 것 같다.
참조 ✅
