반응형에 대해(2)

Bonggus·2021년 10월 19일

CSS 구글 반응형

HTML/CSS

목록 보기

3/3

반응형 웹 디자인 패턴

구글 역시 반응형 웹에 대한 정리를 잘 해놓았다. 정확히 말하면 많이 쓰는 패턴에 대한 정리이다. 반응형 웹 디자인에 대한 표준은 아직 없기때문에 현재는 자주 쓰는 패턴정도라고 말하고 있는것 같다.

반응형 웹 페이지에 사용되는 대부분의 레이아웃은 5가지 패턴 중 하나로 분류된다.

유동형
열 끌어놓기
레아이웃 시프터
미세조정
오프캔버스

패턴 예시

flexbox를 시용했으며, 각 샘플은 기본 컨테이너 div내에 3개의 콘텐츠 div가 포함된다. 가장 작은 뷰부터 작성되고, 필요한 경우 중단점을 추가했다. 최신브라우저에서는 flexbox 레아이웃 모드가 잘 지원된다.

유동형(Mostly Fluid)

이 패턴은 주로 융동형 그리드로 구성된다. 더 넓은 화면에서는 여백만 조정하므로, 대형 화면이나 중형 화면에서 이 패턴은 일반적으로 동일한 크기를 유지한다. 더 작은 화면에서는 컨텐츠들이 수직으로 쌓이며 기본 콘텐츠가 재배치 된다.

이 패턴의 주요 장점은 대개 소형 화면과 대형 화면에서 하나의 중단점만 필요하다는 것이다.

유동형

패턴 적용 사이트

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  /* Using 33.33%, doesn't always work right due to rounding */
  .c3, .c4 {
    width: 33%;
  }
  .c5 {
    width: 34%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

열 끌어놓기(Column Drop)

전체 너비가 가득 찬 다중 열 레이아웃의 경우, 열 글어놓기는 창 너비가 콘텐츠에 비해 너무 좁아지면 열을 수직으로 쌓는다. 결국 모든 열이 수직으로 쌓인다. 이 레이아웃의 중단점 선택은 콘텐츠에 따라 다르다.

열끌어놓기

패턴 적용 사이트

Modernizr

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

레이아웃 시프터(Layout shifter)

가장 반응성이 뛰어난 패턴. 여러 화면 너비에 복수의 중단점이 있다. 이 레이아웃의 핵심은 다른 열 아래로 이동 및 재배치하는 방식이 아니라 콘테츠의 자리 이동 방식에 있다. 각 주요 중단점 간의 현저한 차이로 인해 유지 관리가 훨씬 복잡하고 전체 콘텐츠 레이아웃뿐만 아니라 요소 내의 변경도 포함된다.

레이아웃 시프터

화면이 커짐에 따라 한 div는 왼쪽, 두 div는 오른쪽에 쌓이게 된다.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

미세조정(Tiny tweaks)

미세조정은 글꼴 미세 조정, 이밎 크기 미세 변경 등 콘텐츠 미세 이동 등과 같이 레이아웃을 약간 변경한다. 이 패턴은 1페이지 선형 웹사이트, 텍스트가 많은 문서 등 단일 열 레이아웃에서 잘 작동한다.

미세조정

패턴 적용 사이트

Ginger Whale

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

오프캔버스(Off canvas)

콘텐츠를 수직으로 쌓지 않고, 사용 빈도가 낮은 콘텐츠(탐색 또는 앱메뉴)를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화며네서는 클릭했을 때만 보여준다.

오프캔버스

컨텐츠를 수직으로 쌓지 않고, transform: translate(-250px, 0) 선언을 사용하여 두 개의 콘텐츠 div를 화면에서 숨긴다. 자바스크립트를 사용하여 공개 클래스를 요소에 추가하여 보이게 만들어 div를 표시한다.

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}