구문
property: calc(expression);아래의 경우처럼 260/3을 할 경우 86.666...으로 나누어 떨어지지 않을 때 유용
속성 값을 직접 계산하지 않고 수식을 입력하면 알아보기 더 편하다.
86.666666px로 할 경우 므슨 뜻인지 한 눈에 알기 어렵다.
계산 가능한 연산자
- +
- -
- *
- /
<style>
.box {
display: flex;
width: 300px;
height: 300px;
background-color: blueviolet;
box-sizing: border-box;
padding: 10px;
}
.box2 {
width: calc(260px / 3);
height: 280px;
background-color: goldenrod;
box-sizing: border-box;
padding: 10px;
}
.box2:nth-child(n + 2) {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>'CSS' 카테고리의 다른 글
| CSS 결합자 (0) | 2022.07.27 |
|---|---|
| CSS 선택기 (0) | 2022.07.27 |
| CSS의 Cascading은 무엇인가 (종속, 특이성, 상속) (0) | 2022.07.26 |
| css transfrom rotate translate scale (0) | 2022.07.26 |
| css의 정의와 기본 사용법 (0) | 2022.06.29 |