미디어쿼리 (1) 썸네일형 리스트형 (생활코딩) CSS 미디어 쿼리 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 반응형 웹, 반응형 디자인이라고 한다. 이 반응형 디자인을 우리가 순수한 웹을 통해서 CSS를 통해서 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)라는 것에 대해 살펴보자. 화면의 크기에 따라서 어떤 HTML의 요소를 보였다, 안 보였다 하게 해보자. 화면의 크기 800픽셀보다 크냐 작으냐에 따라서 태그를 보이게, 안 보이게 하려면 화면의 크기를 알아야 한다. 화면-오른쪽클릭-검사를 통해서 화면을 조정하면 우측상단에 화면의 크기를 볼 수 있다. 화면의 크기가 800px 이상일 때(screen width>800px), 의 태그를 display:none;으로 만들어 보자. 화면의 크기가 800px보다 크다는.. 이전 1 다음
