fe (2) 썸네일형 리스트형 FE 기능 - CSS 컨테이너 쿼리(Container Queries)와 스타일 쿼리(Style Queries) This is a box 컨테이너 쿼리(Container Queries)는 요소가 속한 컨테이너의 크기와 스타일을 기준으로 CSS를 적용할 수 있는 새로운 기능입니다. 이는 기존의 뷰포트를 기준으로 스타일을 적용하는 미디어 쿼리와는 다릅니다.특히, 재사용 가능한 컴포넌트를 다양한 변형 버전으로 활용하거나, 컨테이너 크기별 디자인 변화를 적용할 때 매우 유용합니다.1. 주요 특징컨테이너 크기 기반 스타일링컨테이너의 width, height 등의 크기를 기준으로 스타일을 적용할 수 있습니다.미디어 쿼리처럼 뷰포트 전체를 기준으로 하지 않아도 됩니다.스타일 쿼리컨테이너의 특정 CSS 커스텀 속성을 기반으로 스타일을 변경할 수 있습니다.현재는 CSS **커스텀 속성(--property-name)**에만 작동하.. FE 기능 - CSS 앵커 포지셔닝 API 사용하기 CSS 앵커 포지셔닝(Anchor Positioning) API는 HTML 요소를 특정 기준(anchor) 요소를 기준으로 위치를 지정할 수 있도록 해주는 새로운 CSS 기능입니다. 이를 활용하면 툴팁, 팝오버, 주석 라벨, 동적 차트 레이블 등을 쉽게 구현할 수 있습니다.CSS 앵커 포지셔닝 API의 주요 특징기준(anchor) 요소 설정특정 HTML 요소를 기준(anchor)으로 지정하고, 다른 요소(자식 요소)를 이 기준에 상대적으로 배치할 수 있습니다.예를 들어, 버튼 위에 툴팁을 띄우거나, 특정 위치에 팝오버를 표시할 때 유용합니다.레이어 인터페이스 구현이 API를 사용하면 제3자 라이브러리 없이도 툴팁이나 팝오버 같은 레이어 기반 인터페이스를 간단히 만들 수 있습니다.여러 기준 요소 연결하나의.. 이전 1 다음
