Changseon Shin

Changseon Shin

WannaBe Web Front-end Developer

[Day 14] Responsive Web Design + Grid Layout

반응형 웹

  • Troy - Responsive Web Tester

  • Flexible VS Adaptive

    • Flexible(반응형) : 사이즈에 따라 점진적으로 계속 늘어나는 디자인
    • Adaptive(적응형) : 특정 viewport 사이즈에서 사이즈가 늘어나면서 디자인이 변한다.

  • Desktop First VS Mobile First

    • Mobile First로 개발한 뒤 확장해 나가는 방식이 더 권장할만하다.

  • 반응형 웹 디자인 아키텍처 (Reposive Web design Architecture)

    • 고정형에서 설정했던 크기를 백분율로 설계해야 한다.
    • 고정형 크기를 백분율로 고치는 공식(계산법)
      • Target / Context = Result
      • 900 / 960 = 0.9375…

  • 미디어 쿼리 (Media Queries)

    @charset "utf-8";
  
/* All Device */
	모든 해상도를 위한 공통 코드를 작성한다.
/* Mobile Device*/
	768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다.
/* Tablet & Desktop Device */
@media all and (min-width: 768px) {
    사용자 해상도가 768px 이상일 때 이 코드가 실행됨.
}
/* Tablet  Device */
@media all and (min-width: 768px) and (max-width: 1024px) {
    사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.
}
/* Desktop Device */
@media all and (min-width: 1025px) {
    사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.
}

  • 반응형 이미지 (Responsive Image)

    img {
    max-width: 100%;
    height: auto;
}	
// 부모 영역의 크기가 이미지 보다 작을 경우 최대 부모 영역만큼만 커진다.
// 부모 영역의 크기가 이미지 보다 클 경우 원본의 최대 이미지 크기만큼만 커진다.

    • Issues

      • 고해상도 디스플레이는 해상도가 너무 높아서 더 많은 픽셀을 필요로 하고, 하나의 픽셀을 여러 개로 늘리기 때문에 이미지 선명도가 오히려 떨어질 수 있다. -> 이러한 해상도 이슈에 대응해야 한다.
      • 비트맵(Bitmap) 이미지 보다는 SVG(Scalable Vector Graphics) 이미지가 각광을 받고 있다.
      • 아트 디렉션(Art Direction) 처리
        • 큰 이미지일때 전달하는 메시지와 작은 이미지일 때 전달하는 메시지가 다를 수 있기 때문에 이미지 전체 비율을 줄이거나(Scale down), 강조하고 싶은 부분만을 크롭(Crop) 처리 하는 기법을 사용한다.
      • 다양한 이미지 포맷 대응
        • 벡터 형식의 이미지인 SVG
        • 구글에서 제안한 WebP
        • 마이크로소프트의 JPEG-XR
        • FlashPix 같은 형식

    • 이슈에 대한 해결 방안

      • srcset과 sizes 속성

        <img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">
        • 해상도에 따라서 각기 다른 이미지를 보여준다.
        • 이미지 크기에 따라 용량도 달라질 수 있으므로 성능에도 영향을 미친다.

      • picture element

        • picture element는 반드시 img 태그를 포함해야 한다. (picture element 지원 안할 시 폴백 용도)
        <picture>
    <source media="(min-width: 40em)"
            srcset="big.jpg 1x, big-hd.jpg 2x">
    <source
            srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="fallback.jpg" alt="">
</picture>

      • 배경이미지 처리

        /* 일반 해상도 배경이미지 */
.rwd-bg {
    widht: 100px;
    height: 100px;
    background: url(img/bg.png) no-repeat;
    background-size: cover;
}
/* 고 해상도 디스플레이 감지 */
@media only screen and (min-device-pixel-ratio: 2) {
    .rwd-bg {
        background-image: url(img/@2x/bg.png);
    }
}
// 해상도 1배율은 96dpi(ppi)
// 2배율은 192dpi(ppi)


Grid Layout

댓글남기기

참고