2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00
parent e7ee682f16
commit 7936270d10
21 changed files with 1896 additions and 98 deletions
--- a/docs/13_미디어퀴리.md
+++ b/docs/13_미디어퀴리.md
@@ -0,0 +1,159 @@
+# 미디어 쿼리 @media
+
+미디어쿼리는 화면 크기, 해상도, 디바이스 종류 등에 따라 CSS 스타일을 다르게 적용하는 방법이야.
+즉, 하나의 CSS 파일로 여러 디바이스에 최적화된 웹페이지를 만들 수 있어!
+```css
+@media (조건) {
+  /* 조건을 만족할 때 적용할 스타일 */
+}
+```
+
+## 특정 화면 크기에서 스타일 적용
+```css
+@media (max-width: 768px) { 
+    /* 화면 너비가 768px 이하일 때 배경색 변경! */
+  body {
+    background-color: lightgray;
+  }
+}
+```
+* `max-width: 768px` :	768px 이하(모바일, 태블릿)에 적용
+* `min-width: 1024px` :	1024px 이상(PC)에 적용
+
+### 여러 개의 조건을 지정하기
+and, or, not 연산자를 사용할 수 있어!
+```css
+@media (min-width: 600px) and (max-width: 1024px) {
+    /* 화면 너비가 600px ~ 1024px 사이일 때 적용! */
+  body {
+    background-color: lightblue;
+  }
+}
+```
+```css
+@media (max-width: 480px), (min-width: 1200px) {
+    /* 화면 너비가 480px 이하이거나 1200px 이상이면 적용! */
+  body {
+    background-color: pink;
+  }
+}
+```
+```css
+@media not screen and (max-width: 768px) {
+    /* 768px 이하가 아닌 경우(즉, 769px 이상)일 때 적용! */
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## 미디어 타입(Media Types)
+미디어쿼리는 출력 장치(디바이스 종류)에 따라 스타일을 다르게 적용할 수도 있어!
+@media 뒤에 미디어 타입을 지정하면 특정 장치에서만 적용 가능
+* all :	모든 장치 (기본값)
+* screen :	컴퓨터, 태블릿, 모바일 화면 (일반적인 CSS 적용 대상)
+* print :	프린터 출력 스타일 적용
+* speech :	화면 낭독기(Screen Reader)용 스타일 적용
+
+```css
+body {
+  background-color: lightgray; /* 웹에서는 연한 회색 */
+}
+@media print {
+  body {
+    background-color: white; /* 프린트에서는 흰색 */
+  }
+}
+```
+
+## 반응형 웹 디자인
+### 기기별 화면 크기에 맞게 스타일 조정
+```css
+/* 모바일 (최대 480px) */
+@media (max-width: 480px) {
+  body {
+    background-color: lightblue;
+  }
+}
+
+/* 태블릿 (481px ~ 1024px) */
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    background-color: lightgreen;
+  }
+}
+
+/* 데스크톱 (1025px 이상) */
+@media (min-width: 1025px) {
+  body {
+    background-color: lightcoral;
+  }
+}
+```
+### 네비게이션 메뉴를 반응형으로 만들기
+```css
+.nav {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 768px) {
+  .nav {
+    flex-direction: column; /* 모바일에서는 세로 메뉴 */
+  }
+}
+```
+
+## 고급 미디어쿼리 활용
+### orientation
+디바이스가 가로/세로 모드인지 감지할 수 있음!
+```css
+@media (orientation: portrait) {
+  body {
+    background-color: lightblue;
+  }
+}
+@media (orientation: landscape) {
+  body {
+    background-color: lightcoral;
+  }
+}
+/* 세로 모드에서는 파란색, 가로 모드에서는 빨간색 배경 적용! */
+```
+### aspect-ratio
+화면 비율(예: 16:9, 4:3 등)에 따라 스타일 적용 가능!
+```css
+@media (min-aspect-ratio: 16/9) {
+  body {
+    background-color: gold;
+  }
+}
+/* 화면 비율이 16:9 이상이면 배경색 변경! */
+```
+### hover
+터치스크린(모바일)에서는 hover 효과 제거 가능!
+```css
+@media (hover: hover) {
+  button:hover {
+    background-color: red;
+  }
+}
+
+@media (hover: none) {
+  button {
+    background-color: gray;
+  }
+}
+/* 마우스가 없는 터치스크린에서는 기본 회색 버튼! */
+```
+### prefers-color-scheme
+사용자가 다크 모드를 설정했을 때 자동 변경 가능!
+```css
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+    color: white;
+  }
+}
+/* 사용자의 시스템 설정에 따라 자동으로 다크 모드 적용! */
+```