[하루한글] 엘리먼트 쿼리

(저때문에 반응형화 게시판이 너무 경직되는 경향이 있어서 고민을 했는데.. 그냥 계속 제 스탈대로 하기로 했어요 ^^;  싫으신 분들은.. 저보다 글을 더 많이 쓰면 되시겠죠? ^^)

반응형 웹의 핵심요소 중의 하나인 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 엘리먼트에만 적용되도록 한, 콘테이너 쿼리가 제안되긴 했는데, 아직 대중적으로 받아들여지진 않는것 같습니다.