반응형 웹 (Responsible Web)
반응형 웹(Responsible Web)이란 디바이스별로 각각 레이아웃이 달라지는 웹이다.
(= 쉽게 설명하자면 화면 크기 마다 레이아웃이 달라진다.)
미디어 쿼리 (Media Query)
미디어 쿼리란 화면 크기마다 각각 다르게 CSS를 적용하는 것으로 화면 사이즈를 인식하여 서로 다른 CSS를 적용시켜준다. (스마트폰, 태블릿, PC)
- 스마트폰 : 해상도 320px ~ 768px
- 태블릿 : 해상도 768px ~ 1024px
- PC : 1024px ↑
--
미디어 쿼리 기본 문법
@media (조건) {
스타일
}
스타일부분에 일반적인 CSS코드가 들어가는데,조건부분이 만족될 때 스타일이 적용된다.
예를 들어, 800px 이하의 좁은 화면에서 특정 HTML 요소의 배경색을 바꾸고 싶다면
@media (max-width: 800px) {
.small-tomato {
background-color: lightgreen;
}
}max-width: 해당 속성은 최대 width를 설정합니다.min-width: 반대로 최소 width를 설정합니다 (ex.800px 이상에서 적용시키고 싶을 때)
미디어 쿼리 기준 속성
- max-width : 뷰 영역에서 최대 넓이, 즉 지정한 사이즈 이하일 경우 적용
- min-width : 뷰 영역에서 최소 넓이, 즉 지정한 사이즈 이상일 경우 적용
- max-device-width : 디바이스 사이즈 최대 넓이
- min-device-width : 디바이스 사이즈 최소 넓이
- orientation : 세로 길이 혹은 가로 길이의 둘 중 하나로 기준을 적용
orientation
두 가지 속성값을 정해줄 수 있다.
- portrait : 세로 길이 중심의 경우
- landscape : 가로 길이 중심의 경우
스마트폰 사용시 가로로 돌리고 보는 경우가
landscape에 해당된다.
Viewport
뷰포트(viewport)란 모바일 브라우저에서 web content를 출력하는 영역으로, web content가 최적의 상태로 화면에 표시될 수 있게 도와준다 즉, 화면을 모바일에 맞게 표시해주는 설정이라고 보면 된다.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />width=device-width: 페이지 너비를 기기의 스크린 너비로 설정 즉 , 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어줌initial-scale=1: 처음 페이지 로딩 시 확대/축소가 되지 않은 원래 크기를 사용 0 ~ 10 사이의 값을 가진다.- 위의 문구가 있어야 미디어 쿼리가 반응한다.
