4.1 퍼센트 값
퍼센트 값과 상대적인 단위는 CSS에서 유연하고 반응형 레이아웃을 만드는 데 중요한 역할을 해. 이걸로 요소가 다양한 화면 크기와 조건 변화에 적응할 수 있게 해줘서 더 나은 호환성과 사용 편의성을 보장해.
퍼센트 값은 요소의 크기를 부모 요소의 크기에 상대적으로 지정하는 데 사용돼. 이건 레이아웃을 더 유연하고 적응 가능하게 만들어 줘.
% 사용 예시:
CSS
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* 비율 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* 비율 2:1 */
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<div style="min-height: 200px;">
<div class="container">
<div class="box">콘텐츠</div>
</div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<div class="container">
<div class="box">콘텐츠</div>
</div>
</body>
</html>
코드 설명:
.container: 부모 요소의 너비에서 80%로 설정하여 중앙에 위치하도록margin: 0 auto로 설정.box: 컨테이너 너비의 50%로 블록의 너비를 설정. 높이는padding-top을 통해 1:2 비율을 보장해
4.2 상대적인 단위 (em과 rem)
em 단위는 부모 요소의 폰트 크기에 따라 달라지는 상대적인 단위야. 만약 부모 폰트 크기가 변한다면, em 값도 변해.
em 사용 예시:
CSS
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
rem 단위는 루트 요소의 폰트 크기에 따라 달라지는 상대적인 단위야 (html). 이 단위는 부모 요소와 상관 없기 때문에 더 예측 가능하고 확장 가능한 레이아웃을 만드는 데 편리해.
rem 사용 예시:
HTML
<div class="container">
어떤 텍스트가 컨테이너 안에 있어
<div class="box">
어떤 텍스트가 박스 안에 있어
</div>
</div>
CSS
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
em과 rem 비교:
em: 부모 요소의 폰트 크기에 따라 다르고, 중첩 시 계단식 효과가 있을 수 있어rem: 루트 요소 (html)의 폰트 크기에 따라 다르기 때문에 더 예측 가능하고 사용하기 쉬워
4.3 %의 결합 사용
상대적인 단위 (em과 rem)를 퍼센트와 결합하여 사용하면 유연하고 적응력이 있는 레이아웃을 만들 수 있어, 어느 기기에서도 제대로 표시될 거야.
예시: %의 결합 사용
퍼센트와 상대적인 단위를 사용하여 요소의 크기를 정의하는 레이아웃을 만들어볼게.
CSS
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<div class="container">
<div class="header">헤더</div>
<div class="content">
<div class="sidebar">사이드바</div>
<div class="main">메인 콘텐츠</div>
</div>
<div class="footer">푸터</div>
</div>
</body>
</html>
코드 설명:
html: 문서 전체의 기본 폰트 크기를 설정해.container: 퍼센트를 사용하여 컨테이너의 너비를 설정하고 페이지 중앙에 위치시켜.header와.footer:rem으로 간격을 설정하여 예측 가능하게 만들어.content: Flexbox를 사용하여 사이드바와 메인 콘텐츠를 간격을 두고 배치해.sidebar와.main: 퍼센트를 사용하여 칼럼의 너비를 설정하고rem으로 간격을 설정해
GO TO FULL VERSION