CSS 튜토리얼)Part2. CSS 기본문법 - 값
안녕하세요, 여러분!
Part2. 값 기초입니다 CSS 에 다양한 길이 및 크기에 대해 바로 알아보도록 할게요!
길이 및 크기
📍px (픽셀):
화면에 표시되는 실제 픽셀 단위입니다.
절대적인 크기를 나타내며, 가장 기본적인 길이 단위입니다.
CSS 픽셀과 물리적 픽셀
물리적 픽셀: 디스플레이 장치의 가장 작은 물리적 단위로, 스크린에 정보를 표현하는 실제 점입니다.
CSS 픽셀: 사용자가 웹 콘텐츠를 보는 상황을 고려하여 조정된 논리적 단위입니다. 사용자의 장치가 어떤 해상도를 가지고 있든지 간에, CSS 픽셀을 사용하여 스타일을 지정하면 웹 개발자는 보다 일관된 시각적 경험을 제공할 수 있습니다.
- 예시
1
2
3
4
p {
font-size: 16px; // 텍스트의 크기를 16 CSS 픽셀로 설정
margin: 10px; // 문단의 마진을 모든 방향으로 10 CSS 픽셀로 설정
}
CSS 픽셀은 웹 디자인에서 광범위하게 사용되며, 다양한 디스플레이 환경에서 웹 페이지의 요소들이 일관되게 표현되도록 돕습니다.
따라서, 웹 개발자들은 CSS 픽셀을 사용하여 요소의 크기, 패딩, 마진, 테두리 등을 지정할 수 있습니다.
📍em:
em은 글꼴 크기에 대한 상대적인 단위입니다.
이 단위를 사용하면, 설정된 요소의 글꼴 크기가 부모 요소의 글꼴 크기에 기반하여 결정됩니다.
💡 ‘em’ 단위를 이해하기 쉬운 방법:
부모 요소의 글꼴 크기가 16px라고 해봅시다! 그러면, 이 부모 요소 내의 모든 em 값은 16px을 기준으로 계산됩니다. 예를 들어, 자식 요소에 font-size: 1.5em;이라고 설정하면, 그 글꼴 크기는 부모의 글꼴 크기 16px의 1.5배가 되어 24px이 됩니다.
- 예시
글꼴 크기: 부모의 글꼴 크기에 따라 자동으로 조절됩니다
1
2
3
4
5
6
.parent {
font-size: 20px; // 부모 글꼴 크기 설정
}
.child {
font-size: 1.2em; // 20px * 1.2 = 24px
}
- 예시
패딩과 마진: 이것도 부모 글꼴 크기에 비례해서 조절됩니다.
1
2
3
4
.child {
padding: 0.5em; // 20px * 0.5 = 10px
margin: 1em; // 20px * 1 = 20px
}
em의 장점
| 장점 | 설명 |
|---|---|
| 조절 용이 | 부모 요소의 글꼴 크기를 변경함으로써, 자식 요소의 글꼴 크기, 패딩, 마진 등을 쉽게 조절할 수 있습니다. |
| 반응형 디자인 적합 | 사용자의 화면 크기나 설정에 따라 요소의 크기가 자동으로 조절되므로, 반응형 디자인에 매우 적합합니다. |
| 일관성 유지 | 웹 페이지의 다양한 부분에서 글꼴 크기와 레이아웃 간격을 부모 요소에 의존하여 일관성 있게 유지할 수 있습니다. |
📍rem:
rem 단위는 문서의 기본 글꼴 크기를 기준으로 크기를 측정하는 방법입니다. 이 기준 글꼴 크기는 웹 페이지의 최상위 요소인 <html> 태그에서 설정됩니다.
rem 단위의 기본 개념:
“Root EM” 의 약자입니다. 여기서 “Root”는 문서의 루트, 즉 <html> 요소를 의미합니다.
웹 페이지에서 글꼴 크기, 패딩, 마진, 너비 등을 설정할 때, 이 rem 단위를 사용하면 모든 것이 웹 페이지의 기본 글꼴 크기에 따라 조정됩니다.
⚡️ 간단한 예: 만약 <html> 요소의 글꼴 크기가 16px로 설정되어 있다면, 1rem은 16px과 같습니다. 2rem은 32px이 됩니다 (16px * 2). 따라서, 만약 <html>의 글꼴 크기를 변경하기만 해도, rem 단위를 사용하는 모든 요소의 크기가 비례적으로 조정됩니다.
rem 단위의 특징:
<span style=color:red>글로벌 스케일링:</span> rem 단위는 전체 문서의 기준 크기(<html> 태그의 font-size)를 변경함으로써 전체 레이아웃의 크기 조정이 가능합니다.
이는 전체 사이트의 글꼴 크기, 간격, 크기 등을 일관되게 조절할 수 있게 해줍니다.
<span style=color:red>일관성:</span> rem을 사용하면 중첩된 요소들의 스타일을 일관되게 유지할 수 있습니다.
em의 경우 중첩 깊이에 따라 값이 달라질 수 있지만, rem은 항상 같은 기준에서 측정되기 때문입니다.
<span style=color:red>유지보수 용이성:</span> 스타일 시트 전체에서 기준 크기를 한 곳에서 조정할 수 있으므로, 디자인 변경이나 반응형 디자인 적용 시 유지보수가 용이합니다.
‘rem’ 의 장점
| 장점 | 설명 |
|---|---|
| 일관성 | rem 단위를 사용하면 전체 웹 페이지에서 요소들의 크기가 일관되게 유지됩니다. 이로 인해 디자인의 통일성이 보장됩니다. |
| 조정 용이 | <html> 요소의 글꼴 크기를 변경함으로써 전체 페이지의 크기 비율을 쉽게 조절할 수 있습니다. 이는 모든 rem 기반 크기가 이에 응답하여 조절되기 때문입니다. |
| 반응형 디자인 적합 | rem은 반응형 디자인 구현에 특히 유용합니다. 미디어 쿼리 내에서 기준 글꼴 크기를 조정하면 관련 요소들의 크기가 자동으로 조정되어 다양한 화면 크기에 적응합니다. |
📍% (백분율):
백분율(%), 즉 퍼센트 값은 요소의 크기, 패딩, 마진 등을 상대적으로 설정할 때 사용되는 단위입니다. 백분율 값은 대개 부모 요소의 크기에 대한 비율로 계산됩니다.
이렇게 상대적인 측정 방법은 특히 반응형 웹 디자인을 구현할 때 매우 유용하며, 다양한 화면 크기와 디바이스에서 일관된 레이아웃과 스타일을 유지하는 데 도움을 줍니다.
백분율 단위의 기본 작동 방식
백분율 값은 주로 다음과 같은 속성에 사용됩니다:
너비 및 높이: 요소의 width와 height 속성을 부모 요소의 너비 및 높이에 대한 백분율로 설정할 수 있습니다.
패딩 및 마진: padding과 margin을 부모 요소의 너비에 대한 백분율로 설정합니다 (상하 패딩과 마진도 부모의 너비를 기준으로 합니다).
폰트 크기: 요소의 font-size를 상위 요소의 글꼴 크기에 대한 백분율로 설정할 수 있습니다.
백분율 사용 예시
- 너비 설정
1
2
3
.container {
width: 80%; // 부모 요소의 너비의 80%를 차지
}
- 마진 및 패딩 설정
1
2
3
4
.box {
margin: 5%; // 모든 방향의 마진을 부모 너비의 5%로 설정
padding: 10%; // 모든 방향의 패딩을 부모 너비의 10%로 설정
}
- 텍스트 크기 설정
1
2
3
.text {
font-size: 150%; // 부모 글꼴 크기의 150%로 설정
}
백분율의 장점
| 장점 | 설명 |
|---|---|
| 유연성 | 백분율 단위는 웹 페이지의 요소들이 부모 요소 및 뷰포트 크기에 따라 동적으로 조절되도록 합니다. 이는 다양한 디스플레이 환경에 적합한 디자인을 만드는 데 도움을 줍니다. |
| 반응형 디자인 적합 | 백분율 단위를 사용하면 웹 페이지의 레이아웃이 뷰포트의 크기 변화에 따라 자동으로 조절되므로, 반응형 웹 디자인에 매우 적합합니다. |
| 일관성 | 백분율을 여러 요소에 적용함으로써, 다양한 화면 크기에서도 웹 페이지의 비율과 레이아웃을 일관되게 유지할 수 있습니다. |
📍vw/vh (뷰포트의 너비/높이의 백분율):
vw는 뷰포트 너비의 1%를, vh는 뷰포트 높이의 1%를 나타냅니다.
이를 통해 뷰포트 크기에 반응하는 레이아웃을 구성할 수 있습니다.
vw (Viewport Width)
- 1vw는 사용자 화면(뷰포트)의 너비의 1%를 나타냅니다.
- 예를 들어, 화면의 너비가 1000픽셀이라면, 1vw는 10픽셀과 같습니다.
vh (Viewport Height)
- 1vh는 사용자 화면(뷰포트)의 높이의 1%를 나타냅니다.
- 화면의 높이가 500픽셀이라면, 1vh는 5픽셀과 같습니다.
간단한 사용 예시
- 너비와 높이 설정: 웹페이지의 배너 또는 섹션의 너비를 화면의 50%로 설정하고 싶다면, CSS에서 이렇게 쓸 수 있습니다:
1
2
3
.banner {
width: 50vw; // 화면 너비의 50%
}
1-1. 높이를 화면 높이의 30%로 설정하고 싶다면:
1
2
3
4
.section {
height: 30vh; // 화면 높이의 30%
}
- 폰트 크기 설정:
글자 크기를 화면 너비에 맞추어 동적으로 조절하고 싶을 때:
1
2
3
h1 {
font-size: 3vw; // 화면 너비의 3%
}
장점
| 장점 | 설명 |
|---|---|
| 동적 크기 조절 | vw와 vh 단위를 사용하면 화면의 크기가 변할 때마다 요소의 크기도 자동으로 조정되어, 다양한 디바이스에서도 일관된 디자인을 유지할 수 있습니다. |
| 반응형 디자인 적합 | 화면 크기에 따라 내용이 자동으로 조정되므로, 반응형 웹 디자인을 구현하기에 매우 적합합니다. |
| 간편한 레이아웃 조정 | 화면 크기의 백분율을 기준으로 요소의 크기를 설정함으로써, 레이아웃의 비율을 쉽게 유지하면서 크기를 조절할 수 있습니다. |