[하루한글] 엘리먼트 쿼리 정보
반응형화 [하루한글] 엘리먼트 쿼리
본문
(저때문에 반응형화 게시판이 너무 경직되는 경향이 있어서 고민을 했는데.. 그냥 계속 제 스탈대로 하기로 했어요 ^^; 싫으신 분들은.. 저보다 글을 더 많이 쓰면 되시겠죠? ^^)
반응형 웹의 핵심요소 중의 하나인 CSS 미디어 쿼리 (media-queries)를,
웹 엘리먼트들 하나 하나에 적용하자는 아이디어인데요..
이유는, 아무래도 (css+html 묶음의) 컴포넌트 단위 재사용성을 높이자는 것이죠.
(아래 코드 출처: 스매싱매거진)
* 엘리먼트 쿼리 예
nav (min-width: 520px) {
display: block;
}
* 기존 미디어 쿼리 사용 경우
@media all and (min-width: 520px) {
nav {
display: block;
}
}
일단 코드량이 줄어든다는 장점은 있지만, 전체 css 코드를 합쳤을때 화면경계치 미디어 쿼리가 여기 저기 흩어져 있어지는 단점이 있어보입니다.
css 표준이 아니니, 당연히 브라우져 지원은 없고, 폴리필 들이 있습니다.
* https://github.com/tysonmatanich/elementQuery
* http://marcj.github.io/css-element-queries/
* https://github.com/Mr0grog/element-query
하지만, 현재의 문법? 상에는 '반복'의 문제가 있습니다. 아래 코드에서 보면, 해당 요소의 폭이 500px보다 크면, 폭을 200px로 줄이게 되는데, 그러면 더이상 해당 조건을 만족하지 않게 됩니다.
.element (min-width: 500px) width: 200px; }
이런 문제를 해결하기 위해서, 엘리먼트 자체가 아닌 child 엘리먼트에만 적용되도록 한, 콘테이너 쿼리가 제안되긴 했는데, 아직 대중적으로 받아들여지진 않는것 같습니다.
4
댓글 2개
(그래도 폴리필이란 용어는 처음 들었는데, 이렇게 또 하나 알아가네요~감사합니다)
그래도 위 폴리필이, 미디어쿼리 폴리필하고 그다지 큰 차이가 없으니까,
미디어쿼리 기반 반응형 웹을 구형 브라우져에서 한다면 어짜피 respond.js 던가요? 그것을 써야하니가, 위 js 폴리필을 사용하여 엘리먼크 쿼리를 사용해도 큰 차이는 없을것 같긴합니다.
문제는 위 내용이 앞으로 css 표준으로 들어오느냐.. 그래서 지금 코딩이 미래에는 js 폴리필 없이도 작동하느냐가 관건인데요..
반응형 이미지 (특히 srcset) 은 거의 표준으로 들어온 반면, 엘리멘트 쿼리는, 위에서 적은 문제점도 있고 해서 쉽게 들어오지는 않을것 같아요..
그런면에서도, 만일 컴포넌트 재사용성을 위한다면, 구글에서 미는 polymer 형태의 컴포넌트 재사용이 훨씬 가능성이 높지 않을까 하고요.. ^^;
