1. 미디어 쿼리

e.g.

@media screen (max-width : 450px){
  body {
    color : blue;
  }
}

미디어 타입

• all : 모든 미디어 타입
• print : 프린터
• screen : 컴퓨터 화면
• speech : 스크린 리더

너비 및 높이

• min- 이나 max- 으로 최대인지 아니면 최소인지를 정함

유동형 그리드, 유동형 레이아웃

웹 컴포넌트의 폭을 px 대신 em과 %를 사용 ⇒ 웹 브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변함

유연한 이미지

모든 화면에서 볼 수 있게 하려면 ⇒ 화면 폭보다 큰 이미지를 다운받고 이미지의 스타일 값 max-width 를 100%로 height를 auto로 설정하는 방법이 있음