[CSS In Depth] Responsive Design

Kyoorim LEE·2023년 6월 9일
0

8. 반응형 디자인

8.1 Mobile first

반응형 디자인의 첫 번째 원칙: 모바일 버전을 먼저 만들어라
데스크탑에 필요한 디자인을 다 만든 후 모바일 버전을 위해 scale down 하는 것이 더 힘들다.

모바일 버전을 먼저 갖춰놓은 후 데스크탑을 위한 기능들을 점진적으로 붙여나가는 것이 훨씬 편한 방법이다.

1) mobile size viewport

2) medium-sized viewport

3) large viewport

8.1.1 모바일 메뉴 만들기

🙌🏻 추후 데스크탑 버전에서 <nav>와 <header> 가 수직 방향으로 stack 될 수 있도록 <nav>를 <header> 안에 자식요소로 포함시키지 않고 형제요소로 구현함 

  <header id="header" class="page-header">
    <div class="title">
      <h1>Wombat Coffee Roasters</h1>
      <div class="slogan">We love coffee</div>
    </div>
  </header>

  <nav class="menu" id="main-menu">
    <button class="menu-toggle" id="toggle-menu">
      toggle menu
    </button>
    <div class="menu-dropdown">
      <ul class="nav-menu">
        <li><a href="/about.html">About</a></li>
        <li><a href="/shop.html">Shop</a></li>
        <li><a href="/menu.html">Menu</a></li>
        <li><a href="/brew.html">Brew</a></li>
      </ul>
    </div>
  </nav>
  • 모바일 버전에서 <header> 안에 <nav> 요소가 들어올 수 있도록 absolute positioning을 사용
    .menu {
      position: relative;
    }

    .menu-toggle {
      position: absolute;
      top: -1.2em;
      right: 0.1em;
      border: 0;
      background-color: transparent;
      font-size: 3em;
      width: 1em;
      height: 1em;
      line-height: 0.4;
      text-indent: 5em;
      white-space: nowrap;
      overflow: hidden;
    }
  • 모바일 버전을 반들 때는 key action이 일어나는 면적을 최대한 크게 해서 손가락으로 쉽게 탭할 수 있도록 하는 것이 관건이다!

8.1.2 meta tag

<meta> 태그를 붙여서 모바일 기기에서 모바일 버전을 위해 화면을 만들었음을 알려준다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wombat Coffee Roasters</title>
  ...

<meta> 태그의 content가 하는 기능은 다음과 같다.
- 브라우저가 CSS을 읽을 때 content에 의도된 device-width를 사용하라고 알려줌. 뷰포트의 너비를 디바이스의 너비와 동일하게 설정하기 때문에 웹 페이지가 디바이스 화면에 꽉 차게 표시됨
- 초기 축척을 1로 설정하여 웹 페이지가 처음 로드될 때 디바이스 화면에 균일하게 맞춰지도록 함. 초기 축척을 1로 설정하면 사용자가 확대 또는 축소하지 않은 경우에도 페이지가 올바른 크기로 표시됨.

8.2 미디어 쿼리

여러 viewport 사이즈를 사용할 경우 각 구간에 해당될 때 특정 기능이 나타날 수 있도록 설정함 

@media (min-width: 560px) {
  .title > h1 {
    font-size: 2.25rem;
  }
}

※ 미디어 쿼리 안에서 단위는 em을 쓰는 것이 좋다. 모든 브라우저에서 가장 안정적으로 작동되는 것은 물론 사용자의 글자 크기와 비례하여 scaling up / down 된다는 장점이 있다.

8.2.1 미디어 쿼리 타입 이해하기

  1. and : 두 조건을 모두 만족하는 경우 해당 미디어쿼리 실행됨
