CSS 컨테이너 쿼리(Container Queries)
CSS Container Queries컨테이너 쿼리(Container Queries)는 CSS에서 미디어 쿼리(Media Queries)와 유사하지만, 브라우저의 전체 화면 크기가 아닌 특정 요소(컨테이너)의 크기를 기준으로 스타일을 적용할 수 있게 해준다. 이를 통해 반응형 디자인에서 더욱 정교한 스타일 적용이 가능해진다.기존 미디어 쿼리와의 차이점미디어 쿼리: 브라우저 창(viewport)의 크기에 따라 스타일이 적용컨테이너 쿼리: 특정 컨테이너 요소의 크기에 따라 스타일이 적용미디어 쿼리는 페이지 전체 레이아웃을 조정할 때 유용하지만, 페이지 내부의 개별 요소의 크기가 다양해지면서 요소 자체의 크기에 따라 스타일을 조정하는 것이 필요하다. 이를 해결하기 위해 컨테이너 쿼리가 등장 했다.사용 예시기본..
CSS
2024. 9. 9. 13:50
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Internationalization API
- gulp
- CSS 우선순위
- docker desktop
- oocss
- javascript
- gulp task
- gulp-sass
- 객체지향CSS
- Gulp.js
- Intl API
- gulp-autoprefixer
- CSS선택자
- 컨테이너쿼리
- gulp비동기
- gulp-ejs
- Object Oriented CSS
- JS Function
- 도커
- CSS방법론
- websquare
- at()
- CSS Level 4
- 웹스퀘어
- Container queries
- JS
- 도커설치
- browser-sync
- CSS
- smacss
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
글 보관함