레슨
시작
학습 시작
CodeGym /행동 /Frontend SELF KO /함수 calc()

함수 calc()

Frontend SELF KO
레벨 32 , 레슨 0
사용 가능

6.1 함수 calc()의 기본 기능

calc() 함수는 CSS에서 수학 연산을 수행할 수 있게 해줘서, 보다 유연하고 적응력 있는 스타일을 만들 수 있게 해줘. 특히 다양한 단위를 조합하거나 동적으로 값(사이즈, 여백, 경계 등)을 계산할 때 유용해.

calc() 함수는 더하기, 빼기, 곱하기, 나누기 네 가지 기본 수학 연산을 수행할 수 있어. 이 연산들은 픽셀, 퍼센트, em, rem 같은 다양한 단위를 조합할 때 사용할 수 있어서 적응력 있고 동적인 스타일을 만드는 데 도움을 줘.

구문:

    
      셀렉터 {
        속성: calc(표현식);
      }

연산 예제

  • 더하기: calc(100% + 20px)
  • 빼기: calc(50% - 10px)
  • 곱하기: calc(10px * 2)
  • 나누기: calc(100px / 2)

예제:

HTML 
    
      <div>
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
CSS 
    
      div {
        width: calc(100% - 50px);
        margin: calc(1em + 10px);
        background: lightblue;
      }

이 예시에서는:

  • 요소의 너비는 100%에서 50px을 뺀 값으로 계산돼
  • 마진은 1em과 10px의 합계로 계산돼

6.2 calc() 함수의 사용 예제

1. 더하기와 빼기

calc() 함수는 보통 요소의 크기와 여백을 보다 정확하게 제어하기 위해 더하기와 빼기에 자주 사용돼.

예제 1: 퍼센트와 픽셀 더하기

이 예제에서 컨테이너의 너비는 부모 요소의 100% 너비에서 40픽셀을 뺀 값으로 계산돼. 이는 여백과 컨테이너 내의 다른 요소를 고려할 수 있게 해줘:

HTML 
    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
CSS 
    
      .container {
        width: calc(100% - 40px);
        margin: 20px;
        background: lightgreen;
      }

예제 2: 고정 값을 뺀 값

이 예제에서 사이드바의 너비는 부모 요소의 100% 너비에서 250픽셀을 뺀 값으로 계산돼, 이는 주요 콘텐츠를 위한 공간을 남겨줘:

HTML 
    
      <div class="sidebar">
        <ul>
          <li><a href="#"></a>Article 1</li>
          <li><a href="#"></a>Article 2</li>
          <li><a href="#"></a>Article 3</li>
        </ul>
      </div>
CSS 
    
      .sidebar {
        width: calc(100% - 250px);
        background: tomato;
      }

2. 곱하기와 나누기

calc() 함수는 곱하기와 나누기도 할 수 있어서, 비율에 맞는 크기와 여백을 만드는 데 유용해.

예제 3: 곱하기

이 예제에서 요소의 높이는 20픽셀에 3을 곱한 값, 즉 60픽셀로 계산돼:

HTML 
    
      <div class="element">Element</div>
CSS 
    
      .element {
        height: calc(20px * 3);
        background: lightpink;
      }

예제 4: 나누기

이 예제에서 박스의 너비는 부모 요소의 너비의 3분의 1로 계산돼, 세 개의 동일한 열을 만들 수 있게 해줘:

HTML 
    
      <div class="box">
        Box
      </div>
CSS 
    
      .box {
        width: calc(100% / 3);
        background: yellow;
      }

6.3 다양한 단위의 결합

calc() 함수의 핵심 기능 중 하나는 다양한 단위의 결합이 가능하다는 거야. 이를 통해 적응력 있고 유연한 스타일을 만들 수 있어.

예제 5: 퍼센트와 픽셀 결합

이 예제에서 헤더의 높이는 뷰포트 높이(viewport height)의 100%에서 50픽셀을 뺀 값으로 계산돼서, 고정된 여백을 고려할 수 있게 해줘.

HTML 
    
      <header class="header">
        <nav>
          <ul>
            <li>메인</li>
            <li>소개</li>
            <li>연락처</li>
          </ul>
        </nav>
      </header>
CSS 
    
      .header {
        height: calc(100vh - 100px);

        background: lightgreen;
      }

      nav ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }

동적 크기 계산

calc() 함수는 요소의 크기를 동적으로 계산할 때 유용해서, 디자인을 보다 적응적이고 유연하게 만들어줘.

예제 6: 동적 너비 계산

이 예제에서 콘텐츠의 너비는 부모 요소의 너비의 100%에서 각각 20픽셀씩 두 개의 여백을 뺀 값으로 계산돼:

HTML 
    
      <div class="content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
CSS 
    
      .content {
        width: calc(100% - 2 * 20px);
        background: lightgreen;
      }

6.4 미디어 쿼리에서 calc()의 사용

calc() 함수는 미디어 쿼리 내에서 적응형 스타일을 만드는데 사용될 수 있어.

예제 7: 미디어 쿼리에서 적응형 여백

이 예제에서 컨테이너의 여백은 뷰포트 너비가 최소 600픽셀에 도달하면 증가해:

HTML 
    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
CSS 
    
      .container {
        padding: 10px;
        background: tomato;
      }

      @media (min-width: 600px) {
        .container {
          padding: calc(10px + 2vw);
        }
      }

예제 8: 미디어 쿼리에서 적응형 크기

이 예제에서는 컨테이너의 여백이 600픽셀 너비의 화면에서 반으로 줄어들어, 디자인의 적응성을 향상시켜:

HTML 
    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
CSS 
    
      :root {
        --main-padding: 20px;
      }

      .container {
        padding: var(--main-padding);
        background: yellow;
      }

      @media (max-width: 600px) {
        .container {
          padding: calc(var(--main-padding) / 2);
        }
      }

6.5 장점과 단점

calc() 함수의 장점:

1. 유연성. calc() 함수는 다양한 단위를 조합하고 수학 연산을 수행해 보다 유연하고 적응력 있는 디자인을 만들 수 있게 해줘.

2. 동적 스타일 관리. calc()를 통해 요소의 크기와 여백을 동적으로 변경할 수 있어서, 디자인을 더 응답적이고 적응력 있게 만들어줘.

3. 복잡한 계산의 단순화. calc() 함수는 CSS에서 복잡한 계산을 간단하게 수행해줘서, 간단한 수학 연산에 JavaScript를 사용할 필요를 줄여줘.

calc() 함수의 제한 및 특징:

1. 연산자 주변 공백. calc() 표현식에서는 연산자 주변에 반드시 공백이 있어야 해. 예를 들어, calc(100% - 50px)는 맞고, calc(100%-50px)는 오류를 발생시켜.

2. 브라우저 호환성. calc() 함수는 대부분의 현대 브라우저에서 지원되지만, 오래된 버전에서는 호환성 검토가 필요할 수 있어.

3. 성능. calc() 함수 사용은 특히 복잡한 계산이나 자주 값이 변경될 때 페이지 렌더링 시간을 약간 증가시킬 수 있어.

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION