-
CSS 편 - 4일차개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 7. 09:00반응형
4일차
12. 미디어 쿼리 소개
- 현대적인 웹 애플리케이션을 만들 때 굉장히 중요한 요소라 할 수 있는 반응형 디자인을 알아보자.
- 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹 디자인, 영어로는 'responsive web'이라고 한다.
- 웹은 운영체제와 상관없이 PC나 스마트폰이나 태블릿, 가상현실과 같은 모든 정보 시스템에서 동작한다. 즉, 수많은 형태의 화면에서 동작해야 한다는 뜻이다.
- 이 것을 해결하기 위해서 등장한 것이 반응형 디자인이며, 앞서 설명한 듯이 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 된다는 것이다.
- 반응형 디자인을 순수한 웹 기술인 CSS를 통해 구현하는 핵심적인 개념인 미디어 쿼리에 대해 아래의 코드와 함께 살펴보자.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { border: 5px solid green; font-size: 60px; } @media(max-width: 800px) { div { display: none; } } </style> </head> <body> <div> Responsive </div> </body> </html>- 위 코드를 보면 Responsive라는 내용이 있는 <div>태그가 있고 @media(미디어 쿼리)가 웹 페이지가 800px보다 작다면 <div>태그를 안보이게 되도록 작성되어있다.
- max-width: 800px는 screen width < 800px와 같은 뜻이며, 반대로 min-width: 800px이라면 screen width > 800px이란 뜻이다. 즉 max-width: 800px는 화면의 최대크기가 800px까지는 <div>태그를 안보이도록 해라라는 말과 같다. 그래서 800px가 넘어가면 보이게 된다.
- 이처럼 미디어 퀘리를 활용하면 화면 크기에 따라, 스마트폰의 가로모드/세로모드에 따라, 또 여러가지 화면의 특성에 따라 특정 조건을 만족할 때만 미디어 쿼리의 코드를 동작시키는 것이 가능하다.
- 저자 유튜브 강의보기
13. 미디어 쿼리 써먹기
- 기존 코드에서 웹 페이지가 800px이하가 되면 디자인이 변경되도록 설정해보자.
왼) 화면 크기가 800px이하일 경우, 오) 화면 크기가 800px이상일 경우 - 위 그림처럼 반응형 디자인을 넣으려면 어떻게 해야할까?
- 먼저 @media 를 화면 크기가 800px이하가 될 경우 동작하도록 작성한다.
@media(max-width: 800px){ }- 그리고 'WEB'이라는 제목 아래의 선을 지우기 위해 코드를 추가하고, 목록의 오른쪽 선도 보이지 않도록 코드를 추가한다. 마지막으로 목록과 본문의 grid 설정을 해제되도록 한다.
@media(max-width: 800px){ h1 { border-bottom: none; } #grid ol { border-right: none; } #grid { display: block; } }- 이로써 원하던 반응형 디자인을 구현해내었다. 물론 미디어 쿼리를 이용하면 이보다 훨씬 더 복잡하고 다양하게 효과를 줄 수 있겠지만 수업의 범위를 벗어나기 때문에 더 자세히 다루지는 않는다.
- 저자 유튜브 강의보기
해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.
반응형'개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글
JS 편 - 1일차 (1) 2025.05.09 CSS 편 - 5일차 (0) 2025.05.08 CSS 편 - 3일차 (1) 2025.05.06 CSS 편 - 2일차 (0) 2025.05.05 CSS 편 - 1일차 (0) 2025.05.04
