CSS) 단위(px, rem, %, vw, vh, calc)에 대한 모든 것
안녕하세요, 웹 개발을 사랑하는 여러분! 오늘은 HTML과 CSS에서 자주 사용하는 다양한 단위들에 대해 깊이 있게 알아보는 시간을 가져보겠습니다. 이 글을 통해 각 단위의 정의, 사용 방법, 기본값, 그리고 언제 사용하면 좋은지에 대해 설명드릴게요. 끝까지 함께 해주세요!
px (픽셀)
정의
px는 화면의 물리적인 픽셀을 나타내는 절대 단위입니다. 이는 디스플레이 해상도에 의존하지 않으며, 1픽셀은 화면상의 한 점을 의미합니다.
사용 방법
1
2
3
4
5
.element {
width: 100px;
height: 50px;
font-size: 16px;
}
기본값
px 단위는 절대 단위로, 주로 고정된 크기 요소에 사용됩니다.
언제 많이 쓰이는가?
- 정확한 크기를 지정해야 할 때: 픽셀 단위는 정확하고 예측 가능한 크기를 제공하기 때문에 정확한 크기 지정이 필요한 경우 사용됩니다.
- 이미지 크기: 이미지는 주로 픽셀 단위로 크기가 지정됩니다.
- 고정된 레이아웃 요소: 고정된 레이아웃을 유지해야 하는 요소에 적합합니다.
rem (루트 em)
정의
rem은 루트 요소의 폰트 크기를 기준으로 하는 상대 단위입니다. 루트 요소는 보통 <html> 요소이며, 기본 폰트 크기는 16px입니다.
사용 방법
1
2
3
4
5
6
7
8
html {
font-size: 16px; /* 기본 폰트 크기 설정 */
}
.element {
font-size: 1rem; /* 16px */
width: 10rem; /* 160px */
}
기본값
rem 단위의 기본값은 <html> 요소의 폰트 크기입니다. 일반적으로 브라우저의 기본 폰트 크기는 16px입니다.
언제 많이 쓰이는가?
- 반응형 디자인: rem 단위는 루트 폰트 크기를 기준으로 하기 때문에, 폰트 크기를 조정하면 전체 레이아웃이 비례적으로 조정됩니다.
- 접근성 향상: 사용자 설정에 따른 폰트 크기 변경을 반영할 수 있습니다.
% (백분율)
정의
%는 부모 요소를 기준으로 하는 상대 단위입니다. 요소의 크기를 부모 요소의 크기에 비례하여 지정합니다.
사용 방법
1
2
3
4
5
6
7
8
9
.container {
width: 100%;
height: 200px;
}
.child {
width: 50%; /* 부모 요소의 50% */
height: 100px;
}
기본값
% 단위의 기본값은 부모 요소의 크기입니다.
언제 많이 쓰이는가?
- 유동적인 레이아웃: 부모 요소의 크기에 따라 자식 요소의 크기를 조정할 때 유용합니다.
- 반응형 디자인: 화면 크기에 따라 비례적으로 크기가 조정되는 레이아웃을 만들 때 적합합니다.
vw (viewport width) & vh (viewport height)
정의
vw와 vh는 뷰포트의 너비와 높이를 기준으로 하는 상대 단위입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%입니다.
사용 방법
1
2
3
4
5
6
7
.full-width {
width: 100vw; /* 뷰포트 너비의 100% */
}
.full-height {
height: 100vh; /* 뷰포트 높이의 100% */
}
기본값
vw와 vh 단위의 기본값은 뷰포트 크기입니다.
언제 많이 쓰이는가?
- 전체 화면 크기 요소: 화면 전체를 차지하는 배경 이미지나 섹션에 사용됩니다.
- 반응형 디자인: 화면 크기에 따라 요소 크기를 유연하게 조정할 때 유용합니다.
calc()
정의
calc() 함수는 CSS에서 다양한 단위를 조합하여 계산할 수 있는 기능을 제공합니다. 연산자(+, -, *, /)를 사용하여 복잡한 값을 계산할 수 있습니다.
사용 방법
1
2
3
4
.element {
width: calc(100% - 50px); /* 부모 요소의 너비에서 50px을 뺀 값 */
height: calc(100vh - 20px); /* 뷰포트 높이에서 20px을 뺀 값 */
}
기본값
calc() 함수는 기본값이 없으며, 계산된 값을 반환합니다.
언제 많이 쓰이는가?
- 복잡한 레이아웃 계산: 다양한 단위를 조합하여 복잡한 레이아웃을 계산할 때 유용합니다.
- 동적 크기 조정: 다양한 요소의 크기를 동적으로 조정할 때 사용됩니다.
- 실전 예제: 반응형 웹 페이지 만들기 이제 다양한 단위를 사용하여 반응형 웹 페이지를 만드는 예제를 살펴보겠습니다.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹 페이지</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>내 멋진 웹사이트</h1>
</header>
<main class="main-content">
<section class="intro">
<h2>소개</h2>
<p>여기에 소개 내용이 들어갑니다.</p>
</section>
<section class="gallery">
<h2>갤러리</h2>
<div class="gallery-item">이미지 1</div>
<div class="gallery-item">이미지 2</div>
<div class="gallery-item">이미지 3</div>
</section>
</main>
<footer class="footer">
<p>© 2024 내 멋진 웹사이트</p>
</footer>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
.main-content {
padding: 20px;
}
.intro {
margin-bottom: 20px;
}
.gallery {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.gallery-item {
background-color: #f0f0f0;
width: calc(33.333% - 20px);
height: 200px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
마무리
오늘은 HTML과 CSS에서 자주 사용하는 다양한 단위들에 대해 알아보았습니다. 각각의 단위는 고유의 특성과 사용 사례가 있으며, 이를 적절히 활용하면 더욱 유연하고 반응형 웹 디자인을 만들 수 있습니다. 이 글이 여러분의 웹 개발 여정에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊
다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!