1. calc() 함수
- CSS에서 수치화된 숫자 값을 사칙 연산자를 사용하여 계산을 할 수 있도록 해주는 함수
- 보통 %로 처리된 것을 px로 연산할 때 유용하게 사용할 수 있다.
- 사용할 수 있는 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기)가 있다.
width: calc(100% - 20px);
font-size: calc(100% - 10px);
background-position: calc(100% - 20px) top;- 위에 보이는 것과 같이 다양한 속성에 사용 가능
calc(수치 - 수치);- 사칙연산자 사이는 띄어 써야 인식 가능, 특히 +와 -는 반드시 띄어쓰기를 해야 가능
2. calc() 함수 예제
1) width에 calc() 함수 적용
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>calc() 함수</title>
<style>
*{ padding: 0; margin: 0; } /* 태그별 여백 없앰 */
div{
height: 300px; margin: 0 auto 20px;
}
.box01{
width: 1000px; /* 가로 크기를 절대적으로 고정 */
background-color: pink;
}
.box02{
width: calc(100% - 100px); /* 가로 크기를 전체 100%에서 100px빼기 */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>- .box01은 절대적으로 1000px이기 때문에 창 사이즈를 조절하면 좌우 여백이 항상 달라집니다.
- .box02는 상대적으로 100%에서 100px을 뺏기 때문에 창 사이즈를 조절해도 좌우 여백이 항상 50px로 고정됩니다.
## 결과
- 핑크색 박스는 창 사이즈에 따라 좌우 여백이 달라집니다.
- lightblue박스는 창 사이즈에 따라 좌우 여백이 바뀌지 않고 50px로 고정됩니다.
2) background-position을 통한 배경 이미지 위치 이동
- 요소에 배경 이미지 위치를 이렇게 하고 싶다고 봅시다.
- background-position의 기본값은 좌측 상단이기 때문에 왼쪽에서 이미지가 이동할 만큼 계산, 위쪽에서 떨어질 만큼 계산해야 해서 많이 복잡해집니다.
## 소스 제공
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>calc() 함수</title>
<style>
*{ padding: 0; margin: 0; } /* 태그별 여백 없앰 */
div{
float: left; margin: 50px;
width: 350px; height: 400px;
background-color: #435174;
background-image: url(calendar.png);
background-repeat: no-repeat;
}
.box01{
background-position: 210px 270px;
}
.box02{
background-position: calc(100% - 30px) calc(100% - 30px);
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>- 첫번째 .box01은 우측 하단에서 30px씩 여백을 주기 위해 계산을 했습니다.
- 350 - 30 - 110(이미지 폭) = 210 //x좌표 계산
- 400 - 30 - 100(이미지 높이) = 270 //y좌표 계산
- 위와 같이 계산하려면 어려워서 .box02는 100%로 처리하면 우측 하단으로 붙으니 거기서 30px씩 빼는 계산을 사용했습니다.
## 결과
- 수학적 계산 없이도 같은 위치에 오는 것이 확인되시죠?
3. max() 함수
- max() 함수는 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다.
- 보통 px로 된 절대적인 값 중 선택하는 것이 아니라 % 와 px 중 선택하는 것이 일반적입니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Math Function</title>
<style>
#box{
width: max(50%, 500px);
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>- 위에 작성된 width: max(50%, 500px); 는 50% 와 500px 중 큰 숫자로 처리하라는 의미입니다.
- 그러니까 창 사이즈가 약 1000px이상이면 창의 50%로 처리가 되고, 그 이하면 500px로 처리가 되는 겁니다.
## 결과 보기
- 위의 움짤은 1920 해상도에서 테스트한 것입니다. 화면의 반 이상에서는 계속 크기가 줄고 그 이후부터는 고정으로 되는 것이 잘 보일 겁니다.
4. min() 함수
- max() 함수는 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용합니다.
- 보통 px로 된 절대적인 값 중 선택하는 것이 아니라 %와 px 중 선택하는 것이 일반적입니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Math Function</title>
<style>
#box{
width: min(50%, 500px);
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>- 위에 작성된 width: min(50%, 500px); 는 50%와 500px 중 작은 숫자로 처리하라는 의미입니다.
- 그러니까 창 사이즈가 약 1000px이상이면 창의 500px로 처리가 되고, 그 이하면 50%로 처리가 되는 겁니다.
## 결과 보기
- 위의 움짤은 1920 해상도에서 테스트한 것입니다. 화면의 반 이상에서는 500px로 처리돼서 고정으로 보이고, 그 이후부터는 반으로 처리돼서 계속 주는 것이 확인됩니다.
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 28강 CSS Grid 레이아웃 모드 - 오쌤의 니가스터디 (0) | 2020.11.03 |
|---|---|
| [CSS3강좌] 27강 CSS flexbox - 오쌤의 니가스터디 (0) | 2020.10.26 |
| [CSS3강좌] 25강 배경이미지 고정처리 - OSSAM강좌 (0) | 2020.06.03 |
| [CSS3강좌] 24강 animation속성 - OSSAM강좌 (0) | 2020.05.29 |
| [CSS3강좌] 23강 transform(변형속성) - 3D변형 - OSSAM강좌 (0) | 2020.05.28 |
