웹디자인
-
Media Queries,이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 5. 05:05
아이폰 같은 모바일 환경은 작은 화면이고, 모니터와 같은 데스크탑 환경은 큰 화면입니다. 화면의 크기에 따라서 CSS가 달리 쓰이기 때문에(큰 스크린을 위한 CSS와 작은 스크린, 화면을 위한 CSS가 다릅니다), 이번시간에는 브라우저가 큰 지 작은 지를 알아내는 방법에 대해 배우도록 하겠습니다. 먼저 배경색을 초록색이라고 해 보겠습니다. 여기서 유저가 모바일 환경이라고 한다면, 우리가 보는 화면의 최소값은 320px이고, 최대값은 640px일 때 HTML body의 배경색이 파란색이 되도록 하기 위해, @media screen and (min-width:320px) and max-width:640px) {body{background-color: blue;}} 라고 쓰겠습니다. 그럼 화면을 크게 하면, ..