반응형 웹?
- 다양한 디바이스 등장으로 각 화면에 맞는 레이아웃이 필요해서 만들어짐
- pc, tablet, mobile 해상도에 최적화된 레이아웃으로 보여줌
원리
view port,media query사용해서 반응형 웹을 만들 수 있다
- view port
- 모바일 웹에서 웹페이지가 사용자에게 보여지는 영역
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- 콘텐츠가 넓이가 클 경우 모바일에서 콘텐츠를 확인할 때 좌우로 스크롤 해야하는 불편함을 해결하기 위해 등장
- html 에서 선언 가능
- media query
- 스크린 크기별로 별도의 css를 적용해서, 사용자의 스크린 크기에 최적화된 스타일 적용
형식
@media 미디어-타입 and (미디어-지정-규칙) {
/* css-정의 */
}적용 예)
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
-