학습한 내용

미디어쿼리

adaptive(적응형) - 고정값을 가지고 있음 뚝뚝 끊김
responsive(반응형) - 주로 %단위 사용, 자연스로운 리사이징 효과
m이 붙어 있는 사이트는 pc 모바일 버전을 html 따로 사용.(ex. m.naver.com)

WIDTH 값 기준
320px~768px: 스마트폰
768PX~1024PX: 태블릿
1024PX~: PC

@media - 미디어 쿼리 문법의 시작을 알리는 부분

미디어쿼리 사용할때 조건

<meta name="viewport" content="width=device-width, initial-scale=1.0">

pc보다 간단한 모바일로 먼저 제작하여 태블릿, pc로 확장하는 것이 편함

미디어쿼리 응용

*참고 사이트 https://blog.teamtreehouse.com/which-page-layout
https://www.w3schools.com/css/css_rwd_viewport.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

학습내용 중 어려웠던 점

여러가지 기계에서 보이는 형태를 달리하는 것이기에 복잡하게 느껴졌다.

해결방법

평상시에 친숙하고 많이 접하는 네이버 같은 사이트들을 pc, 모바일 버전 등 여러가지 버전에서 어떻게 보이는지 찾아보았다.

학습소감

모바일과 pc버전이 어떻게 다르게 만들어지는지 알게 되었고 이제는 사이트들을 보면 어떤 미디어쿼리를 사용하여 만들어졌는지 생각할 것 같다.