[TIL 2022] CSS 반응형 - 미디어쿼리
학습한 내용
- CSS로 반응형 페이지 만들기
- CSS에 @media 쿼리를 사용
- @media (최대, 최소 너비) {스타일을 설정}
- 화면의 조건을 만족하면, css가 작동하는 것이 가능함
학습 내용 중 어려웠던 점
- 스크린 화면의 크기에 따른 최적화가 어려움
- min과 max의 구분이 헷갈림
- 화면의 크기와 해상도의 차이가 어떤 차이인지 헷갈린다.
해결 방법
- @media(max-width:800px) 뜻은 화면이 800px보다 작아졌을 때를 의미함
- @media(min-widthL800px) 뜻은 화면이 800px 이상 일때
- 디바이스별 최적화 참고 링크
학습 소감