꼭 알아야 할 CSS 기능

오늘 저는 스타일 작성 방식을 바꿔줄 5가지 멋진 CSS 기능에 대해 이야기하고 싶습니다. CSS를 배우고 있다면 이러한 기능을 사용하면 생활이 더 쉬워질 것입니다. "수동으로" 작업을 수행하는 방법과 이러한 도구를 사용하여 작업을 단순화할 수 있는 방법을 보여주는 예를 통해 하나씩 살펴보겠습니다.

1. calc(): CSS에서 직접 계산을 수행하시겠습니까?

요소의 크기를 조정하기 위해 수동으로 값을 더하거나 빼는 경우가 있나요? calc()를 사용하면 사전 계산 없이 스타일 시트에서 직접 수행할 수 있습니다.

calc()가 없는 예:

.container {
  width: 70%;
  margin: 20px;
}

calc()의 예:

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

calc()를 사용하면 백분율, 픽셀 등 다양한 측정 단위를 결합하여 보다 유연하고 적응 가능한 디자인을 얻을 수 있습니다.

---

2. 반복(): 그리드 생성을 단순화합니까?

그리드 레이아웃을 사용하는 경우 반복적인 열이나 행을 작성하는 경우가 있을 것입니다. 반복()을 사용하면 중복 코드를 방지하고 가독성을 높일 수 있습니다.

반복()이 없는 예:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

반복()의 예:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat()는 복잡한 그리드나 정의된 패턴이 있는 그리드에 이상적입니다

---

3. min(): 최대 동적 크기를 제어합니까?

min()을 사용하면 여러 값 중에서 가장 작은 크기를 지정할 수 있어 반응형 디자인에 적합합니다.

min()이 없는 예:

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

min()의 예:

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

min()을 사용하면 미디어 쿼리 규칙을 줄이고 더욱 유동적인 디자인을 얻을 수 있습니다.

---

4. 클램프(): 반응형 레이아웃에서 전체 크기 제어

clamp()를 사용하면 최소 및 최대 크기 범위를 정의할 수 있으며 화면 크기에 따라 크기를 조절해야 하는 글꼴 및 요소에 이상적입니다.

클램프()가 없는 예:

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

클램프()의 예:

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

clamp()를 사용하면 여러 미디어 쿼리 규칙을 제거하고 훨씬 더 유연한 레이아웃을 얻을 수 있습니다.

---

5. fit-content(): 콘텐츠에 맞게 너비를 맞춥니다.

fit-content()를 사용하면 요소의 너비를 콘텐츠 크기에 맞출 수 있지만 정의한 최대값 이상으로 확장되지는 않습니다. 이는 포함된 텍스트에 따라 동적으로 조정되지만 와이드 화면에서 지나치게 커지지 않는 버튼이나 요소를 만드는 데 매우 유용합니다.

fit-content()가 없는 예:

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(이 경우 버튼 텍스트가 너무 길면 버튼이 너무 길게 늘어나게 됩니다.)

fit-content()의 예:

.container {
  width: 70%;
  margin: 20px;
}

fit-content()를 사용하면 버튼이 텍스트 크기에 맞지만 너비가 200px를 초과하지 않습니다. 텍스트가 짧으면 버튼도 작아집니다.

위 내용은 꼭 알아야 할 CSS 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!