-
반응형 웹프로그래밍/HTML&CSS 2022. 9. 16. 15:19728x90
최근 전자기기의 다양성으로 인해 PC와 테블릿, 모바일 등 여러 크기의 화면에서 웹 문서를 보기위해서는 그때마다 웹 문서를 각각 제작해야하는 수고스러움이 있을 수 있었다. 이 점을 고려하여 전자기기의 화면 크기에 반응하여 웹 문서 크기를 자동 바뀌는 반응형 웹 개념이 등장한다.
반응형 웹 디자인이란 PC와 테블릿, 모바일 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹 사이트의 화면에 맞게 재배치하고 각 요소의 표시방법만 바꾸어 웹문서를 구현하는 것이다.
반응형 웹 디자인을 위해서는 먼저 뷰포트의 개념을 알아야한다. 예로 PC에 맞게 제작한 웹 문서를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시된다. 그 이유는 PC 화면과 모바일 화면에서 표시되는 픽셀 차이 때문으로 여기서 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시가 가능하다. 이때 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이라 할 수 있다.
미디어 쿼리
미디어 쿼리는 지정된 해상에 따라 다른 스타일 시트를 적용해주는 방법이다.
@media 매체유형 and(max-width: 해상도) and(min-width: 해상도){ 적용할 css 문법 }해상도의 최소 최대를 지정할 수 있고 그 범위 내에서 CSS 문법을 적용한다.
디바이스간 분기점을 확인해보면,
- 낮은 해상도의 PC, 태블릿 가로 : ~1024px
- 태블릿 가로 : 768px ~ 1024px
- 모바일 가로, 태블릿 : 480px ~ 768px
- 모바일 : ~ 480px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>미디어 쿼리</title> <style> @media screen and (min-width: 1024px){ /* PC */ body{background-color: deepskyblue;} } @media screen and (min-width: 768px) and (max-width: 1024px){ /* 테블릿 가로, 해상도 낮은 PC */ body{background-color: deeppink;} } @media screen and (min-width: 480px) and (max-width: 768px){ /* 모바일 가로, 테블릿 세로*/ body{background-color: palegoldenrod;} } @media screen and (max-width: 480px){ /* 모바일 세로 */ body{background-color: gold;} } </style> </head> <body> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, eum! Unde itaque, nesciunt nulla quas perspiciatis hic aliquam, ipsum eaque iure perferendis quam. Animi cumque excepturi quisquam voluptatum, iusto molestias?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, vitae! Atque libero nesciunt necessitatibus vero, fugiat minima aperiam beatae eaque omnis? Obcaecati voluptatibus, molestias saepe eos omnis reiciendis esse sequi.</p> </body> </html>
모바일 세로 
모바일 가로, 테블릿 세로 
테블릿 가로, 낮은 해상도 PC 
PC 728x90