728x90
https://www.youtube.com/watch?v=aA4xunvDWU8&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=12
- 반응형 웹, 반응형 디자인이란?
화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 웹페이로 동작함
- 미디어쿼리란?
반응형 디자인을 CSS 통해서 구현하는 핵심적 개념
화면에 크기에 따라 보였다 안보였다 반복하고 싶다면 화면의 크기를 알아야함.
구글 개발자 도구에서 검사 클릭 하면 화면의 크기 확인 가능
스크린의 넓이가 800px보다 클때 <div>의 display : none;
= @media(min-width:800px) : 즉, 화면의 크기가 최소 800px 이다.
어렵다 어려워 ㅠㅠ
웹페이지 크기 줄이고 늘리면 사라지고 나타나는게 신기함!
728x90
'CSS' 카테고리의 다른 글
| <CSS>생활코딩_코드의 재사용 (0) | 2023.01.13 |
|---|---|
| <CSS>생활코딩_미디어쿼리 써먹기 (0) | 2023.01.13 |
| <CSS>생활코딩_그리드 써먹기 (0) | 2023.01.13 |
| <CSS>생활코딩_그리드란? (0) | 2023.01.13 |
| <CSS>생활코딩_박스 모델 활용해서 제목, 목차 꾸미기 (0) | 2023.01.13 |