Responsive Web

반응형 웹을 만들기 위한 기초 다기지! 

크기를 퍼센트로? 

이미지의 너비를 100%로 준다면 이미지는 유연하게 된다. 뷰포트의 너비까지 맞춘다는 뜻. 그렇게 때문에 이미지가 원래의 크기보다 더 커질 수도 있다는 점을 주의해야 한다.

대신에 max-width를 100%로 주면 이미지 너비를 최대100%로 잡겠다라는 뜻. 이미지가 원래의 크기보다는 커질 일이 없다.

 

폰트 사이즈 단위로 vw (viewport width)

폰트 사이즈가 뷰포트의 너비에 따라 움직인다. 1vm는 뷰포트 너비의 1%, 뷰포트의 너비가 50cm라면 1vm은 0.5cm가 된다.

 

미디어 쿼리

미디어 쿼리를 사용하면 다양한 브라우저 사이즈에 따라 다른 스타일을 적용할 수 있다.

뷰포트의 너비가 800픽셀 이하일때는 각 요소의 너비가 100%이다.  800픽셀이 넘어가면 각 요소에 정의해둔 속성이 적용된다. 

@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; 
  }
}