`@media`와 반응형 디자인
이 글은 @media와 반응형 디자인에 대해 설명합니다.
@media의 기본 문법과 사용 예제를 통해 유연한 레이아웃을 만드는 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media 규칙
@media는 특정 조건에 따라 스타일을 적용하기 위해 CSS 미디어 쿼리를 사용하는 규칙입니다. 기기 화면 크기, 방향, 해상도 또는 기타 특성에 따라 다른 CSS를 적용할 수 있습니다. 주로 반응형 디자인에서 사용되며 데스크톱, 태블릿, 모바일 등 다양한 기기에서 화면을 조정하는 데 도움을 줍니다.
기본 구문
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}media-type에서는 미디어 유형(예:screen,print)을 지정합니다.condition에서는 화면 크기나 해상도와 같은 조건을 지정합니다.
미디어 유형
- screen: 컴퓨터나 스마트폰 등 화면 디스플레이를 위한 스타일.
- print: 출력 시 적용되는 스타일.
- all: 모든 미디어에 적용되는 스타일.
일반적으로 사용되는 조건
- min-width / max-width: 화면의 최소/최대 너비에 따라 스타일을 적용합니다.
- min-height / max-height: 화면의 최소/최대 높이에 따라 스타일을 적용합니다.
- orientation: 화면 방향을 지정합니다 (
portrait는 세로,landscape는 가로). - resolution: 화면 해상도(e.g., DPI)에 따라 스타일을 적용합니다.
사용 예시
화면 너비에 따라 스타일 변경
예를 들어, 화면 너비가 600픽셀보다 작을 때 적용되는 스타일을 지정하려면 아래와 같이 작성할 수 있습니다:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- 화면 너비가 600픽셀 이하인 기기에서는 배경색이 연한 파란색으로 변경되고 문단 폰트 크기가 14px로 설정됩니다.
화면 방향에 따른 스타일
기기가 가로 방향일 때 스타일을 적용하려면 아래와 같이 작성할 수 있습니다:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- 화면이 가로 모드일 때 배경색이 연한 초록색으로 변경됩니다.
3. 여러 조건을 결합한 예
여러 조건을 and로 결합하여 더 구체적인 조건에 스타일을 적용할 수 있습니다.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- 화면 너비가 768px에서 1024px 사이일 경우 배경색이 연한 회색으로 변경됩니다.
응용 예: 반응형 디자인
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}반응형 디자인에서는 화면 너비에 따라 다른 레이아웃을 적용하는 것이 일반적입니다.
- 모바일(600px 이하), 태블릿(601px ~ 1024px), 데스크톱(1025px 이상)에서 글꼴 크기가 변경됩니다.
요약
@media는 기기와 화면 크기에 따라 CSS 스타일을 전환하는 강력한 도구로, 반응형 디자인에서 필수적입니다. min-width와 max-width와 같은 조건을 능숙하게 사용하면 여러 기기에 최적화된 웹사이트를 만들 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.