'미디어 쿼리' 태그의 글 목록

🌟 @media는 이제 그만 ! 최신 @container 사용법

컨테이너 쿼리 vs 미디어 쿼리 컨테이너 쿼리는 미디어 쿼리와 같이 문서의 스타일을 반응형으로 지정할 수 있다. 이 둘의 작동 방식은 유사하지만, 차이점은 어느 것을 기반으로 동작되냐는 점이다. 예를들어 미디어 쿼리는 디바이스 또는 미디어 유형을 기반으로 뷰포트에 의해 반응하지만, 컨테이너 쿼리는 페이지내의 특정 컴포넌트 요소 기반으로 반응한다. 아래 그림을 보면 이해가 될텐데, 미디어 쿼리는 브라우저 너비를 기준으로 반응하지만, 컨테이너 쿼리는 문서 내 각 요소 의 크기나 모양에 따라 반응형 쿼리를 지정할 수 있다는 점에서 상위 호환이라고 할 수 있다. 컨테이너 쿼리가 없었을 시절에는 자바스크립트의 Resize Observer 기술을 통해 특정 요소의 크기 변화를 관찰하여 스크립트로 스타일링을 해주어야..

인파_

2023.03.24

(0)

Style Sheet/CSS

🌟 미디어 쿼리 범위 지정 최신 문법 (간편해짐 ❗)

CSS media query 범위 최신 문법 CSS에서 반응형 쿼리를 작성할때 가장 이해가 안되었던 접이 바로 미디어 쿼리의 width, height 범위 지정 문법이다. 왠만한 프로그래밍 언어에선 범위 지정을 기호를 통해 범위지정을 하지만 CSS에서는 미디어 쿼리 범위 지정은 다음과 같이 하였다. 정확히 max-width 가 의미하는 것이 '이상' 인지 '이하' 이었는지 잠깐 문법이 햇깔릴 때도 있었으며, 기본적으로 '같거나 작다' 로 통용되기 때문에 만일 '무조건 작다' 로 설정하려면, 아래와 같이 319.99px 로 지정해야는 우회하는 방법을 써야 했다. /* viewports

인파_

2022.11.12

(0)

Style Sheet/CSS

[CSS] 📚 미디어 쿼리 - 반응형 레이아웃

미디어 쿼리(Media Query) 란? 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같다. @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다. 미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있다. 1. HTML의 link태그의 media속성에 값을 설정해 주는 방법 2. css파일 내에 직접 media를 설정해 주는 방법 @media all and (min-width:480px) { ... } 3. media query를 설정한 파일을 css파일 내에서 impo..