[CSS -12] 미디어 쿼리와 모듈화 디자인

미디어쿼리

• 미디어 타입을 인식하고, 콘텐츠를 읽어 들이거나 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)
• 모든 미디어 쿼리는 두가지 요소를 지니고 있음
  • 미디어 타입
  • 조건에 대한 물음(쿼리)

  @media 미디어 타입 and (조건에 대한 물음) {
  	스타일 선언문
  	}

• 미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류

  속성명	정의
  min-width	디스플레이 영역의 최대 넓이
  max-width	디스플레이 영역의 최대 높이
  min-height	디스플레이 영역의 최소 넓이
  max-height	디스플레이 영역의 최소 높이
  orientation	portrait 또는 landspace 감지
  color	기기의 색상당 비트수
  color-index	출력 기기의 색상 테이블 수
  aspect-ratio	디스플레이의 영역의 너비와 높이의 비율

• 미디어 쿼리는 여러개를 적용할 수 있음

모듈화 디자인

• 웹개발에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 의미
• 컴포넌트 기반으로 웹을 제작하면 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아짐
• 모듈화 디자인의 이점
  • 반응형 컴포넌트를 만들고 조립해 하나의 페이지를만들면 자연스럽게 반응형 페이지가 됨
  • 스타일 재사용이 용이
  • 페이지의 일관성을 유지하기 용이