CSS-반응형 웹

반응형 웹

1. 뷰포트(Viewport)

뷰포트는 사용자에게 보여지는 웹페이지 영역을 말한다. 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 태그에 뷰포트를 설정한다. 

-width=device-width: 너비를 기기의 스크린 너비로 설정한다. 즉 콘텐츠가 보여지는 영역이 뷰포트의 크기와 동일하다.

-initial-scale=1.0: 페이지 로딩시 확대나 축소가 되지 않은 원래 크기를 사용하게 한다. 화면 회전방향 상관없이 기기독립적 픽셀과 css픽셀이 1:1이 되도록 한다.

-minimun-scale: 줄일 수 있는 최소 크기(범위0~10)

-maximum-scale: 늘릴 수 있는 최대 크기(범위 0~10)

-user-scalable: yes/no, 사용자가 화면을 확대, 축소 할 수 있는지 지정

 

• 뷰포트 활용 원칙

-크기가 큰 fixed 요소를 사용하지 않는다.

-특정 뷰포트 크기에 최적화된 콘텐츠를 두지 않는다.

-미디어쿼리를 이용해 다른 크기의 최적화된 스타일 적용

 

2. 미디어쿼리(Media Query)

미디어쿼리는 화면 크기에 따라 스타일을 적용하기 위한 일종의 필터이다. 미디어쿼리를 이용하면 콘텐츠를 렌더링하는 특성에 따라 쉽게 스타일을 변경할 수 있다.

 

• media 속성

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

화면 크기가 0~640px 사이인 경우 max-640px.css 적용

화면이 가로 모드인 경우 landscape.css 적용

 

• 미디어쿼리 사용법

@Media not|only media type and (features) {
  /* 조건이 성립할때 적용할 css style */
}

-media type: all, screen, print, speach

-min(max)-width: 쿼리에 정의된 값보다 큰(작은) 브라우저 너비에 적용되는 규칙

-min(max)-height: 쿼리에 정의된 값보다 큰(작은) 브라우저 높이에 적용되는 규칙

-orientation=portrait(landscape): 높이가 너비(혹은 반대)보다 크거나 같은 브라우저에 적용되는 규칙

 

• Mobile first

@media ( min-width: 768px ) {
  /* 768px 이상의 경우 적용 */
}
@media ( min-width: 1024px ) {
  /* 1024px 이상인 경우 지정 */
}

작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선이라고 한다. Bootstrap 등 대부분 css 라이브러리는 모바일 우선이다.

 

• Desktop first

@media ( max-width: 1023px ) {
  /* 1023px 이하인 경우 적용 */
}
@media ( max-width: 767px ) {
  /* 767px 이하인 경우 적용 */
}

큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크탑 우선이라고 한다.

 

3) 반응형 레이아웃 예제

 /* 반응형 웹 설정, 폭이 600px 이하인 경우 적용 */
    @media screen and (max-width: 600px) {
        .leftcolumn, .rightcolumn {
            width: 100%;
            padding: 0;
        }
    }

    /* 반응형 웹 설정, 폭이 400px 이하인 경우 적용 */
    @media screen and (max-width: 400px) {
      nav {
          display: none;
      }

화면크기가 600px 이하인 경우 leftcolumn 과 rightcolumn 클래스의 폭을 100% 변경

화면크기가 400px 이하인 경우 nav 태그 영역을 보이지 않도록 설정