Udacity - Responsive Web Design

170201 유다시티

Responsive Web Design Fundamentals

컴퓨터보다 모바일을 더 많이 이용하는 세상이다. 그러므로 response design을 하지 않으면 안된다. 다양한 기기의 size별로 적용이 되도록 해야한다.

Simulator / Emulator

Emulator는 한 시스템에서 다른 시스템을 복제한다. 그리하여 두 번째 시스템이 첫 번째 시스템을 따라 행동하는 것이다. 외부의 행동에 대해 똑같이 따라하려고 하는 이 관점은 시뮬레이션과는 정 반대이다. 왜냐하면, 시뮬레이션은 자주 내부 상태와 관련하여, 흉내내는 시스템의 추상적인 모델과 관계가 있기 때문이다. Simulation은 실제로 실행하기 어려운 실험을 간단히 행하는 모의실험을 뜻한다.

• crome Web Development : ⌘+⌥+j

Pixels

• Device Independent Pixels

• Hardware Pixels

Hardware Pixels / DPR = DIP

setting the viewport

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

viewport를 셋팅하는 것을 잊지마라!

CSS는 viewport가 overview되는 것을 허락한다.

img, embed, object, video {
    max-width: 100%
}

를 설정해주는 것을 추천한다.

적어도 클릭(보여야)하는건 48px는 되어야한다.

button {
    min-width: 48px;
    min-height: 48px;
}

https://www.w3.org/community/webed/wiki/CSS/Properties#Border

Stylesheet

<link rel="stylesheet" media="screen and (min-width: 500px)" href="name.css">

media

@media screen and (min-width: 500px){
    body{background-color: green;}
}

@import url("no.css") only screen and (min-width: 500px);

import tag는 피해라!

min-devise-width나 max-devise-width의 사용을 피해라. 왜냐하면 기계의 화면의 값을 가져오는 것인데 안드로이드의 경우에는 잘못된 값을 반환하는 경우도 있다.

Breakpoints

: the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

• breakpoint를 어디에 설정해야하나요?

  based on specific devices, products, brand names or anything else, will almost always result in a maintenance nigthmare.

breakpoint는 발견하는 것이다.

Flexbox

display: flex;
flex-wrap: wrap;

flex는 row가 기준이다. flex-wrap: wrap은 가려지는 경우 다음줄로!

header{ width: 100%; order: 1;}
.red{ width: 50%; order:2; }

order은 나타나는 순서를 나타낸다.

Patterns

1. Mostly Fluid

   <div class="container">
     <div class="box dark_blue"></div>
     <div class="box light_blue"></div>
     <div class="box green"></div>
     <div class="box red"></div>
     <div class="box orange"></div>
   </div>

   .container{
    display: flex;
    flex-wrap: wrap;
   }
   .box{
    width: 100%;
   }
   @media screen and (min-width: 450px){
    .light_blue, .green{
        width: 50%;
    }
   }
   @media screen and (min-width: 550px){
    .dark_blue, .light_blue,{
        width: 50%;
    }
     .green, .red, .orange{
         width: 33.333333%;
     }
   }
   @media screen and (min-width: 700px){
    .container{
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
   }

2. Layout Shifter

   <div class="container">
    <div class="box dark_blue"></div>
    <div class="container" id="container2">
        <div class="box light_blue"></div>
        <div class="box green"></div>
    </div>
    <div class="box red"></div>
   </div>

   .container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
   }
   .box{
    width: 100%;
   }
   @media screen and (min-width: 500px){
    .dark_blue{
        width: 50%;
    }
    #container2{
        width: 50%;
    }
   }
   @media screen and (min-width: 600px){
    .dark_blue{
        width: 25%;
        order: 1;
    }
    #container2{
        width: 50%;
    }
    .red{
        width: 25%;
        order: -1;
    }
   }

3. Column Drop

   <div class="container">
    <div class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
   </div>

   .container{
    display: flex;
    flex-wrap: wrap;
   }
   .box{
    width: 100%;
   }
   @media screen and (min-width: 450px){
    .dark_blue{
        width: 25%;
    }
    .light_blue{
        width: 75%;
    }
   }
   @media screen and (min-width: 550px){
    .dark_blue, .green{
        width: 25%;
    }
    .light_blue{
        width: 50%;
    }
   }

4. Off Canvas

   menu.addEventListener('click', function(e) {
   drawer.classList.toggle('open');
   e.stopPropagation();
   });

   nav {
   width: 300px;
   position: absolute;
   /* This trasform moves the drawer off canvas. */
   -webkit-transform: translate(-300px, 0);
   transform: translate(-300px, 0);
   /* Optionally, we animate the drawer. */
   transition: transform 0.3s ease;
   }
   nav.open {
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   }
   @media screen and (min-width: 600px){
    nav{
         position: relative;
         transform: translate(0,0);
    }
    body{
        display: flex;
        flex-flow: row nowrap;
    }
    main{
        width: auto;
        flex-grow: 1;
    }
   }

Responsive Tables

• Hidden Column : display: none;은 보여지지 않게 숨기는 것.

• No More Tables :

       table {
        border: 1px solid #ddd;
      }
      tr:nth-child(odd) {
        background-color: #f9f9f9;
      }
      @media screen and (max-width: 500px) {
        table, thead, tbody, th, td, tr {
          display: block;
        }
        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
        td {
          position: relative;
          padding-left: 50%;
        }
        td:before {
          position: absolute;
          left: 6px;
          content: attr(data-th);
          font-weight: bold;
        }
        td:first-of-type {
          font-weight: bold;
        }
      }

            td {
        min-width: 75px;
        text-align: center;
      }
      th:first-of-type {
        min-width: 125px;
      }
      div {
        width: 50%;
        overflow-x: auto;
      }

Minor BreakPoints

:fontsize, icon size과 같은 사소한 변화