Chat Conversation

참여자: User, QueryPie2025. 8. 22.

User오전 12:49

내 CSS 지식은 CSS3에 멈춰있어. 현재 2025 년 CSS 의 발전을 따라잡을 수 있도록, 새로 학습해야할 내용들에 대해서 정리해줘 참고할수있는 레퍼런스 주소도 함께 정리해줘

QueryPie오전 12:50

CSS3 이후 현재까지의 발전 상황을 파악하기 위해 최신 CSS 기능들과 학습 자료를 검색해보겠습니다. CSS3 이후 2025년까지 CSS는 혁명적인 변화를 겪었습니다. 현대 웹 개발에 필수적인 새로운 기능들을 체계적으로 정리해드리겠습니다.

핵심 새 기능들

1. Container Queries (컨테이너 쿼리)

미디어 쿼리를 뛰어넘는 반응형 디자인의 게임체인저입니다.

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

2. CSS Subgrid

Grid 레이아웃의 완성체로, 중첩된 그리드에서 부모의 그리드 라인을 상속받을 수 있습니다.

.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.child-grid {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* 부모 그리드 상속 */
}

3. :has() 선택자 (부모 선택자)

JavaScript 없이도 자식 요소를 기반으로 부모를 선택할 수 있습니다.

/* 이미지가 있는 카드에만 스타일 적용 */
.card:has(img) {
  border: 2px solid gold;
}

/* 체크된 라디오 버튼의 부모 라벨 스타일링 */
label:has(input[type="radio"]:checked) {
  background-color: #e3f2fd;
}

4. CSS Nesting (네스팅)

Sass 없이도 중첩된 CSS 작성이 가능합니다.

.button {
  background: blue;
  color: white;
  
  &:hover {
    background: darkblue;
  }
  
  .icon {
    margin-right: 8px;
  }
}

5. Cascade Layers (@layer)

CSS 우선순위를 명시적으로 관리할 수 있습니다.

@layer reset, base, components, utilities;

@layer base {
  h1 { font-size: 2rem; }
}

@layer components {
  .button { background: blue; }
}

고급 기능들

6. Logical Properties (논리적 속성)

국제화를 고려한 방향 독립적 CSS 작성이 가능합니다.

.element {
  margin-inline-start: 20px; /* 좌/우가 아닌 시작 지점 */
  padding-block: 10px;       /* 상/하가 아닌 블록 축 */
  border-inline-end: 1px solid #ccc;
}

7. Container Query Units

컨테이너 크기에 기반한 단위들입니다.

.card {
  font-size: 4cqw; /* 컨테이너 너비의 4% */
  padding: 2cqh;   /* 컨테이너 높이의 2% */
}

8. 새로운 Color Functions

더 정확하고 접근성 있는 색상 제어가 가능합니다.

.element {
  color: oklch(70% 0.15 180); /* 더 정확한 색상 공간 */
  background: color-mix(in srgb, blue 30%, red 70%);
}

9. View Transitions API

JavaScript 없이도 페이지 전환 애니메이션을 구현할 수 있습니다.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

10. @property (커스텀 속성 정의)

CSS 변수의 타입을 명시적으로 정의할 수 있습니다.

@property --color-primary {
  syntax: '<color>';
  initial-value: #007bff;
  inherits: false;
}

Chat Conversation

핵심 새 기능들

1. Container Queries (컨테이너 쿼리)

2. CSS Subgrid

3. :has() 선택자 (부모 선택자)

4. CSS Nesting (네스팅)

5. Cascade Layers (@layer)

고급 기능들

6. Logical Properties (논리적 속성)

7. Container Query Units

8. 새로운 Color Functions

9. View Transitions API

10. @property (커스텀 속성 정의)

추천 학습 리소스

공식 문서 및 명세

실무 중심 리소스

인터랙티브 학습

유튜브 채널

브라우저 지원 체크