새소식
반응형
CSS
calc() 함수
- -
반응형
calc()
CSS 에서 수치화된 숫자값을 사칙 연산자를 사용하여 계산할 수 있도록 해주는 함수이다.
보통 % 로 되어 있는 것을 px 값으로 연산할 때 유용하다.
사용 가능한 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기) 가 있다.
구문
calc(수치 - 수치);
calc 함수의 주의사항은 덧셈과 뺄셈은 수치와 사칙연산 사이에는 무조건 띄어쓰기가 있어야 한다.
곱셈과 나눗셈은 띄어쓰기가 존재하지 않아도 된다.
예시)
width: calc(100% - 100px);
left: calc(50% - 320px);
font-size: (100% - 10px);
예제)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
padding: 10px 0px;
border: 1px solid #dadada;
}
.left {
width: 400px;
position: fixed;
left: calc(50% - 720px);
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 640px;
height: 100%;
margin: 0 auto;
text-align: center;
}
.right {
width: 400px;
position: fixed;
left: calc(50% + 320px);
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="left"><code>LEFT 입니다.</code></div>
<div class="right"><code>RIGHT 입니다.</code></div>
<div class="center"><code>CENTER 입니다.</code></div>
</body>
</html>
반응형
'CSS' 카테고리의 다른 글
| 미디어쿼리(Media Query) 와 뷰포트(viewport) (0) | 2024.08.07 |
|---|---|
| counter-reset, counter-increment 로 CSS 일련 번호 붙이기 (0) | 2023.09.20 |
| white-space 속성 (0) | 2023.09.11 |
| CSS 선택자(Selector) (0) | 2022.05.19 |
| 화면레이아웃 display:flex (0) | 2021.11.02 |
Contents
소중한 공감 감사합니다