절대 단위 / 상대 단위
절대 단위 : in, cm, mm, pt, px가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
상대 단위 : %, em, rem, vw, vh이 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리
⇒ 모바일/태블릿/웹사이트 모두에 호환되는 반응형 어플리케이션을 만들고자 한다면,
상대단위를 사용하는 것이 유리하다.
CSS 절대 단위
- px
- pt
px (pixel)
가장 기본적으로 사용되는 단위입니다.
이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이
사용자가 임의로 정의할 수 없는 고정된 값을 말합니다.
이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다.
pt (point)
1 px = 0.75 pt
CSS 상대 단위
- %
- em
- rem
- vw
- vh
| 단위 | 설명 |
| % | 부모요소가 갖고 있는 크기에 %처리 ex) 200% → 2배 |
| em | 글꼴을 상대적으로 표현하는 단위 부모 요소가 갖고 있는 크기에 등배 단위로 처리 ex) 2em → 2배 |
| rem | 글꼴을 root element (html태그) 기준으로 크기에 등배 단위로 처리 (r의 의미는 루트인 최상위 글씨 크기를 의미) |
| vw | 뷰포트 너비(width)의 1%로 처리 |
| vh | 뷰포트 높이(height)의 1%로 처리 |
| vmin | 현재 뷰포트 중(width와 height 중) 작은 쪽으로 선택해서 vw 혹은 vh 수치로 처리 ** 익스플로러(IE)는 안되므로 잘 알고 사용해야 합니다. |
| vmax | 현재 뷰포트 중(width와 height 중) 큰 쪽으로 선택해서 vw 혹은 vh 수치로 처리 ** 익스플로러(IE)는 안되므로 잘 알고 사용해야 합니다. |
1. % (퍼센트)
- 부모요소의 크기값에 비례하여 적용되는 단위입니다.
- 부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다.
%는 상대적 단위로 부모태그인 <body>태그를 기준으로 너비값이 변합니다.
하지만 <body>태그는 높이값이 기본적으로 없기 때문에 %로 높잇값을 설정해도 동작이 안됩니다.
만약 높이값을 %로 설정하고 싶다면 <body>태그에 높이값을 설정해주면 됩니다.
사용예시
<div class="out_box">
<div class="in_box"></div>
</div>.out_box {
width: 300px;
height: 300px;
background-color: lightblue;
}
.in_box {
width: 50%;
height: 50%;
background-color: pink;
}자식박스의 가로세로의 크기는 부모크기의 50%만큼 적용이 되는 것을 확인할 수 있습니다.
즉 부모크기인 300px의 절반값인 150px 만큼 자식요소의 크기값이 적용이 됩니다.
See the Pen % 단위 by 권소현 (@uilserhu-the-looper) on CodePen.
2. em (element) / rem (root element)
- font-size의 크기를 기준으로 바뀌게 되는 단위로 상대적인 값이라 불러줍니다.
하지만 그 기준이 누가 되느냐에 따라 em, rem을 구분하여 사용해 줄 수 있습니다.
- em = 부모의 폰트 크기에 비례하는 단위
1em = 부모의 폰트 크기
2em = 부모의 폰트 크기 * 2
- 1rem = 최상위 요소인 html의 폰트 크기에 비례하는 단위
1em = html의 폰트 크기
2em = html의 폰트 크기 * 2
* 브라우저의 기본 font-size = 16px
👉 활용법
html의 font size만 분기점마다 변경하여 요소들의 font size들을 쉽게 변경할 수 있다.
자식 요소에 em 단위를 이용하여 폰트 크기를 지정하면
부모 폰트 크기에 따라 자식 요소의 폰트 사이즈도 바뀐다.
부모 요소의 폰트 사이즈를 rem 단위로 지정했다면
html 폰트 사이즈에 따라 부모 요소의 폰트 사이즈가 변경된다.
이제 분기점마다 html의 폰트 크기만 변경하면 하위 요소들의 폰트 크기를 따로 변경하지 않아도 된다.
em
- 기본적으로 요소의 폰트크기를 지정하지 않으면 위의 값으로 인식 (1em = 16px)
- 부모요소의 폰트크기가 지정되어 있다면, 그 폰트크기가 1em이 된다.
font-size: 16px인 경우, 상대 단위는 브라우저에 의해서 다음과 같이 계산된다.
- 0.5em = 16 px * 0.5 = 8px
- 1em = 16 px * 1 = 16px
- 2em = 16 px * 2 = 32px
- 3em = 16 px * 3 = 48px
여기서 font-size를 20px로 늘릴 경우, 상대 단위도 다음과 같이 비례해서 증가.
- 0.5em = 20 px * 0.5 = 10px
- 1em = 20 px * 1 = 20px
- 2em = 20 px * 2 = 40px
- 3em = 20 px * 3 = 60px
반대로 font-size를 10px로 줄일 경우, 상대 단위도 다음과 같이 비례해서 감소.
- 0.5em = 10 px * 0.5 = 5px
- 1em = 10 px * 1 = 10px
- 2em = 10 px * 2 = 20px
- 3em = 10 px * 3 = 30px
사용예시
<div class="parent">
<div class="child"></div>
</div>
.parent{ font-size:12px }
.child{ font-size:1.2em }
다음과 같이 부모 요소를 12px로 정의했을 때 자식 요소를 1.2em 으로 정의하면
자식 요소는 12px*1.2=14.4px로 정의됩니다.
rem
- rem은 root em의 약자입니다.
즉 가장 최상단(root) 기준으로 맞추겠다는 소리인데요.
최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다.
- 모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용하기에 유용합니다.
사용예시
html{ font-size:12px }
div{ font-size:1.2rem }
See the Pen Untitled by 권소현 (@uilserhu-the-looper) on CodePen.
3. vw (viewport width) / vh (viewport height)
- 이 단위는 뷰포트 즉, 브라우저화면의 가로(너비), 세로(높이) 크기를 기준으로 크기값을 조절해 줄 수 있습니다.
따라서 브라우저의 화면을 확대하거나 축소하면 그에 따라 요소의 크기가 유동적으로 변화하게 만들어 줄 수 있습니다.
브라우저의 크기에 따라 값이 변하기 때문에 상대적인 값이라 불러줍니다.
👉 활용법
요소를 뷰포트 영역 전체를 차지하게 하거나, 그 일부분만 차지하기 하는데 유용하게 쓸 수 있다.
100vw = 뷰포트의 전체 너비 / 100vh = 뷰포트의 전체 높이
vw / vh
- 1vw = viewport 너비의 1% (500px 너비 → 1vw = 5px)
- 1vh = viewport 높이의 1% (800px 높이 → 1vh = 8px)
사용예시
div{ height:50vh; width:100vw; }항상 눈에 보이는 디스플레이의 일정 비율을 차지하도록 만들어지기 때문에 사용자가 화면의 크기를 임의로 줄였다 늘였다 해도,
콘텐츠가 화면의 일정 비율을 항상 차지하게 해서 예쁜 구조를 유지할 수 있다는 점입니다.
데스크탑과 모바일에서 동시에 운영되는 사이트를 제작할 때 유용
See the Pen vh 단위 by 권소현 (@uilserhu-the-looper) on CodePen.
4. vmin (viewport min) / vmax (viewport max)
- vmin과 vmax도 viewport를 기준으로 하는 단위이다.
- vmin는 너비와 높이 중 더 작은 값을 적용하고, vmax는 더 큰 값을 적용한다.
ex) 너비 600px, 높이 1200px → vmin = 6px / vmax = 12px
👉 활용법
언제든 화면에 보이는 요소를 쉽게 만들 수 있다.
· 요소 : 80vw x 80vw
만약 viewport가 1000px x 500px라면 요소의 크기는 800px x 800px가 되므로
잘려서 보이게 된다.
· 요소 : 80vmin x 80vmin
viewport가 1000px x 500px라면 요소의 크기는 400px x 400px가 되어
화면에 요소 전체가 잘 보인다.
See the Pen "vmin" vs "vw" by 권소현 (@uilserhu-the-looper) on CodePen.
사용예시
- 이러면 vw나 vh랑 뭐가 다른가 싶지만,
'언제든 화면에 보이는 요소'와 '언제든 화면을 꽉 채우는 요소'를 쉽게 만들 수 있어요.
예를 들어 80vw * 80vw로 지정한 요소가 있습니다. 현재 뷰포트는 1000px * 1000px 이에요.
'80vw = 뷰포트 너비의 80%'으로 계산되므로 이 요소의 실제 크기는 800px * 800px입니다.
하지만 vw는 너비에만 반응할 뿐, 높이엔 반응하지 않습니다.
그러니 브라우저 높이가 500px로 줄어든다고 해도, vw는 반응하지 않아 요소의 크기는 변하지 않습니다.
결국 800px 높이인 요소는 500px인 브라우저 높이에서 잘려 보이게 됩니다.
이번엔 가로세로 값이 80vmin인 요소입니다.
1000px * 1000px 뷰포트일 때,
80vw와 마찬가지로 800px * 800px의 크기값을 가지겠죠?
이 상태에서 아까처럼 브라우저 높이만 줄여본다면?!
vmin은 둘 중 더 작은 값을 택하기 때문에, 작아진 높이값에 반응해서 잘리지 않고 화면에 표시됩니다.
즉, 너비/높이값 중 무엇이 바뀌던 상관없이 화면에 잘 나타낼 수 있습니다.
'📌 Front End > └ CSS3' 카테고리의 다른 글
| [CSS] CSS 적용 방법, 스타일 적용 우선순위 (0) | 2024.05.25 |
|---|---|
| [CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] (0) | 2024.05.24 |
| [CSS] 뷰포트(viewport), 뷰포트 단위(vw, vh, vmin, vmax) (0) | 2024.05.23 |
| [CSS] CSS 변수(--variable) 사용법 (0) | 2024.05.22 |
| [CSS] 스크롤 바(Scrollbar) 스타일 커스텀하기 (0) | 2024.05.22 |
