1.CSS의 기본 단위
CSS의 단위로는 절대 단위와 상대 단위가 있다. 절대 단위로 px, 상대 단위로 em, rem, vh, vw 등이 있다.
대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 로 이루어져 있다.
1)절대 단위 px
반응형 웹에는 적절하지 않다. 그렇기 때문에 웹 디자인할 때에는 px 를 권장하지 않는다.
2)상대 단위
(1)em과 rem
em은 실제 사용된 요소의, rem은 최상위(루트) 요소(<html> 태그)의 글자 크기(font-size)를 기준으로 가변한다.
즉 em과 달리 rem은 <html>태그 요소의 글자 크기만 참조한다. <div> 등 다른 태그의 글자 크기와 상관없다.
em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다.
W3 명세서의 의하면 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다.
상위 요소의 폰트 크기가 em 값에 영향을 줄 수는 있지만 그것은 오로지 스타일 상속 때문이다.
만일 실제 사용된 요소 및 상위 요소에 폰트 크기가 없다면 기본 html px인 16px를 기준으로 한다.
em 단위는 스타일 상속을 받기 때문에 사용이 권장되지 않는다.
사용자 설정에 따라 변하는 화면에 유연하게 대응하는 단위로 rem 사용을 권장한다.
(2)em의 예제
①글자 크기를 상위 요소의 1.5배로 만든다.
font-size: 1.5em;
②#box의 width 및 height는 상위 요소 font-size의 5배인 100px로 출력된다.
<!DOCTYPE html>
<html>
<head>
<style>
.box_container {
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
border: 2px solid blue;
}
#box {
width: 5em;
height: 5em;
background-color: gray;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box_container">text
<div id="box">box</div>
</div>
</body>
</html>
(3)rem의 예제
위에서 언급했듯이 html 기본 폰트 사이즈는 16px 이기 때문에 16px * 5 = 80px 로 출력된다.
#box {
width: 5rem;
height: 5rem;
background-color: gray;
border: 2px solid black;
}
(4) %
부모 요소의 너비 또는 높이를 기준으로 % 변환한다.
<head>
<style>
#box {
width:100%;
height:30px;
background:skyblue
}
</style>
</head>
<body>
<div id="box">box</div>
</body>
2.CSS의 viewport 기준 단위 (vw,vh)
em과 rem, %는 브라우저의 창의 크기와 상관이 없이 요소(실제 사용, 부모, 루트 요소 포괄함)의 font-size를 기준으로 가변하는 단위이다.
이와 달리 vw,vh,vmin,vmax는 뷰포트(보여지는 영역)의 너비 및 높이 크기를 기준으로 변한다
(1) vw와 vh (Viewvport Width, Viewport Height)
뷰포트(보여지는 영역)를 기준으로 한 단위로서 보여지는 영역에서 얼만큼 차지할 것인지를 지정하는 단위이다.
1vw는 뷰포트 '너비'의 1% 를 의미한다. 아래의 경우 높이를 200vh로 설정했으므로 뷰포트 '높이'의 200%를 의미하며 스크롤바가 형성된다.
이때 width에도 wh를, height에 vw를 사용할 수 있음. 물론 실효성은 크지 않을 것 같다.
.first {
width:500px;
height:200vh;
background-color: blanchedalmond;;
}
(2)vmin과 vmax
①개념
viewport 의 길이 중 더 긴 길이를 기준으로 삼으면 vmax, 더 짧은 길이를 기준으로 삼는 것은 vmin 입니다.
예를 들면 브라우저가 1100px 너비 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다.
너비 값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.
②활용
언제나 스크린에 보여지는 요소를 만들고 싶을 경우 vmin을 사용하면 된다.
만약 cover처럼 뷰포트 화면에 보여야 하는(스크린에 꽉 차 있는 경우)에는 같은 값을 vmax를 적용할 수 있다.
3.참고 URL
(1)CSS 기본 단위
CSS 기본 : px, em, rem, %(percent) 단위의 차이
CSS를 사용하다보면, 가장 기본적으로 쓰는 것이 px단위이다. 이외에도 em, rem, %(percent) 단위가 있다. 다양하게 활용할 수 있도록 공부해보자. CSS의 단위 CSS의 단위로는 절대 단위와 상대 단위가 있
rypro.tistory.com
(2)CSS viewport 기준 단위
[CSS] 브라우저 창의 너비나 높이에 따라 크기가 변하는 가변 폰트 단위 vw, vh, vmin, vmax
em과 rem을 사용하면 기준이 되는 폰트 크기를 바꾸었을 때,다른 폰트의 크기들도 지정해둔 것에 따라 차등적으로 바뀌어 적용되기 때문에 편리하다.하지만 em과 rem은 브라우저의 창의 크기와는
ccuram.tistory.com
'[HTML,CSS]' 카테고리의 다른 글
| [CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기) (0) | 2023.04.25 |
|---|---|
| [CSS] 가운데 정렬하는 방법 - text-align과 line-height 심화 / flex 비교 (0) | 2023.04.22 |
| [CSS] SCSS와 Bootstrap From GPT (0) | 2023.04.19 |
| [HTML] button과 input 태그 (0) | 2023.03.22 |
| [HTML] Style 및 Script 태그 (0) | 2023.03.22 |