@media (min-width: 20em) and (max-width: 35em) { ... }
  1. , : 둘 중 한 조건만 만족해도 해당 미디어쿼리 실행됨
 @media (max-width: 20em), (min-width: 35em) { ... }
  1. min-height, max-height, orientation, min-resolution, max-resolution...
  • orientation: landscape—Targets viewports that are wider than they are tall
  • orientation: portrait—Targets viewports that are taller than they are wide
  • min-resolution: 2dppx—Targets devices with a screen resolution of 2 dots
    per pixel or higher; targets retina displays
  • max-resolution: 2dppx—Targets devices with a screen resolution of up to 2
    dots per pixel

<link>태그에도 적용할 수 있는 미디어쿼리

<link rel="stylesheet" media="(min-width: 45em)" href="large-screen.css" />

=> min-width 조건을 만족시킬때만 large-screen.css 파일을 적용시킨다는 뜻

  1. print
    사용자가 프린트를 했을 때 보이게 될 레이아웃을 컨트롤 하는 타입 - 배경이미지 지우기, 불필요한 navigation 지우기 등
@media print { *{
    color: black !important;
    background: none !important;
  }
}

8.2.2 breakpoint 설정하기

모바일 버전을 먼저 정한 후 min-width를 설정해 medium & large breakpoint를 정한다.

  • medium breakpoint

  1. Header 타이틀 제목 크기

  2. 배경화면 이미지 패딩과 글씨 크기

  3. 드롭다운 없애고 네비게이션 고정 

        .menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
}

.menu.is-open .menu-dropdown {
  display: block;
}

@media (min-width: 35em) {
  .menu-toggle {
    display: none;
  }

  .menu-dropdown {
    display: block;
    position: static;
  }
}

.menu.is-open .menu-dropdown {
  display: block;
}

다양한 반응형 패턴 보러가기

8.3 Fluid layout

: 뷰포트의 너비에 따라 컨테이너가 커지고 작아지는 것

고정된 값을 주지 않고 퍼센트(%)를 주는 것.

8.3.1 large viewport에 스타일 주기

  • 패딩
@media (min-width: 50em) {
  .page-header {
    padding: 1em 4em;
  }
}
@media (min-width: 50em) {
  .hero {
    padding: 7em 6em;
  }
}

@media (min-width: 50em) {
  main {
      padding: 2em 4em;
    }
}
  @media (min-width: 50em) {
    .nav-menu {
      padding: 0 4em;
    }
}
  • 폰트사이즈
:root {
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);
}
@media (min-width: 50em) {
  :root {
    font-size: 1.125em;
  }
}

8.3.2 표 다루기

모바일에서 fluid layout을 적용할때 표는 유독 구현 난이도가 높다. 이런 경우 데스크탑에서 보여주는 width를 그대로 고수하지 않고 display:block"을 사용하여 stacked tile 형태로 만드는 것을 고려해볼 수 있다.

8.4 반응형 이미지

모바일에서 화면을 보여줄 때 압축(compression)을 통해 이미지 용량을 줄이고 필요 이상의 해상도로 보여주지 않도록 유의한다.

8.4.1 뷰포트에 따른 여러 이미지 사용

뷰포트에 맞는 이미지를 각각 보여준다 

.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans-small.jpg);
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000;
}

@media (min-width: 35em) {
  .hero {
    padding: 5em 3em;
    font-size: 1.2rem;
    background-image: url(coffee-beans-medium.jpg);
} }

@media (min-width: 50em) {
  .hero {
    padding: 7em 6em;
    background-image: url(coffee-beans.jpg);
  }
}

8.4.2 srcset 사용하기

미디어 쿼리는 CSS를 통한 접근이라면, 만약 이미지가 <img>태그를 이용한 경우 srcset 속성을 이용할 수 있다.

브라우저가 판단하여 해당 뷰포트에 따른 이미지를 띄우게 된다. 

  <img alt="A white coffee mug on a bed of coffee beans"
       src="coffee-beans-small.jpg"
       srcset="coffee-beans-small.jpg 560w,
               coffee-beans-medium.jpg 800w,
               coffee-beans.jpg 1280w">
profile
Kyoorim LEE
oneThing
이전 포스트

[CSS In Depth] Grid layout

다음 포스트

AWS Route 53 이란 ?

0개의 댓글