[CSS] :is(), max(), min(), clamp(), inset, @supports

내가 모르는 새에 어느새 CSS가 이렇게 발전을 많이 했네. 

이전에 쓱 한번 읽어보고 그냥 말았는데 이제는 왠만한 모던 브라우저는 다 지원한단다. 

그럼 이제 써야지.

 

:is()

 

:is(h1, h2, h3) {
  font-weight: bold;
}

 

아래와 같은 뜻

h1,
h2,
h3 {
  font-weight: bold;
}

---

 

min()

width: min(100%, 200px);

 

"100%와 200px 중 더 작은 값을 width로 설정해라" 라는 뜻.

max-width: 200px; width: 100% 와 같은 뜻.

• 100% → 부모 요소의 전체 너비
• 200px → 고정된 최대 너비
• min(a, b) → a, b 중 더 작은 값을 적용

 

 

max()

width: max(100%, 200px);

 

"100%와 200px 중 더 큰 값을 width로 설정해라" 라는 뜻.

즉, 부모가 작을 경우엔 최소 200px 보장되고, 부모가 크면 100%로 따라갑니다.

• 100%: 부모 요소의 너비
• 200px: 고정 값
• max(a, b): a, b 중 더 큰 값을 선택

 

---

inset

inset: 0;

 

아래와 같은 뜻

top: 0;
right: 0;
bottom: 0;
left: 0;

 

 

 

---

Clamp()

 

font-size: clamp(14px, 4vw, 24px);

 

최소 14px, 최대 24px 사이에서 4vw(뷰포트 너비의 4%) 값을 따라 유동적으로 조절되게 해라

clamp(MIN, PREFERRED, MAX)

 

 

MIN	절대 최소값 (이 이하로는 줄어들지 않음)
PREFERRED	기본/반응형 값 (보통 vw, %, em 등)
MAX	절대 최대값 (이 이상으로는 커지지 않음)

 

 

---

 

@supports

/* 기본 스타일 (fallback) */
.box {
  width: 100%;
}

/* 최신 브라우저에서만 적용될 스타일 */
@supports (width: min(100%, 600px)) {
  .box {
    width: min(100%, 600px);
  }
}

 

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

@supports not (display: grid) {
  .layout {
    float: left;  /* 구형 브라우저용 대체 스타일 */
  }
}