학습한 내용
- 미디어 쿼리 기초 및 실습
- 미디어 쿼리 복습
320px ~ 768px 미만 = 스마트폰 size
768px ~ 1024px 미만 = 테블릿 size
1024px 이상 = PC size
< 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"> / PC 버전/
나. < link rel="stylesheet" type="text/css" href="css/mobile.css"> / 모바일 버전 /
다. < style media="(min-width: 300px) and (max-width: 700px)">
body {
background-color: red;
}
< /style>
학습 소감
미디어쿼리 적용하는 방법 3가지 PC 버전, 모바일 버전, SM 버전으로 나누는 이유는 IT Developer 편리성을 위함이다. 예를들면, 코드 분량이 길어지거나, 좀 더 빠른 유지 보수를 원활하게 하기 위해서 나눠서 작업을 하는 경우가 존재한다. 이론적으로, 개인차가 존재하는 것 같은 생각이 들었다.
