[CSS] calc() 사칙연산으로 속성값 정하는 방법

calc()는 calculator의 줄임말로 알 수 있듯 값을 사칙연산으로 계산해 정할 수 있는 css 속성이다. JavaScript의 함수와 비슷한 성격을 가졌고, 연산자인 +(덧셈), -(뺄셈), *(곱셉), /(나눗셈)으로 계산할 수 있다. JavaScript를 이용해 값을 수정할 수도 있지만 css로도 간단하게 처리할 수 있는 구문은 최대한 css와 html선에서 해결하는 게 좋다.

 

mdn : https://developer.mozilla.org/ko/docs/Web/CSS/calc

코드리뷰

<div class="hero">
  <div class="ranking"><span>#</span>53</div>
</div>

.hero {
  width: 100%;
  position: relative;

  .ranking {
    position: absolute;
    top: 30px;
    left: -10px;

    &::after {
      content: "";
      width: calc(100% - 10px);
      height: 2px;
      background-color: #333;
      filter: blur(1px);
      position: absolute;
      right: 0;
      bottom: -2px;
    }
  }

이미지에 붙어있는 라벨에 그림자로 입체감을 주고 싶었다. 라벨은 div.hero의 공간에 맞춰 position: absolute; 를 이용해 위치를 정했기 때문에 box-shadow를 이용하기엔 어려움이 있었다.

 

그래서 라벨의 ::after 속성을 이용해 크기와 색상, 그림자처럼 보이기 위해 blur 필터를 지정해주었다. 그럼 아래와 같이 되는데 div.ranking이 왼쪽으로 -10px 튀어나와 있기 때문에 어색한 모양새가 된다.

 

 

이럴 때 calc()를 이용하면 된다. width 크기를 100%로 잡고 튀어나온 크기(10px)을 빼주면 된다. 이 때 연산자는 반드시 스페스바로 띄어줘야 한다.

 

결과물