[SeSACx코딩온] CSS 단위
CSS 단위(절대 단위와 상대 단위)
1. 절대 단위와 상대 단위
- 절대 단위 (Absolute Units)
- 특정한 물리적 길이를 나타내며, 고정된 크기를 의미합니다.
- 주로 인쇄 매체에서 사용됩니다.
- 예: 픽셀(px), 포인트(pt), 인치(in), 센티미터(cm) 등.
- 상대 단위 (Relative Units)
- 다른 길이 값에 상대적인 크기를 지정합니다.
- 반응형 디자인에서 매우 유용합니다.
- 예: 백분율(%), em, rem, 뷰포트 너비(vw), 뷰포트 높이(vh) 등.
2. CSS 단위 내용
1) 절대 단위 (Absolute Units)
- 픽셀 (px)
- 화면의 픽셀 하나에 해당합니다.
- 예제:
.px클래스는width와height를 500px로 지정하여 고정된 크기를 설정합니다..px { width: 500px; height: 500px; background-color: palegoldenrod; }
2) 상대 단위 (Relative Units)
- (1) 백분율 (%)
- 상위 요소의 상대적인 크기를 지정합니다.
- 아래 예시에서
.pct-child클래스는 부모 요소의 50% 크기로 설정됩니다.
.pct-parent { width: 500px; height: 500px; background-color: plum; } .pct-child { width: 50%; height: 50%; background-color: palegreen; } - (2) em
font-size속성값에 비례해서 결정되는 상대 단위입니다.em단위는 중첩되므로 굳이 필요한 상황이 아니면 잘 사용되지 않습니다. 상황에 따라 크기가 다라지기 떄문입니다.- 아래 예시에서
.em클래스는font-size가 2em으로 설정되어, 부모 요소의font-size값의 2배가 됩니다.
.em { font-size: 2em; } .case1 { font-size: 20px; } .case2 { font-size: 10px; } .em-3 { font-size: 3em; } - (3) rem
rem은root em의 약자로, 최상위 요소 (html)의font-size에 비례합니다.- 최상위 요소에 비례하기에 중첩 영향을 받지 않으며, 3rem이면 다 같은 크기를 의미합니다.
- 아래 예시에서
.rem클래스는font-size가 2rem으로 설정되어,html요소의font-size값의 2배가 됩니다.
.rem { font-size: 2rem; } - (4) 뷰포트 단위 (vw, vh)
- 뷰포트 너비(vw)와 뷰포트 높이(vh)는 각각 뷰포트의 너비와 높이의 1%를 나타냅니다.
- 예를 들어,
- 브라우저 사이즈 (1200px, 900px) 일 때, 5vw, 5vh 의 값은
- 1vw = 12px => 5vw = 60px, 1vh = 9px => 5vh = 45px 로 설명할 수 있습니다.
- 아래 예시에서
.vw와.vh클래스는 뷰포트 너비와 높이의 20%로 설정됩니다.
.vw { height: 20vw; width: 20vw; background-color: coral; } .vh { height: 20vh; width: 20vh; background-color: skyblue; }
3. CSS 변수
- 변수 이름은
--로 시작합니다. var()함수를 사용하여 변수를 참조합니다.
/* 전역 변수 */
:root {
--color-success: green;
--color-error: red;
--color-white: white;
}
/* 지역 변수 */
.btn {
--size: 8px;
color: var(--color-white);
border: none;
border-radius: 4px;
padding: var(--size);
width: calc(var(--size) * 25);
}
.btn.success {
background-color: var(--color-success);
}
.btn.error {
background-color: var(--color-error);
}
코드 설명
- (1) CSS 변수 정의:
:root선택자에서 전역 변수를 정의합니다. 여기서는 색상 변수를 정의합니다..btn클래스에서 지역 변수를 정의합니다. 여기서는--size변수를 정의하여 버튼의 크기와 관련된 값을 설정합니다.
:root { --color-success: green; --color-error: red; --color-white: white; } .btn { --size: 8px; } - (2)
padding속성:padding: var(--size);는--size변수에 정의된 값을 패딩으로 설정합니다.- 예시 코드에서는
--size가 8px로 정의되어 있으므로,padding: 8px;와 같습니다.
.btn { padding: var(--size); } - (3)
width속성:width: calc(var(--size) * 25);는calc()함수를 사용하여 동적으로 버튼의 너비를 계산합니다.calc(var(--size) * 25)는--size변수의 값인 8px에 25를 곱한 값을 너비로 설정합니다. 이 경우 결과값은,width: 200px;와 같습니다.
.btn { width: calc(var(--size) * 25); } - (4) 색상 적용:
var(--color-white)를 사용하여 버튼의 텍스트 색상을 설정합니다..btn.success와.btn.error클래스에서 각각--color-success와--color-error변수를 사용하여 버튼의 배경색을 설정합니다.
.btn { color: var(--color-white); background-color: var(--color-success); /* 또는 var(--color-error) */ } .btn.success { background-color: var(--color-success); } .btn.error { background-color: var(--color-error); }
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 단위</title>
<link rel="stylesheet" href="./unit.css">
</head>
<body>
<h1>px</h1>
<div class="box px"></div>
<h1>%</h1>
<div class="box pct-parent">
<div class="pct-child"></div>
</div>
<h1>em</h1>
<!-- 1em = 20px -->
<div class="box">
가가
<!-- 2em = 2 * 20px = 40px -->
<span class="em">
나나
<!-- 2em = 2 * 40px = 80px -->
<span class="em">다다</span>
</span>
</div>
<hr>
<h2>em 주의사항</h2>
<div class="box">
<div class="case1">
여기는 20px
<span class="em-3">여기는 3em 이므로</span>
<!-- 3em = 3 * 20px = 60px -->
</div>
<div class="case2">
여기는 10px
<span class="em-3">여기는 3em 이므로</span>
<!-- 3em = 3 * 10px = 30px -->
</div>
</div>
<hr>
<h1>rem</h1>
<!-- 1rem = 20px -->
<div class="box">
가가
<!-- 2rem = 2 * 20px = 40px -->
<span class="rem">
나나
<!-- 2rem = 2 * 20px = 40px -->
<span class="rem">다다</span>
</span>
</div>
<hr>
<h1>vw</h1>
<div class="box vw"></div>
<hr>
<h1>vh</h1>
<div class="box vh"></div>
<hr>
<button class="btn success">Success</button>
<button class="btn error">Error</button>
</body>
</html>
CSS 코드
html {
font-size: 20px;
}
.box {
margin-bottom: 100px;
}
/* CSS 단위 */
/*
#1. 절대 단위 (Absoulte Units)
- 절대 단위는 특정한 물리적 길이를 나타내며, 일반적으로 고정된 크기를 의미.
- 주로 인쇄 매체에서 사용.
픽셀(px) / 포인트(pt) / 인치(in) / 센티미터(cm) 등등...
*/
/* px 단위 */
/* 화면의 픽셀 하나에 해당 */
.px {
width: 500px;
height: 500px;
background-color: palegoldenrod;
}
/*
#2. 상대 단위 (Realtive Units)
- 상대 단위는 다른 길이 값에 상대적인 크기를 지정.
- 반응형 디자인에서 매우 유용.
백분율(%) / em / rem / 뷰포트 너비 (vw) / 뷰포트 높이 (vh) 등등...
*/
/* % 단위
- 상위 요소의 상대적인 크기. (부모 요소 영향)
*/
.pct-parent {
width: 500px;
height: 500px;
background-color: plum;
}
.pct-child {
width: 50%;
height: 50%;
background-color: palegreen;
}
/* em
- font-size 속성값에 비례에서 결정되는 상대 단위.
- 상위 요소 크기에 비례
- em 단위는 중첩! 굳이 필요한 상황이 아니라면 자주 사용되지는 않음.
- 3em 을 사용하더라도 상황에 따라 그 크기가 다르기 때문.
*/
.em {
font-size: 2em;
}
.case1 {
font-size: 20px;
}
.case2 {
font-size: 10px;
}
.em-3 {
font-size: 3em;
}
/* rem
- root em 약자
- 최상위 요소(html) 글꼴 크기에 비례
- 3rem 이면 다 같은 크기! (중첩 영향을 받지 않음)
*/
.rem {
font-size: 2rem;
}
/*
vw, vh
- viewport width(vw), viewport height(vh)
- 1vw : viewport width 1%
- 1vh : viewport height 1%
Q) 브라우저 사이즈 (1200px, 900px) 일 때,
5vw, 5vh 의 값은?
1vw = 12px => 5vw = 60px
1vh = 9px => 5vh = 45px
*/
.vw {
height: 20vw;
width: 20vw;
background-color: coral;
}
.vh {
height: 20vh;
width: 20vh;
background-color: skyblue;
}
/* CSS 변수 */
/*
- 변수 이름 : --로 시작
* 사용법
- "var(변수명)" --> var() 함수 사용.
*/
:root {
/* 전역 변수 */
--color-success: green;
--color-error:red;
--color-white: white;
}
.btn {
/* 지역 변수 */
--size: 8px;
color: var(--color-white);
border: none;
border-radius: 4px;
font-weight: bold;
padding: var(--size);
width: calc(var(--size) * 25);
}
.btn.success {
background-color: var(--color-success);
}
.btn.error {
background-color: var(--color-error);
}