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이하)

Bootstrap