### CSS Responsive Web Design
viewport
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width : 장치의 화면 너비에 다라 페이지 너비를 설정한다.
initial-scale=1.0 : 페이지가 처음 브라우저에 의해 로드 된 초기 줌 레벨을 설정한다.
Grid-view
페이지가 열로 나뉜다.
* {
box-sizing: border-box;
}->이 코드 추가
각 행은 <div>로 묶어야 한다.
미디어 쿼리
@media 특정 조건이 참인 경우에만 규칙을 사용한다.
ex)@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
브라우저 창이 600px 이하이면 배경색이 lightblue 색이 된다.
이미지
max-width: ;
필요한 경우 이미지가 축소되지만, 더이상 확대되지는 않는다.
background-size: ;
contain : 배경 이미지의 크기가 조정되고 내용 영역에 맞춰진다. 이미지는 가로 세로 비율을 유지한다.
cover : 가로 세로 비율이 유지되며 영역에 맞춰진다. 일부가 잘릴 수 있다.
100% 100% 로 하면 이미지가 영역에 채워지게 늘어난다.
비디오
max-width: ;
필요한 경우 비디오가 축소되지만, 더이상 확대되지는 않는다.
