[CSS] width 퍼센트(%) 계산 width:calc()

CSS

[CSS] width 퍼센트(%) 계산 width:calc()

chsr 2020. 5. 11. 13:18

728x90

우리가 흔히 width 값을 쓸 때 %를 사용하거나, px을 많이 사용하는데
100%를 3등분 하는데 숫자가 딱 떨어지지 않을 때 사용할 수 있습니다

사용 방법

div {width:calc(100% -33%);}

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>calc()</title>
</head>
<style>
  * { margin:0; padding:0;}
  .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:orange; margin-bottom:20px; width:calc(100% - 20px);}
  .div4 { height:50px; background:green; margin-bottom:20px; width:calc(100% / 3);}
</style>
<body>
  <div class="div1">width:100%;</div>
  <div class="div2">width:calc(100% - 20%);</div>
  <div class="div3">width:calc(100% - 20px);</div>
  <div class="div4">width:calc(100% / 3);</div>
</body>
</html>

실제 적용 시

출처: https://blog.naver.com/nsoft21/221060975688

728x90