학습한 내용
- 미디어 쿼리 기초
- 미디어 쿼리 실무
320px ~ 768px 미만 = 스마트폰
768px ~ 1024px 미만 = 테블릿
1024px 이상 = PC
< meta name="viewport" content="width=device-width, initial-scale=1.0">
미디어 쿼리를 사용한다면 위 코드는 MUST-WRITE 한다.
width=device-width 디바이스 기준 적용 의미
이니셜-스케일1.0 = 비율 1.0 의미
- 뷰포인트 웹사이트에 접속할때 사용되는 스마트 디바이스(스마트폰, 태블릿, PC) 의미
반응형, 적응형 웹 사이트 제작시 모바일>테블릿>PC 순서로 제작하는게 초보자에게는 쉽게 접근할 수 있고 효율적이다.
미디어쿼리 적용하는 3가지 방법
< link rel="stylesheet" type="text/css" href="css/style.css">
< link rel="stylesheet" type="text/css" href="css/mobile.css">
< style media="(min-width: 300px) and (max-width: 700px)">
body {
background-color: red;
}
< /style>
학습 소감
예전에 블로그 속성을 들여다본 것 같은 익숙한 느낌이 들었는데 그게 알고보니 미디어쿼리였다. 스마트폰 종류가 많아서 웹에 입력을 주면 결과값이 저마다의 스마트폰에 어떻게 보여질까? 궁금했었는데 조금의 실마리는 풀린 것 같다. 미디어쿼리 용어를 들었는데 어려울 것 같았는데 생각만큼 어렵지는 않았다.
