calc()를 사용하여 CSS 속성 값으로 계산식을 지정할 수 있다. 덧셈(+), 뺄셈(-), 나눗셈(/), 곱셈(*)이 가능하며 length, frequency, angle, time, percentage, number, integer을 받는 속성의 값으로 사용할 수 있다. 숫자와 연산자 사이는 반드시 띄어쓰기를 해야한다.
- calc(숫자 연산자 숫자)
아래의 예제는 div들의 width를 100%에서 20% 뺀 값으로 지정했고, height를 100% 에서 3을 나눈 값으로 지정한 예제다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--h1-color: rgb(168, 0, 0);
--background-color: lightgray;
--box-border: 1px solid rgb(70, 70, 70);
--box-padding: 10px;
--width: 100%;
}
div{
background-color: var(--background-color);
border: var(--box-border);
padding: var(--box-padding);
margin: 10px auto;
width: calc(var(--width) - 20%);
height: calc(100vh / 3);
}
h1{
color:var(--h1-color);
}
</style>
</head>
<body>
<div id="div1">
<h1>공지사항</h1>
<p>아래와 같은 사항에 대해 공지를 합니다.</p>
</div>
<div id="div2">
<h1>문의사항</h1>
<p>문의사항에 대해서는 관리실로 문의해주세요.</p>
</div>
</body>
</html>
아래의 사진처럼 calc()를 통해서 창의 크기가 변경되어도 계산식에 의해 div의 양쪽 여백이 유지되는 것을 볼 수 있다.
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 스타일의 우선순위를 정해보자(@layer) (0) | 2024.07.13 |
|---|---|
| CSS의 사용자 지정 속성(CSS Custom properties) 설정하기 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 2. 이름을 사용한 그리드 배치 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 (0) | 2024.07.13 |
| CSS에서 수직 위치를 정해보자(z-index) (0) | 2024.07.13 |
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 (0) | 2024.07.10 |