새로운 CSS로 삶이 더 편리해집니다

이 가이드의 목적은 최근 CSS에 도입된 혁신적이고 강력한 기능 모음을 소개하는 것입니다. 이 문서에서는 구문과 실제 사용 사례에 대한 개요를 제공하지만 각 기능에 대해 훨씬 더 깊이 있게 살펴볼 수 있습니다. 이를 출발점으로 삼아 최첨단 기술 발전에 대해 더 깊이 알아보세요.

1. 컨테이너 쿼리(크기)

크기 기반 컨테이너 쿼리란 무엇입니까?

크기 기반 컨테이너 쿼리를 사용하면 기존 미디어 쿼리처럼 전체 뷰포트의 크기에 의존하는 대신 상위 컨테이너의 크기를 기준으로 하위 요소에 스타일을 적용할 수 있습니다.

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

이것이 왜 중요합니까?

이것은 'CSS 믹스인' 개념을 생생하게 구현합니다. Sass 믹스인이 유지 관리성을 향상시키는 것처럼 스타일 기반 컨테이너 쿼리는 CSS의 기본 기능을 확장하여 캐스케이드를 고려하고 더 큰 유연성을 허용합니다.

브라우저 지원:

• 지원됨: Chrome 및 파생 제품.

• 출시 예정: Safari.

• 지원되지 않음: Firefox.

• 개선 사항: 제한적.

• 폴리필: 사용할 수 없습니다.

3. 컨테이너 유닛

컨테이너 유닛이란 무엇인가요?

컨테이너 단위는 뷰포트 대신 컨테이너 크기를 기준으로 크기를 계산하는 반응형 측정 단위(예: cqw, cqh, cqmin, cqmax)입니다. 이는 vw(뷰포트 너비의 1%)와 유사하게 작동하지만 범위는 컨테이너로 지정됩니다.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

이것이 왜 중요합니까?

내부 요소가 상위 컨테이너에 비례하여 확장되어야 하는 경우 컨테이너 단위는 깔끔한 CSS 전용 솔루션을 제공합니다. 일반적인 사용 사례는 카드 또는 모듈식 구성 요소 내부의 타이포그래피나 간격을 조정하는 것입니다.

브라우저 지원:

• 완전 지원: 최신 브라우저.

• 개선 사항: 예, 대체 기능이 있습니다.

• 폴리필: 사용 가능

4. :has() 의사 선택기

:has() 선택기가 무엇인가요?

:has() 의사 클래스를 사용하면 그 안에 있는 특정 하위 요소의 존재 여부에 따라 상위 요소의 스타일을 지정할 수 있습니다.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

이것이 왜 중요합니까?

:has() 선택자는 CSS에서 '부모 선택자' 역할을 효과적으로 수행하여 자녀를 기준으로 부모의 스타일을 지정할 수 있습니다. 예를 들어, 오류 메시지가 있는 경우에만 :has()를 사용하여 상위 양식 필드를 강조 표시할 수 있습니다.

브라우저 지원:

• 지원됨: 모든 주요 브라우저.

• 폴리필: JavaScript만 가능

*5. 전환 보기
*
보기 전환이란 무엇입니까?

이 기능에서는 두 가지 유형의 애니메이션을 소개합니다.

1. 단일 페이지 전환(JavaScript 필요).

2. 다중 페이지 전환(CSS 전용).
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*이것이 왜 중요합니까?
*
전환은 상태가 변경되는 동안 요소에 애니메이션을 적용하여 상호 작용을 더욱 원활하게 만들어 사용자 경험을 향상시킵니다. 각 단계를 수동으로 정의하지 않고도 애니메이션이 시작 상태와 종료 상태 사이를 보간하는 "트위닝"을 사용합니다.

브라우저 지원:

• 지원됨: Chrome 및 파생 제품.

• 지원되지 않음: Safari, Firefox.

• 개선 사항: 예, 대체 애니메이션이 포함됩니다.

6. 중첩

네스팅이란 무엇인가요?

CSS 중첩을 사용하면 상위 규칙 내에 하위 선택기를 작성할 수 있으므로 코드가 더 깔끔하고 유지 관리가 쉬워집니다.

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

이것이 왜 중요합니까?

중첩은 CSS의 중복성을 줄여 관련 스타일을 그룹화합니다. 그러나 이를 과도하게 사용하면 선택자가 지나치게 특정되어 재사용성이 저하될 수 있습니다.

브라우저 지원:

• 완전 지원: 최신 브라우저.

7. 스크롤 기반 애니메이션

스크롤 기반 애니메이션이란 무엇입니까?

이러한 애니메이션은 스크롤링과 연결되어 있으며 JavaScript에 의존하지 않고 CSS를 사용하여 구현할 수 있습니다.

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

이것이 왜 중요합니까?

진행률 표시기부터 시차 효과까지, 스크롤 기반 애니메이션은 상호작용성을 향상시키고 성능이 중요한 작업에서 JavaScript에 대한 의존도를 줄여줍니다.

브라우저 지원:

• 지원: Chrome

• 출시 예정: Firefox.

8. 서브그리드

서브그리드란 무엇인가요?

하위 그리드 값을 사용하면 그리드 정의를 중복하지 않고도 하위 그리드 항목을 상위 그리드의 행이나 열에 정렬할 수 있습니다.

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

이것이 왜 중요합니까?

Subgrid는 중첩된 그리드 구조 전반에 걸쳐 일관된 정렬을 보장하므로 복잡한 레이아웃을 더 쉽게 유지 관리할 수 있습니다.

브라우저 지원:

• 완전 지원: 모든 최신 브라우저.

마지막 생각

CSS는 계속해서 놀라운 속도로 발전하고 있습니다. 컨테이너 쿼리, 뷰 전환 및 하위 그리드와 같은 기능을 통해 언어는 최신 웹 개발에 더욱 강력하고 직관적이 됩니다. 상대 색상 구문, 범위가 지정된 CSS, 그리고 훨씬 더 뛰어난 디자인 가능성을 약속하는 와 같은 새로운 HTML 요소를 포함한 향후 개발에 주목하세요.