Responsive Web
하나의 HTML파일에 적용되는 CSS속성만 바꾸어, 여러 너비의 디바이스에서 적절히 레이아웃의 모양을 변경하는 기술
뷰포트(viewport)
스마트폰에서 내용이 표시되는 영역으로 뷰포트를 설정해주는 것이 중요하다.
뷰포트 태그
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
content='width=device-width
: 일반적으로 모바일 기기의 가로너비를 전체 표시되는 영역으로 설정initial-scale=1
: PC용 페이지를 모바일로 보면 너무 작게 보이니 초기 확대 비율을 설정(모바일용으로 만들경우 그냥 1로 설정)
미디어쿼리 (media queries)
접속한 장치에 따라 특정 CSS스타일을 사용할 수 있도록 해주는 CSS모듈
Syntax
기본
@media [only | not] 미디어유형 [and 조건(복수)]
일반적으로 많이 사용하는 구문
@media screen (min-width: 1024px)
: 최소크기가 1024px 이상일 때 (PC)@media screen (max-width: 1023px)
: 너비가 1023px 이하일 때 (태블릿)@media screen (max-width: 768px)
: 너비가 768px 이하일 때 (모바일)@media screen (max-width: 320px)
: 너비가 320px 이하일 때 (모바일, 아이폰5이하)