과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_6미디어쿼리_210514
주제 : css
css 미디어쿼리
적응형/ 반응형 홈페이지
브라우저 크기에 따라 홈페이지의 여러 오브젝트 또한 변하게 되는데, 이런 오브젝트가 변화하는 방법에 따라 홈페이지를 적응형과 반응형으로 나눈다. 기기의 다양화와 함께 화면의 크기도 다양해지고, 그 화면에 출력되는 홈페이지 또한 화면크기에 따른 구성방법이 댜양해지고 있다.
적응형 홈페이지 Adaptiv page
변화의 기준을 고정값을 사용한다. 변화가 설정한 구간단위로 움직이며 다소 부자연스러운 변화를 보여준다.
반응형 홈페이지 Responsive page
변화의 기준을 가변값을 사용한다. 홈페이지의 변화가 브라우저의 크기에 따라 실시간으로 움직이며 자연스러운 변화를 준다.
Media query
브라우저의 리사이즈, 즉 브라우저의 크기변화에 따라 변하는 홈페이지의 속성을 줄때 미디어쿼리를 사용한다.
<h1 class="pc">PC Hello World</h1> <h1 class="mobile">Mobile Hello World</h1>
.pc {
color: red;
font-size: 50px;
background-color: pink;
}@media (min-width: 300px) and (max-width: 700px) {
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}브라우저의 넓이값 300px~699px 사이에 변화를 주는 media query속성이다. 브라우저의 넓이값이 media속성을 벗어나면 media속성 밖의 값이 적용된다. (이상 and 미만으로 입력)
.mobile {
display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc{
display: none;
}
.mobile {
display:block ;
}
}이런 속성을 활용하면 특정 화면 혹은 브라우저의 크기에 따라 출력되는 컨텐츠를 선택할 수 있다. 오브젝트의 출력을 display: none; 속성을 활용한다.
width값에 따라 접속기기를 직관적으로 확인할 수 있다.
- 320px이상 768px미만 : 스마트폰
- 768px이상 1024px미만 : 태블릿
- 1024이상 : PC
viewport 메타 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">media query을 사용하기 위해 항상 적용되는 태그. 웹 사이트의 크기를 접속하는 기기의 화변 크기에 따라 스케일을 변화시켜주는 태그
https://www.w3schools.com/css/css_rwd_viewport.asp
제조사/ 기종에 따른 화면 크기와 비율에 대한 정보를 제공하는 사이트
media query standard devise
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
구글 크롬에서 제공하는 개발도구에는 제조사/ 기종별 화면에서 웹화면을 출력해 볼 수 있는 기능을 제공한다. 여러기종의 화면을 추가하거나 제거 할 수 있고 사용자 지정으로 화면을 구성할 수도 있다.
media query의 주의점
media query에서 입력하지 않은 속성은 밖의 속성을 상속하여 적용된다. 속성적용에 확인작업이 필수 있다.
