CSS에서 글자 크기나 마진, 패딩, 너비 등 길이와 관련된 값을 설정할 때 여러 단위를 많이 사용합니다.
각 단위가 어떻게 다른지 확인해 보도록 하겠습니다.
1) px 단위
CSS를 공부할 때 처음에 사용하는 단위가 px 단위죠.
px단위는 절대적인 크기를 가지기 때문에 웹 브라우저 창의 크기와 상관없이 항상 같은 크기를 유지합니다.
웹 요소의 너비 값을 px로 지정하면 웹 브라우저 화면이 작아질 경우 일부가 가려질 수도 있죠.
다음 예제는 .pixel의 너비를 800px로 지정한 것인데, 브라우저 창 너비가 넓으면 .pixel 요소가 전부 보이지만 브라우저 창의 너비가 좁을 경우에는 .pixel 요소가 다 보이지 않고 가려집니다.
<style>
.heading {
background: lime;
border:1px solid #222;
padding: 20px;
margin-bottom: 20px;
}
.pixel {
width: 800px;
}
</style>
<div class="heading pixel">
Hello, Everyone!
</div>
2) % 단위
% 단위를 사용하는 것은, 특정 값을 기준으로 몇 퍼센트인지를 나타내는 방법입니다.
기준이 되는 요소는 부모 요소인데, 부모 요소가 없다면 <body> 태그, 즉 웹 문서 전체 값이 부모 요소가 됩니다.
그래서 웹 브라우저 창의 크기가 크면 큰대로, 작으면 작은대로 요소의 크기도 변하게 되죠.
다음 예제는 .heading의 너비를 70%로 했기 때문에 전체 문서 너비를 기준으로 70%가 되고,
.heading 안에 있는 텍스트 요소의 너비 70%는, 부모 요소인 .heading을 기준으로 70%가 됩니다.
<style>
.heading {
background: lime;
border:1px solid #222;
padding: 20px;
margin-bottom: 20px;
}
.pixel {
width: 800px;
}
.percent {
width: 70%;
}
p {
background: white;
padding: 10px;
}
</style>
<div class="heading percent">
Hello, Everyone!
<p class="percent">This is inner text</p>
</div>
3) em과 rem
픽셀 크기는 항상 고정되어 있기 때문에 전체적으로 글자 크기를 조절하려면 값을 모두 수정해야 합니다. 이 때 em이나 rem 같은 상대적인 크기를 사용한다면 기준값을 조절하는 것만으로 나머지 크기도 함께 조절할 수 있죠. (% 단위 역시 상대적인 크기입니다.)
em과 rem의 가장 큰 차이는 어떤 값을 기준으로 하는가입니다.
em 단위는 부모 요소의 크기를 기준으로 몇 배가 되는지 지정하고, rem 단위는 root 요소, 즉 body 요소에서 처음에 지정한 값을 기준으로 몇 배가 될지 지정합니다.
여기에서는 글자 크기를 예로 들어보죠.(body에서 따로 글자 크기를 지정하지 않는다면 기본값을 16px로 인식합니다.)
아래 예제에서 첫번째 목록은 첫번째 단계(메인 메뉴)의 글자 크기를 1.5em로 했습니다. 그래서 Main1과 Main2, Main3의 글자 크기는 24px이 됩니다.
서브 메뉴인 Sub2-1과 Sub-2의 글자 크기는 1.2em으로 지정했습니다. 여기서 주의할 점은, 부모 요소, 즉 메인 메뉴의 글자 크기가 기준이 된다는 것이죠. 그래서 서브 메뉴의 글자 크기는 24 * 1.2 이기 때문에 36px이 됩니다.
두번째 목록을 볼까요? 두번째 목록에서는 rem 단위를 사용했습니다. rem 단위는 body에서 지정한 16px을 기준으로 합니다. 그래서 메인 메뉴 크기 1.5rem은 24px이 되고, 서브 메뉴 크기 1.2rem은 19.2px이 됩니다.
<style>
body {
font-size: 16px;
}
.menu1 .mainmenu {
font-size: 1.5em; /* 24px */
}
.menu1 .submenu {
font-size: 1.2em; /* 36px */
}
}
.menu2 .mainmenu {
font-size: 1.5rem; /* 24px */
}
.menu2 .submenu {
font-size: 1.2rem; /* 19.2px */
}
</style>
<div class="container menu1">
<ul class="mainmenu">
<li>Main1</li>
<li>Main2
<ul class="submenu">
<li>Sub2-1</li>
<li>Sub2-2</li>
</ul>
</li>
<li>Main3</li>
</ul>
</div>
<hr>
<div class="container menu2">
<ul class="mainmenu">
<li>Main1</li>
<li>Main2
<ul class="submenu">
<li>Sub2-1</li>
<li>Sub2-2</li>
</ul>
</li>
<li>Main3</li>
</ul>
</div>
4) vw, vh 단위
vw와 vh는 뷰포트(viewport) 크기를 기준으로 너비와 높이를 지정하는 단위입니다. 뷰포트란 웹 문서 내용이 표시되는 영역을 가리키는데, pc의 뷰포트와 스마트폰의 뷰포트는 크기가 다르겠죠? 화면 크기가 큰지, 작은지를 따로 따지지 않고 뷰포트를 기준으로 하기 때문에 글자 크기보다는 웹 요소의 크기를 지정할 때 주로 사용합니다.
뷰포트의 너비를 꽉 채우면 100vw, 높이를 꽉 채우면 100vh라고 합니다. 그래서 1vw는 뷰포트 너비의 1/100이 되고, 10vh라고 하면 뷰포트 높이의 1/10 크기를 나타냅니다.
<style>
*{
box-sizing: border-box;
}
.heading {
background: lime;
border:1px solid #222;
padding: 20px;
margin-bottom: 20px;
}
.viewport {
width: 50vw;
}
</style>
<div class="heading viewport">
Hello, Everyone!
</div>
이외에도 웹에서 사용하는 길이 단위는 여러 가지인데, 좀더 자세한 것은 https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units 를 참고하세요.
'css' 카테고리의 다른 글
| 좌우로 왔다갔다 하는 CSS 애니메이션 (0) | 2023.02.15 |
|---|---|
| 박스 모델 테두리에 이미지 넣기 (0) | 2022.11.20 |
| 텍스트 안에 배경 이미지 넣기 (0) | 2022.05.19 |
| 가상 요소 ::before, ::after (0) | 2022.03.07 |
| 링크해서 사용하는 아이콘, Font Awesome (0) | 2022.03.05 |
