절대단위와 상대단위
📘 절대단위
- in, cm, mm, pt, px
- 출력 장치의 물리적 속성을 아는 경우 효율적
• px (pixel)
절대값으로 사용되는 단위.
고정된 값이기 때문에 사용하기 편하고 이해하기 쉽지만, 반응형 웹사이트를 만들 때 적절하지 않음
• pt (point)
1px = 0.75 pt
📙 상대단위
- %, em, rem, vh, vm
- 기종간, 플랫폼 간의 호환성을 유지하는데 유리
- 반응형 어플리케이션을 만들때, 상대단위를 사용하는 것이 유리
• %
부모 엘리먼트의 size를 기준으로 한 상대적인 size
max-width, min-width 설정 가능
• em
부모 엘리먼트의 font-size를 기준으로 한 상대적인 size
너무 남용하면 조상요소와 후손요소간의 관계구조가 복잡할 때 상속된 font-size를 예측하기 어려울 수 있다.
• rem
root em으로, 루트 요소(html)의 font-size와 비교 - html의 기본 font-size는 16px이다.
16px은 계산하기 힘들기 때문에 간편화 하기 위해서 html의 font-size를 변경해준다.
html{font-size: 10px}
html{font-size: 62.5%}
두번째가 권장된다.
→ web size를 확대해서 보고 싶은 사용자가 size를 수동적으로 확대하면
html size가 조정되는데 10px로 고정하면 무시된다.
• vh, vw
Viewport - 화면 display상의 표시영역
1vh = 1% of Viewport Height
1vw = 1% of Viewport Width
Viewport를 기준으로 한 상대적인 size를 나타낸다.
📍 height: 100% vs height: 100vh
- %는 부모요소 기준, vh는 viewport 기준
📍 calc() 결합
- 헤더 영역의 높이가 50px이고 컨텐츠 영역의 높이를 '헤더를 제외한 나머지 높이 전체'로 하고 싶다면
{ height: calc(100vh - 50px);}
절대적인 사이즈를 통해, 무반응 어플리케이션 → px
전체적으로 모두 상대적인 사이즈를 지정하여 반응형 앱을 만들때 → rem
부분적으로 상대적인 사이즈를 지정하여 반응형 앱을 만들때 → em
'CSS' 카테고리의 다른 글
| [CSS] 선택자(Selector) (0) | 2022.03.08 |
|---|
