ungju 님의 블로그

반응형 쿼리, 컨테이너 쿼리(Container Query)컨테이너 쿼리(Container Query) 라는 반응형 기능이 있다. 공식적으로 지원하기 시작한 것은 오래되지 않은 최신 기술에 속하지만, 어렵지 않게 요소에 맞는 반응형을 구현하기 아주 유용한 기능이다. 미디어 쿼리와 컨테이너 쿼리의 차이점지금까지 반응형 CSS Query를 사용한다고 하면 미디어 쿼리(Media Query)를 사용했다. 미디어 쿼리란, CSS에서 사용되는 기능으로 보편적으로 뷰포트(viewport), 브라우저 혹은 디바이스 의 크기를 기준으로 그 조건에 맞는 반응형 레이아웃 및 스타일링을 적용하는 기능이다.반응형 레이아웃과 스타일을 크기 기준으로 적용시킨다는 점과 @규칙(at-rule)을 사용한다는 점에서 미디어쿼리랑 같지만 ..

CSS는 다양하고 편리한 최신 기능들이 업데이트되지만, 모든 브라우저를 다 지원하지 못하는 문제가 있다.@supports@supports문법도 at@를 앞에 붙여 사용하는 규칙이며, 특정 CSS 속성을 브라우저가 지원하는지 조건을 확인한 후에 해당 조건이 유효할 경우 선언된 css를 적용시켜주는 조건부 규칙 기능이다. 기능쿼리(feature query)라고 한다.@supports (조건부) {선언부}사용 예시flex를 사용한 레이아웃에서 flex를 지원하지 않는 브라우저에 나타낼 때기본 CSS에서 float 속성으로 요소를 배치한 다음, @supports구문으로 display:flex를 지원하는 브라우저일 경우엔 flex로 배치되도록 만든다. 레이아웃 배치 예시 /* 기본 css 적용 구문 *//* fl..