반응형
개발을 하던중
어떠한 버튼이 고정 80px인데 그 옆에 float:left 된 친구는 width:100% 라서 이를 조정하는 방법이 없을까 하다가
calc() 라는 기능을 알게 되었다.
방법은 간단하다.
<div style="width: calc(100% - 80px);">
some contents...
</div>이러한 방식으로 사용하면된다.
예시 코드를 보자면
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>calc()</title>
</head>
<style>
#div1 {
height: 50px;
background:red;
margin-bottom:20px;width:100%;
}
#div2 {
height: 50px;
background:blue;
margin-bottom:20px;width: calc(100% - 20%);
}
#div3 {
height: 50px;
background:green;
margin-bottom:20px;width: calc(100% - 50px);
}
#div4 {
height: 50px;
background:red;
margin-bottom:20px;width: calc(100% / 3);
}
</style>
<body>
<div id="div1">width 100%</div>
<div id="div2" style="color:white;">width calc(100% - 20%)</div>
<div id="div3">width calc(100% - 50px)</div>
<div id="div4">width calc(100% / 3)</div>
</body>
</html>위와 같은 코드를 작성했을때
위와 같은 식으로 알아서 계산해서 가져다 준다.
상대값끼리 계산도 ok
상대값과 절대값도 ok
+, -, /, * 등의 사칙연산도 가능하다.
단 주의할점
*연산 앞 뒤로 반드시 공백이 있어야 합니다.
ex) calc(100%-80px)
하면 오류납니다.
반응형
'Language > web' 카테고리의 다른 글
| [JSON][JAVA] content-type: application/json 으로 리턴하기 (0) | 2022.09.06 |
|---|---|
| [JavaScript] 마스킹 처리하기 (0) | 2022.05.23 |
| [JavaScript] 문자열 자르기 (slice, substring, substr) (0) | 2022.02.03 |
| [JavaScript] Converting circular structure to JSON 에러 (0) | 2021.12.16 |
| [JQuery] jQuery Validation Plugin 사용하기 (0) | 2021.12.14 |
댓글