CSS Units
CSS 문법은 크게 selector, property, value 세 가지로 나누어져 있다. value 중에서도 단위를 가지고 있는 값들이 있는데, 이 단위의 종류도 다양하다.
Absolute unit
- px | pixels, 모니터 위의 가장 작은 화면 단위
- 고정된 값이기 때문에, 컨텐츠가 담겨있는 컨테이너의 크기가 늘어나거나 줄어들어도, 전혀 반응하지 않는다.
- 사용자가 브라우저에서 지정하는 폰트 사이즈에 반응하지 않는다(Cascading rule)
- pt | points
Relative unit | Content is water 🥛
- %
- 어떤 기준에 대해서 상대적으로 계산되는 값
- 어떤 속성의 값이냐에 따라 부모 요소 또는 자기 자신을 기준으로 한다.
- 예를 들어 어떤 요소의 width: 50% 라고 한다면 부모 요소의 너비 값의 50%를 값으로 갖는 것을 의미한다.
- 반면 line-height: 50% 라고 하면, 현재 요소에 적용되어 있는 font-size의 50%를 line-height 값으로 갖는 것을 의미한다. transform: translate(-50%, -50%) 도 현재 요소의 너비와 높이의 절반 만큼 -방향으로 위치를 옮긴다는 뜻이다.
- vw, vh
- viewport related | 브라우저 창의 너비, 높이에 상대적으로 계산되는 값
- 100vw, 100vh로 자주 사용
- em, rem
- em
- 어떤 요소의 font-size: 1em; 일 때 1em은 부모 요소에 적용되어 있는 font-size를 말한다.
- 반면 어떤 요소의 다른 속성의 값, 예를 들어 padding: 1em; 일 때, 1em은 해당 요소에 현재 적용되어 있는 font-size를 말한다.
- 요소를 어떤 컨테이너에 집어 넣느냐에 따라(부모에 따라) font-size를 변경할 수 있고, 이 값에 따라 요소에 적용된 다른 속성값도 자동으로 변경되기 때문에 재사용하기 좋다.
- 하지만 요소가 여러 겹으로 중첩되어 있을 때에는(ul > li > ul > li...) 부모 요소가 계속해서 바뀌므로, 요소의 속성 값이 급격하게 커지거나 작아지는 문제(snowball effect)가 발생할 수 있다.
- rem | the rem unit means "root em, The root element's font-size"
- root element는 <html> 태그를 의미한다.
- <html> 태그의 font-size는 기본값 100%로 지정되어 있고, html의 부모인 브라우저의 폰트 사이즈는 기본값 16px로 지정되어 있다. 브라우저에 지정된 값을 사용자가 변경하면, html은 그에 맞게 반응한다.
- em
Responsive Web Design
다양한 device에서 반응하는 웹 사이트를 만들기 위해서는 두 가지의 전제 조건이 필요하다.
- html | viewport meta data
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- viewport | 브라우저 창의 사이즈, device의 종류에 따라 최대 사이즈가 달라짐
- width=device-width | 웹 페이지의 너비를 device의 너비에 맞춤 => 반응형 디자인 가능
- css | media query
- 브라우저나 특정 디바이스에 부여한 조건에 해당할 때에만 적용(apply)할 CSS를 정의할 수 있다.
- syntax
- media-type | all, screen, print
- media-feature-rule | css rule을 적용하기 위해서 통과해야 하는 조건, 예를 들어 min-width: 768px은 웹 페이지의 최소 너비가 768px일 때, 즉 너비가 768px 이상인 조건을 만족시킬 때를 의미한다.
반응형 웹 페이지를 만들 때에는 가장 작은 단위인 모바일을 기준으로 먼저 코드를 작성한 뒤에, 아래와 같이 사이즈가 작은 것에서 큰 것 순서대로 확장 한다.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
/* example */
@media screen and (min-width: 576px) {
.box::after {
content: 'landscape mobile';
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.box::after {
content: 'tablet';
}
}
@media screen and (min-width: 992px) {
.box::after {
content: 'desktop';
}
}
@media screen and (min-width: 1200px) {
.box::after {
content: 'large desktop';
}
}
@media screen and (min-width: 1366px) {
.box::after {
content: 'super large desktop';
}
}
tips
CSS를 적용할 때 바로 코드를 작성하기 보다는, 개발자 도구에서 해당 요소에 스타일을 적용해보는 간단한 테스트를 거친 후에, 코드를 작성하는 것이 좋다.
'Study > CSS' 카테고리의 다른 글
| Typography & SR only (0) | 2022.05.18 |
|---|---|
| Float & Pseudo Element (0) | 2022.05.18 |
| Transition & Animation (0) | 2022.04.06 |
| Centering (0) | 2022.04.06 |
| Position (0) | 2022.04.06 |
