[HTML/CSS] 컴알못의 도전기_ 15일차

 

 

 반응형 미디어 쿼리 (모바일 지원)

 

 

 

 

미디어 쿼리

 

 

웹, 모바일형 html을 따로 만들어줄 필요 없이 css만 바꿔주는 것

 

웹 브라우저의 크기(뷰포트) 작으면 : 모바일형

 

모바일 형에 설정된 사항 확인하려면 -> 구글 chrome에서 F12을 눌러서 toggle device toolbar 클릭

 

 

(아이폰 5/SE버전으로 테스트해서 적합하다면 다른 버전에서도 문제없음)

 

 

 

웹사이트가 모바일 지원하지 않는다고 하면 모바일 웹브라우저는 가로 980px로 설정, 웹사이트 랜더링 해서 발생하는 문제 css에서 300px로 설정했지만... 결론적으로 웹사이트가 작게 보임.

이 문제 해결하기 위해서는 아래와 같이 입력

 

 

 

 

미디어 쿼리 사용법

@media