CSS 미디어 쿼리 (Media Query) - 23
CSS 강의 : 반응형 웹 디자인과 Media Query 쉽게 배우기
1. 반응형 웹 디자인이란?
- 쉽게 말해요: 반응형 웹 디자인(Responsive Web Design)은 웹 사이트가 사용하는
기기에 따라 화면이 예쁘게 보이도록 만드는 기술이에요. 예를 들어, 스마트폰 , 태블릿,
컴퓨터에서 모두 잘 보이게 하는 거죠!
- 왜 중요할까?
요즘은 사람들이 스마트폰으로 웹 서핑을 많이해요.
기기마다 화면 크기가 다르니까. 모든 기기에서 웹사이트가 보기 좋도록 조정해야 해요
CSS의 Media Query라는 기능을 사용하면 쉽게 가능해요!
2.Media Query가 뭔가요?
Media Query는 CSS에서 특정 조건에 따라 스타일을 다르게 적용하는 방법이에요.
예를 들어 "화면 크기가 600px이하일 때 이 스타일을 적용해!" 같은 조건을 줄 수
있어요.
Media Query의 기본 구조
@media (조건) {
/* 조건이 맞을 때 적용할 CSS 스타일 */
}
조건 종류
- all : 모든 기기에 적용(기본 값)
- screen : 화면에 표시되는 기기(스마트폰, 컴퓨터 등)
- print : 인쇄할 때 적용
- width, height: 화면의 너비와 높이 조건
min-width : 최소 너비
max-width: 최대 너비
-orientation: 화면 방향(가로/세로)
landscape: 가로 방향
portrait: 세로 방향
간단한 예제
/* 화면 너비가 600px 이하일 때 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 화면 너비가 600px 초과일 때 */
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
3.Viewport
- 반응형 웹을 만들 때 Viewport 설정이 중요해요.
Viewport는 웹사이트가 표시되는 화면 영역을 말해요.
- 스마트폰에서 웹 사이트가 너무 작게 보이거나 확대 되어 보이지 않도록 설정해야 해요.
Viewport 설정 방법
HTML에 아래 코드를 추가하세요:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: 화면 너비를 기기의 실제 너비에 맞춤
initial-scale=1.0:초기 확대 비율을 1배로 설정(줌 안함)
4. pixel과 viewprot의 차이 이해하기
- pixel:화면의 작은 점 하나를 말해요. 예를 들어, 320px*480px 해상도의 화면은
가로 320개의 점, 세로 480개의 점으로 이루어져 있어요.
-Viewport: 기기에서 실제로 보여지는 영역이에요. 스마트폰에서는 보통 Virtual viewport
라는 개념이 있어서 실제 픽셀과 다를 수 있어요.
예 : 스마트폰의 실제 해상도는 980px인데, Virtual Viewport가 320px로 설정되어 있
을 수 있어요.
- Viewport를 설정하지 않으면, 스마트폰에서 웹사이트가 너무 작게 보이거나 확대되어
보일 수 있어요..
5. 실습 : 간단한 반응형 웹사이트 만들기
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹사이트 실습</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
header, main, footer {
padding: 20px;
text-align: center;
}
header {
background-color: #3498db;
color: white;
}
main {
background-color: #ecf0f1;
}
footer {
background-color: #2c3e50;
color: white;
}
/* 스마트폰 화면 (600px 이하) */
@media (max-width: 600px) {
header {
font-size: 20px;
}
main {
font-size: 16px;
}
footer {
font-size: 14px;
}
}
/* 컴퓨터 화면 (600px 초과) */
@media (min-width: 601px) {
header {
font-size: 40px;
}
main {
font-size: 40px;
}
footer {
font-size: 40px;
}
}
</style>
</head>
<body>
<header>헤더</header>
<main>메인 콘텐츠</main>
<footer>푸터</footer>
</body>
</html>
위 코드는 화면 크기에 따라 글자 크기를 다르게 설정해요 .
스마트폰에서는 글자가 자게, 컴퓨터에서는 크게 보이죠!
6. 레이아웃과 미디어 쿼리
- 데스크탑 레이아웃: 헤더, 내비게이션, 메인 콘텐츠, 사이드바, 푸터
- 모바일 레이아웃: 헤더, 내비게이션, 메인 콘텐츠, 푸터(사이드바는 숨김)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexible Layout</title>
<style>
/*
* :root는 CSS의 최상위 스코프를 나타냅니다.
* 여기에 정의된 변수는 문서 전체에서 사용할 수 있는 전역 변수입니다.
* - :root는 CSS 선택자(Selector) 중 하나로, 문서의 루트 요소를 선택
* - HTML에서는 <html> 요소가 루트 요소이므로, :root는 <html>을 선택하는 것과 동일
*/
:root {
/* --header-bg는 커스텀 속성(변수) 이름입니다.
#00ffff(청록색)를 저장해 header의 배경색으로 사용합니다. */
--header-bg: rgb(61, 187, 204);
/* --nav-bg는 네비게이션 배경색으로, #faebd7(앤티크 화이트)을 지정합니다. */
--nav-bg: #faebd7;
/* --main-bg는 메인 콘텐츠 영역의 배경색, #a52a2a(갈색)을 정의합니다. */
--main-bg: #a52a2a;
/* --aside-bg는 사이드바 배경색으로, #f0ffff(밝은 청록)를 사용합니다. */
--aside-bg: #f0ffff;
/* --footer-bg는 푸터 배경색, #ffe4c4(비스킷 색)을 지정합니다. */
--footer-bg: #ffe4c4;
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 기본 Layout 설정 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
text-align: center;
}
.header {
/* var() 함수로 --header-bg 변수를 참조해 색상을 적용합니다. */
background-color: var(--header-bg);
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
/* --nav-bg 변수로 배경색을 설정해 코드 중복을 줄입니다. */
background-color: var(--nav-bg);
flex: 0.7;
}
.content {
flex: 3;
display: flex;
flex-direction: row;
/* --aside-bg로 content 영역의 배경색을 정의합니다. */
background-color: var(--aside-bg);
}
.main {
/* --main-bg 변수를 사용해 메인 영역의 배경색을 설정합니다. */
background-color: var(--main-bg);
flex: 0.7;
}
.aside {
flex: 0.3;
}
.footer {
/* --footer-bg로 푸터의 배경색을 적용합니다. */
background-color: var(--footer-bg);
flex: 1;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
nav {
display: none;
}
.main,
.aside {
flex: 1;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<div class="content">
<main class="main">Main Content</main>
<aside class="aside">Sidebar</aside>
</div>
<footer class="footer">Footer</footer>
</div>
</body>
</html>