$$config title: 미디어쿼리 keywords: - 미디어쿼리 $$ ## 수업영상 및 수업페이지 타인 공유 금지 - 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다. - 수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다. - 녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 개념 ## 기본 구문 ```css @media 미디어타입 and (조건) { 태그 { 속성 : 속성값; } } ```
## 미디어 타입 - 특징 : 미디어 타입을 생략할 경우 all(default) ```css @media all and (조건) {} @media print and (조건) {} @media screen and (조건) {} @media speech and (조건) {} ```
## 조건 : 화면 사이즈 ```css /*~이하 일때 실행문 실행*/ @media screen and (max-width) { 태그 { 속성 : 속성값 } } ``` ```css /*~이상 일때 실행문 실행*/ @media screen and (min-width) { 태그 { 속성 : 속성값 } } ```
## 조건 : 가로/세로 - web docs : [orientation 방향](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation) - portrait : 모바일에서 세로 방향일때 작동 - landscape : 모바일에서 가로 방향일때 작동 ```css @media screen and (orientation: portrait) { 태그 { 속성 : 속성값 } } @media screen and (orientation: landscape) { 태그 { 속성 : 속성값 } } ```
## 반응형 미디어쿼리 탑바 제작 - 반응형 미디어쿼리 탑바 제작 : [codepen 열기](https://codepen.io/kimhyeji324/pen/zYLwZVv?editors=1100)
## 수업영상 : 반응형 탑바 구현 - 웹3 23.01.12(목) : [수업영상 1부 - 미디어쿼리 개념과 예제](https://youtu.be/9f3jV2pOcAw) - 웹3 23.01.12(목) : [수업영상 2부 - 모바일모드 탑바 구현 예시](https://youtu.be/0ABEUmY-nnY) - 웹3 23.01.12(목) : [수업영상 3부 - 반응형 탑바 구현 레이아웃 잡기](https://youtu.be/ZIBwBgAW8JU) - 웹3 23.01.12(목) : [수업영상 4부 - 반응형 탑바 구현 디테일 커스텀](https://youtu.be/lLDQNhRdDEM)
## 수업영상 : 반응형 탑바 미디어쿼리 적용 - 웹3 23.01.13(금) : [수업영상 1부 - flex-wrap 개념](https://youtu.be/Er8i78H7w2c) - 웹3 23.01.13(금) : [수업영상 2부 - min, max 구분과 미디어쿼리 적용](https://youtu.be/5YMK4iEDYGA) - 웹3 23.01.13(금) : [수업영상 3부 - 미디어 쿼리 줄바꿈 원리](https://youtu.be/eXxtADn2qgc)
## 반응형 하나씩 사라지는 이미지 구현 - 예제 : [하나씩 사라지는 이미지 구현](https://codepen.io/kimhyeji324/pen/MWBvORm?editors=1100)