폰트 상대 단위
em과 rem은 둘 다 CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위입니다.
예를 들어, font-size: 16px인 경우, 상대 단위는 브라우저에 의해서 다음과 같이 계산됩니다.
(브라우저의 기본 font-size = 16px)
- 0.5em = 16 px x 0.5 = 8px
- 1em = 16 px x 1 = 16px
- 2em = 16 px x 2 = 32px
- 3em = 16 px x 3 = 48px
여기서 font-size를 20px로 늘릴 경우, 상대 단위도 다음과 같이 비례해서 증가되게 됩니다.
- 0.5em = 20 px x 0.5 = 10px
- 1em = 20 px x 1 = 20px
- 2em = 20 px x 2 = 40px
- 3em = 20 px x 3 = 60px
반대로 font-size를 10px로 줄일 경우, 상대 단위도 다음과 같이 비례해서 감소되게 됩니다.
- 0.5em = 10 px x 0.5 = 5px
- 1em = 10 px x 1 = 10px
- 2em = 10 px x 2 = 20px
- 3em = 10 px x 3 = 30px
em
1em === 부모의 font-size
em은 상위(부모) 요소 기준입니다.
1em = font size (부모 엘리먼트)0.5em은 부모 요소보다 50% 작음
1.5em은 부모의 font-size보다 150% 큼
2.em은 부모의 font-size보다 200% 큼
<div class="parent">
떡볶이 40px
<div class="child">
튀김
</div>
<div class="child">
순대
</div>
</div><style>
.parent {
font-size: 40px;
color: rgb(60, 46, 255);
}
.child {
font-size: 0.5em;
color: tomato;
}
</style>
parent의 font-size가 40px이므로 자식인 child가 부모의 font-size의 반절인 20px이다.
rem
1em === root의 font-size
rem에서 r은 root, 즉 최상위 요소를 font-size 속성 값 의미합니다.
HTML에서 최상위 요소는 <html>입니다.
따라서 rem 경우, html 요소의 font-size 속성 값이 기준이 됩니다.
1rem = font size (최상위 엘리먼트)
html(root)의 font-size는 20px
child의 font-size는 root 크기의 상대적으로 2배 큰 2rem으로 지정
child의 font-size는 40px가 된것을 볼수 있다.
<style>
html {
font-size: 20px;
}
.child {
font-size: 2rem;
color: tomato;
}
</style>
<body>
<div class="parent">
떡볶이
<div class="child">
튀김
</div>
<div class="child">
순대
</div>
</div>
</body>
뷰포트 상대 단위
Viewport는 웹사이트에서 보여지는 영역을 뜻합니다.
vw
vw = viewport width
현재 실행중인 스크린 크기에 맞춰 상대적 너비 크기를 반환
만일 1vh로 속성값을 설정할 경우 뷰포트 너비의 1% 만큼 계산이 됩니다.
1vw = 1%.box {
background-color: chartreuse;
width: 50vw;
}
vh
vh = viewport height
브라우저의 상대적인 높이
1vh = 1%.box {
background-color: chartreuse;
height: 50vh;
}
% 와 차이
1. vh 는 width 에서도 사용이 가능합니다
2. vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환합니다.
반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환합니다.
또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환합니다.
vmax, vmin
vmin과 vmax도 viewport를 기준으로 하는 단위
vw와 vh 중 더 작거나 큰 것을 찾아 적용합니다.
vmax = vw와 vh 중 더 큰거
vmin = vw와 vh 중 더 작은거
.box{
width:10vmax;
height:10vmax;
}
calc
calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.
font-size: calc( 10px + 10px );
연산자(+, -, *, /) 사용이 가능합니다.
- 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다.
- 그래서 그냥 다 공백을 넣어주는게 좋은것 같습니다.
.box {
width: 80%;
}
.box1 {
width: calc( 80% - 20px );
}
.box2 {
width: calc( ( 40% * 2 ) - 40px / 2 );
}
.box3 {
font-size: calc( 4em / 2 + 5px );
}https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
calc() - CSS: Cascading Style Sheets | MDN
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
developer.mozilla.org
min()
괄호에 있는 것 중 더 작은것 고르기
width: min(500px, 200px);https://developer.mozilla.org/en-US/docs/Web/CSS/min()
min() - CSS: Cascading Style Sheets | MDN
The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>
developer.mozilla.org
max()
괄호에 있는 것 중 더 큰것 고르기
font-size: max(4vw, 2em, 2rem);https://developer.mozilla.org/en-US/docs/Web/CSS/max()
max() - CSS: Cascading Style Sheets | MDN
The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>,
developer.mozilla.org
'웹 개발 > 기초' 카테고리의 다른 글
| [CSS] flex box, grid (0) | 2022.03.07 |
|---|---|
| [CSS] 자주 사용하는 속성 (0) | 2022.03.06 |
| [CSS] 선택자 (0) | 2022.03.03 |
| HTML 태그 : form (0) | 2022.03.02 |
| HTML 태그 : img의 srcset, size (0) | 2022.03.02 |