1.2.4 Media Query
약 5분
읽기 설정
글자 크기
줄 간격
글꼴
1.2.4 Media Query
Media Query는 CSS의 핵심 기능으로, 다양한 화면 크기와 해상도에 맞추어 스타일을 적용할 수 있도록 해줍니다. 즉, 웹 페이지가 기기나 화면의 특성에 따라 적절한 스타일을 선택하게 만드는 방법입니다. 이를 통해 데스크톱, 태블릿, 스마트폰 등 다양한 환경에서 최적화된 반응형 웹 디자인을 구현할 수 있습니다.
Media Query 기본 구문
Media Query는 @media 규칙을 사용하여 정의합니다. 아래는 기본적인 Media Query의 구문입니다:
@media (조건) {
/* 조건이 충족될 때 적용할 CSS */
}
예제: 기본 Media Query 사용하기
다음은 화면 너비가 768px 이하인 경우에만 스타일을 적용하는 예제입니다.
@media (max-width: 768px) {
body {
background-color: lightgray;
}
h1 {
font-size: 24px;
}
}
위의 예제에서 max-width 조건을 사용하여 화면의 너비가 768px 이하일 때 배경색과 제목의 크기를 조절하고 있습니다. 이를 통해 모바일 기기에서 더 나은 사용자 경험을 제공합니다.
실습: 다양한 Media Query 적용하기
아래의 HTML 구조에서 다른 화면 크기별로 스타일을 적용해보세요. 다른 조건 (min-width, max-width)을 사용해 다양한 스타일링을 시도해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query 실습</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: black;
}
@media (max-width: 600px) {
h1 {
color: blue;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
h1 {
color: green;
}
}
@media (min-width: 1201px) {
h1 {
color: orange;
}
}
</style>
</head>
<body>
<h1>반응형 웹 디자인 실습</h1>
</body>
</html>
프로젝트: 반응형 홈페이지 제작
이제 제공된 Media Query를 기반으로 자신만의 반응형 홈페이지를 디자인해보세요. 다양한 기기에서 테스트하고, 각 breakpoint마다 스타일을 변경하는 방법을 고민해보세요.
정리
Media Query는 반응형 웹 디자인에 있어 필수적인 요소입니다. 다양한 조건을 통해 화면 크기에 따라 CSS 스타일을 조정함으로써, 사용자에게 최적화된 경험을 제공합니다. 이 파트를 잘 이해하고 활용하면, 후속 프로젝트에서 더욱 효과적인 결과를 얻을 수 있습니다.
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.