2025년 js를 대체하는 새로운 css기능들

2025년 js를 대체하는 새로운 css기능들 

Live Validation vs Late Validation Example

Live Validation

Enter your name (required):

This field is required.

Late Validation

Enter your email (required):

Please enter a valid email address.

HTML CSS JavaScript Python

<!-- Live Validation Example --> <section> <h2>Live Validation</h2> <form> <label for="live-input">Enter your name (required):</label><br> <input type="text" id="live-input" required placeholder="Type here..."> <p class="feedback">This field is required.</p> </form> </section> <!-- Late Validation Example --> <section> <h2>Late Validation</h2> <form> <label for="late-input">Enter your email (required):</label><br> <input type="email" id="late-input" required placeholder="Type your email..."> <p class="feedback">Please enter a valid email address.</p> </form> </section>

CSS 스타일 쿼리(style queries) 설명 및 예제

스타일 쿼리란?
스타일 쿼리는 특정 요소의 부모 컨테이너 스타일(예: CSS 속성 값 또는 커스텀 속성 값)을 기반으로 하위 요소에 조건부 스타일을 적용할 수 있는 기능입니다. 이는 컨테이너 크기 쿼리와 유사하지만, 크기 대신 스타일 속성을 기준으로 작동합니다. 현재는 CSS 커스텀 속성(`--variable`)만 지원되며, 실험적인 기능으로 일부 브라우저(예: Chrome)에서만 사용 가능합니다.

사용법

• `@container` 규칙과 `style()` 함수를 사용하여 컨테이너의 스타일 속성을 쿼리합니다.
• 조건이 참일 경우, 해당 조건에 맞는 스타일을 하위 요소에 적용합니다.

CSS 스타일 쿼리 예제

블루 테마 컨테이너

이 컨텐츠는 블루 테마의 배경과 텍스트 색상을 가집니다.

레드 테마 컨테이너

이 컨텐츠는 레드 테마의 배경과 텍스트 색상을 가집니다.

※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!

daily-inklings 전체 글 보기

이글은 1월 07, 2025 에 최종으로 업데이트된 글입니다.