CSS 미디어 쿼리: 반응형 웹 디자인의 기초
오늘날 웹사이트는 다양한 크기와 해상도를 가진 기기에서 접근이 가능해야 합니다. 왜냐하면 데스크탑 PC 모니터 뿐만 아니라 스마트폰, TV, 태블릿 등 다양한 기기에서 웹에 접속이 가능해졌기 때문이죠. 이를 위해서는 반응형 웹 디자인이 필수적인데, CSS 미디어 쿼리는 이러한 디자인을 구현하는데 중요한 역할을 합니다.
미디어 쿼리란 무엇인가?
미디어 쿼리는 다양한 디스플레이 환경(화면 크기, 해상도 등)에 맞게 스타일을 적용할 수 있게 해주는 CSS 기법입니다. 이를 사용하면 하나의 HTML 문서에 여러 스타일 규칙을 정의하고, 특정 조건에서만 이를 적용시킬 수 있습니다.
미디어 쿼리의 중요성
미디어 쿼리는 웹사이트가 다양한 장치와 화면 크기에 맞춰 자동으로 적응할 수 있도록 도와줍니다. 이는 사용자 경험을 향상시키고, 모바일 기기에서의 접근성을 보장해줍니다.
기본 구조
미디어 쿼리는 @media 규칙과 함께, 조건문을 포함하여 사용됩니다.
@media (조건) {
/* 조건이 참일 때 적용될 스타일 */
}예시
모바일 화면에서 다른 스타일을 적용하는 예시:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}반응형 웹 디자인의 원칙
- 유동적 그리드: 픽셀 단위가 아닌 백분율로 레이아웃을 정의하여 요소의 크기가 다양한 화면 크기에 맞춰 조정됩니다.
- 유연한 이미지: 이미지도 화면 크기에 따라 크기가 조정되어야 합니다.
- 미디어 쿼리 사용: 다양한 디스플레이 특성에 따라 적절한 스타일이 적용되도록 합니다.
실습 예제
HTML:
<div class="content">반응형 웹 디자인을 위한 예제입니다.</div>CSS:
.content {
background-color: pink;
padding: 20px;
margin: 10px;
}
@media screen and (max-width: 600px) {
.content {
background-color: lightblue;
padding: 30px;
}
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
.content {
background-color: lightgreen;
padding: 40px;
}
}이 예제 코드를 유심히 살펴보세요. 화면 크기에 따라 .content의 배경색과 패딩이 변경되도록 설정해 두었습니다.
- 1201픽셀 이상에서는 배경화면이 pink 가 됩니다.
- 601픽셀에서 1200픽셀 사이에서는 lightgreen으로 설정됩니다.
- 600픽셀 이하에서는 lightblue로 설정됩니다.
추가적인 미디어 쿼리 활용
미디어 쿼리는 단순히 레이아웃의 형태를 변경시키거나 배경색 조절, 패딩 조정에만 국한되지 않는데요. 다양한 CSS 속성을 조건부로 적용할 수 있어, 복잡한 레이아웃이나 요소의 표시/숨김, 글꼴 크기 조절 등에도 사용할 수 있습니다. 예를 들어, 특정 화면 크기에서는 사이드바를 숨기거나, 글꼴 크기를 더 크게 만드는 것과 같은 세밀한 조정이 가능합니다.
복잡한 레이아웃 조정
미디어 쿼리를 사용하여 다른 화면 크기에서 서로 다른 레이아웃을 구현할 수 있습니다.
.sidebar {
display: block;
}
@media screen and (max-width: 800px) {
.sidebar {
display: none;
}
.main-content {
width: 100%;
}
}이 예제에서는 화면 너비가 800픽셀 이하일 때 사이드바를 숨기고 메인 콘텐츠의 너비를 100%로 조정합니다.
글꼴 크기와 타이포그래피
화면 크기에 따라 글꼴 크기를 조정하여 가독성을 높일 수도 있습니다.
body {
font-size: 16px;
}
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
모바일 화면에서는 보다 작은 글꼴 크기를 적용하여 콘텐츠가 스크린에 맞게 보이도록 합니다.
반응형 이미지
이미지도 반응형으로 만들어 화면 크기에 따라 적절하게 크기가 조절되어야 합니다.
img.responsive {
max-width: 100%;
height: auto;
}
max-width: 100%와 height: auto를 설정함으로써 이미지가 부모 요소의 크기를 넘지 않으면서 원본의 종횡비를 유지하게 됩니다.
결론
이번 강의에서는 미디어 쿼리에 대해서 살펴보았는데요. media query는 반응형 웹 디자인을 위한 필수적인 도구입니다. 다양한 장치와 화면 크기에 맞게 콘텐츠를 최적화함으로써 사용자에게 더 나은 브라우징 경험을 제공할 수 있습니다. 미디어 쿼리를 통해 유연한 레이아웃, 글꼴 크기 조정, 이미지 스타일링 등을 조절하여 모든 사용자에게 적합한 웹사이트를 만드는 것이 가능합니다.
현대에 들어서 반응형 웹사이트가 굉장히 중요해졌기 때문에 정말 잘 숙지하셔야합니다. 참고로 외주 작업시 반응형 작업이 굉장히 골치아픈.. 작업입니다. 요즘에 기기가 너무 많아져서.. 5K 해상도에서 골치를 썩었던 적이 있네요.
댓글