CSS 기능

사용 가능

5.1 함수 calc()

CSS 함수는 스타일 파일 내에서 다양한 작업을 수행할 수 있는 유용한 도구를 제공합니다. calc(), min(), max(), clamp() 함수는 특히 반응형 및 유연한 디자인을 만드는 데 유용하며, 수학적 연산과 조건부 값 계산을 수행할 수 있게 해줍니다.

calc() 함수는 CSS에서 수학적 연산을 수행하는 데 사용됩니다. 이 함수는 픽셀(px), 백분율(%), em, rem 등과 같은 서로 다른 단위를 하나의 표현식으로 결합할 수 있습니다.

문법:

선택자 {
  속성: calc(표현식);
}

사용 예

이 예시에서 블록의 너비는 부모 요소의 너비의 50%에서 20픽셀을 뺀 값으로 계산됩니다:

CSS
/* 블록의 너비는 부모 요소의 절반에서 20px을 뺀 값 */

.block {
  width: calc(50% - 20px);
}

5.2 함수 min(), max() 및 clamp()

CSS에서의 min(), max(), clamp() 함수

함수 min()

min() 함수는 여러 값을 받고 그중 가장 작은 값을 반환합니다. 컨텍스트에 따라 변하는 유연한 크기를 만드는 데 유용합니다.

문법:

선택자 {
  속성: min(값1, 값2);
}

예시

이 예시에서는 컨테이너의 너비가 50% 또는 300픽셀 중 작은 값으로 설정됩니다:

CSS
.container {
  width: min(50%, 300px);
}

함수 max()

max() 함수는 여러 값을 받고 그중 가장 큰 값을 반환합니다. 최소 크기를 설정하고 반응성을 보장하는 데 유용합니다.

함수 clamp()

clamp() 함수는 최소값, 선호값 및 최대값 세 가지 값을 받습니다. 최소와 최대 사이에서 선호하는 값에 가까운 값을 제한합니다.

5.3 CSS 함수 사용의 장점

CSS 함수 사용의 장점:

  • 유연성. CSS 함수는 동적으로 값을 계산할 수 있어 더 유연하고 반응성 있는 스타일을 만들 수 있게 해줍니다.
  • 반응형 디자인의 간소화. min(), max(), clamp() 함수는 특정 한계 내에서 값을 제한하여 반응형 디자인을 만드는 것을 크게 간소화합니다.
  • 미디어 쿼리 필요성 감소. 이러한 함수를 사용하면 다양한 화면 크기에 대한 스타일 조정을 위한 미디어 쿼리의 수를 줄일 수 있습니다.

5.4 전체 구현 예시

CSS
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.block {
  background-color: #3498db;
  color: white;
  padding: 10px;
  text-align: center;
}

.block:nth-child(1) {
  width: calc(50% - 20px);
}

.block:nth-child(2) {
  width: min(300px, 100%);
}

.block:nth-child(3) {
  width: max(200px, 50%);
}

.text {
  font-size: clamp(12px, 2vw, 24px);
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 함수 사용 예제</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="block">블록의 너비 calc(50% - 20px)</div>
      <div class="block">블록의 너비 min(300px, 100%)</div>
      <div class="block">블록의 너비 max(200px, 50%)</div>
      <p class="text">글꼴 크기가 clamp(12px, 2vw, 24px)인 텍스트</p>
    </div>
  </body>
</html>
1
과제
Frontend SELF KO,  레벨 31레슨 4
잠금
calc()로 너비 설정
calc()로 너비 설정
1
과제
Frontend SELF KO,  레벨 31레슨 4
잠금
적응형 너비 min()
적응형 너비 min()
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다