반응형 단위
1. 절대적인 값 (Absolute)
px?
모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
문제점?
- 컨테이너 사이즈가 변경되어도 콘텐츠 사이즈가 그대로 고정된 값으로 유지되는 것.
- 사용자가 브라우저에서 폰트 사이즈 설정을 바꾸어도 전혀 반응하지 않는다.
- 그래서 대부분 %를 이용하여 부모의 몇%를 표기하는 방식으로 많이 사용된다.
2. 반응형을 위한 단위 (Relative)
- %
- em (유동적)
- rem (고정)
- vw
- vh
- 부모 요소의 사이즈에 따라서 사이즈가 변경되어야 한다면
em, %
- 부모와는 상관 없이 브라우저 사이즈에 대해서 반응해야 한다면
v*(뷰포트), rem
- 요소의 너비와 높이에 따라서, 사이즈가 변경이 되어야 한다면
%, v*
- 폰트 사이즈에 따라서
em, rem
- 미디어 쿼리에서도 rem 사용하면 좋다. (48rem)
- box 자체 사이즈를 결정할 때는
%, v*, flexbox 이용
- 요소의 폰트 사이즈를 결정할 때
부모 요소를 상대로 한다면 em
루트를 상대로 한다면 rem
1. %
- 부모 요소의 상대적으로 크기 결정
- 물과 같이 유동적으로 만들기 위해 % 이용하는 것이 좋다.
- em 대신 사용 가능
2. em
- 부모 요소의 상대적으로 크기 결정
- 1em = 16px (기본)
- 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위
- 상위에 썼을 때와 부모 요소에서 사용했을 때, 컴포넌트의 크기가 달라진다.
- 사이즈가 유동적으로 변경되어야 할 때
- em 대신 % 사용 가능
- parent 8em
16px * 8 = 128px
- Child 0.5em
128px * 0.5 = 64px
3. rem
- 루트 요소의 상대적으로 크기 결정
- 8em ?
16px * 8 = 128px
- 0.5rem ?
16px * 0.5 = 8px
- 부모 콘테이너에 있는 폰트 사이즈와 상관 없이 페이지의 어떤 박스 안에 사용해도 크기가 일정하게 고정
- HTML 이나 body 폰트 사이즈 지정하지 않으면, 기본적으로 100%로 지정.
- 브라우저 환경에서 폰트 사이즈를 변경하면 자동적으로 우리의 페이지도 반응적으로 폰트 사이즈가 변경되는 것을 확인할 수 있다. 여기서 px 사용시엔 반응형이 되지 않는다.
- 폰트 사이즈를 결정할 때 rem을 더 사용
4. vw (viewport width)
- 100vw?
viewport width에 viewport 너비에 있는 100%를 쓰겠다.
- 50vw?
브라우저 너비의 반을 쓰겠다.
- 부모 요소와 상관 없이 브라우저 너비에 따라서 변경된다.
5. vh (viewport width)
'기술 > CSS' 카테고리의 다른 글
| [CSS] transition - 스타일 전환 효과 (0) | 2023.10.16 |
|---|---|
| [CSS] position 제대로 이해하기 💡 (0) | 2023.10.12 |
| [CSS] 위치 속성(position, float, clear) (0) | 2022.11.19 |
| [CSS] 테이블 스타일 (0) | 2022.11.17 |
| [CSS] 박스 모델 (0) | 2022.11.13 |