🎨 Responsive Web Design

Jake_YoungΒ·2020λ…„ 9μ›” 22일
1
post-thumbnail

😁 λ°˜μ‘ν˜• λ””μžμΈ

πŸ‘¨πŸ» ν˜„λŒ€ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ””μžμΈν•˜κΈ° μœ„ν•˜μ—¬

  • ν˜„λŒ€μ— λ“€μ–΄ μ‚¬μš©μžλŠ” λ‹€μ–‘ν•œ 기기둜 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ‹€ν–‰ν•˜κ²Œ λ˜μ—ˆλ‹€.
  • λ„“κ³  큰 λͺ¨λ‹ˆν„°λΆ€ν„° 손바λ‹₯λ§Œν•œ ν™”λ©΄μ˜ ν•Έλ“œν°κΉŒμ§€ λ‹€μ–‘ν•œ 기기에 μ΅œμ ν™”λœ λ””μžμΈμ€ μ–΄λ–»κ²Œ κ΅¬ν˜„ν•  수 μžˆμ„κΉŒ?
  • κ°„λ‹¨ν•œ λ°©λ²•μœΌλ‘œλŠ” 좜λ ₯ 기기의 μ‚¬μ΄μ¦ˆμ— 따라 화면을 μΆ•μ†Œμ‹œν‚€λŠ” 방법이 μžˆλ‹€.
  • ν•˜μ§€λ§Œ 이보닀 더 쒋은 λ°©λ²•μœΌλ‘œ 'λ°˜μ‘ν˜• λ””μžμΈ'이 μžˆλ‹€.
  • λ°”λ‘œ μ•„λž˜μ˜ μ˜ˆμ‹œμ²˜λŸΌ κ°€λ‘œ μ„Έλ‘œ λΉ„μœ¨μ— 따라 μ•„μ˜ˆ λ‹€λ₯Έ 포맷을 λ”°λ₯΄λŠ” λ””μžμΈμ„ ν•˜κΈ° μœ„ν•΄ μš°λ¦¬λŠ” 무엇을 λ°°μ›Œμ•Ό ν• κ°€?

πŸ‘©πŸ» λ°μŠ€ν¬ν†± vs νƒœλΈ”λ¦Ώ vs λͺ¨λ°”일


🀣 Viewport

πŸ‘ΆπŸ» Veiwportλž€?

  • λ·°ν¬νŠΈλž€ μ‚¬μš©μžκ°€ λ³Ό 수 μžˆλŠ” μ›ΉνŽ˜μ΄μ§€ μ˜μ—­λ₯Ό λ§ν•œλ‹€.
  • λ·°ν¬νŠΈλŠ” 기기에 따라 λ‹€λ₯΄λ‹€.

πŸ‘΅πŸ» Viewport μ„€μ •ν•˜κΈ°

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • μœ„ 섀정은 λΈŒλΌμš°μ €κ°€ νŽ˜μ΄μ§€μ˜ 크기와 좕적을 μ–΄λ–»κ²Œ μ‘°μ ˆν•  지 μ•Œλ €μ€€λ‹€.
  • width=device-widthλŠ” νŽ˜μ΄μ§€μ˜ 넓이λ₯Ό 슀크린의 넓이에 λ§žμΆ°μ€€λ‹€.
  • initial-scale=1.0λŠ” νŽ˜μ΄μ§€κ°€ 처음 λ‘œλ”©λ  λ•Œ ν™•λŒ€ λ ˆλ²¨μ„ 1둜 λ§žμΆ”μ–΄μ€€λ‹€.

πŸ‘΄πŸ» Viewport μ‚¬μš©μ‹œ μ£Όμ˜μ‚¬ν•­

  • μ‚¬μš©μžλ“€μ€ 기본적으둜 μŠ€ν¬λ‘€μ„ μœ„ μ•„λž˜λ‘œ 내리지 μ–‘μ˜†μœΌλ‘œ 움직이지 μ•ŠλŠ”λ‹€λŠ” 점을 μ•Œμ•„μ•Όν•œλ‹€.
  1. 큰 폭을 κ³ μ •κ°’μœΌλ‘œ κ°–λŠ” elementλ₯Ό 쓰지 마라.
    • λ§Œμ•½ νŽ˜μ΄μ§€ 뷰포트 넓이 보닀 큰 μš”μ†Œλ₯Ό μ“°κ²Œ 될 μ‹œ, μ‚¬μš©μžλŠ” 쒌우둜 μŠ€ν¬λ‘€μ„ ν•΄μ•Όν•œλ‹€.
    • element의 폭은 λ°˜λ“œμ‹œ 뷰포트의 폭에 λ§žμΆ”μ–΄ μž‘μ„±ν•˜λΌ.
  2. νŠΉμ • λ·°ν¬νŠΈμ— λ§žμΆ”μ–΄ λ””μžμΈν•˜μ§€ 마라.
    • μŠ€ν¬λ¦°μ€ 기기에 따라 크게 λ³€ν™”ν•œλ‹€.
    • κ·ΈλŸ¬λ―€λ‘œ 컨텐츠λ₯Ό νŠΉμ • 뷰포트의 폭에 맞좰 λ””μžμΈ ν•˜μ§€ 마라.
  3. μž‘μ€ ν™”λ©΄κ³Ό 큰 화면에 λ™μ‹œμ— μ μš©ν•  λ””μžμΈμ΄λΌλ©΄ 미디어쿼리λ₯Ό 써라
    • width: 100%λ₯Ό ν™œμš©ν•΄λΌ.
    • μœ„μΉ˜λ₯Ό μ •ν•  λ•Œλ„ 뷰포트λ₯Ό λ²—μ–΄λ‚˜μ§€ μ•Šλ„λ‘ μ£Όμ˜ν•΄λΌ.

😎 Grid-View

πŸ‘ΈπŸ» Grid-Viewλž€?

  • λ§Žμ€ μ‚¬μ΄νŠΈκ°€ κ·Έλ¦¬λ“œλ·°λ₯Ό 기본으둜 λ””μžμΈλ˜μ–΄ μžˆλ‹€.
  • κ·Έλ¦¬λ“œ λ·°λž€ νŽ˜μ΄μ§€λ₯Ό μ—¬λŸ¬κ°œμ˜ 컬럼으둜 λΆ„ν• ν•˜μ—¬ λ””μžμΈν•˜λŠ” 것을 λ§ν•œλ‹€.
  • λ°˜μ‘ν˜• κ·Έλ¦¬λ“œλ·°λΌκ³  말할 λ•ŒλŠ” 보톡 12개의 컬럼으둜 λ‚˜λˆ„λŠ” 것을 μ˜λ―Έν•œλ‹€.

🀴🏻 Responsive Grid-View μ μš©ν•˜κΈ°

  • κ°€μž₯ λ¨Όμ € λͺ¨λ“  element의 paddingκ³Ό borderκ°€ 전체 width와 height에 ν¬ν•¨λ˜λ„λ‘ μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•΄μ•Όν•œλ‹€.
    * {
      box-sizing: border-box;
    }
  • 이후 12가지 컬럼의 넓이λ₯Ό μ•„λž˜μ™€ 같이 μ •ν•œλ‹€.
  • 이 ν΄λž˜μŠ€λ“€μ΄ μ™Όμͺ½μ— 뢙을 수 μžˆλ„λ‘ float: leftλ₯Ό μ •ν•œλ‹€.
    [class*="col-"] {
      float: left;
      padding: 15px;
      border: 1px solid red;
    }
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  • μ΄λ ‡κ²Œ μ„€μ •ν•œ col- ν΄λž˜μŠ€λ“€μ€ 12개 λ‹¨μœ„λ§ˆλ‹€ div둜 κ°μ‹Έμ€˜μ•Ό ν•œλ‹€.
    <div class="row">
      <div class="col-3">...</div> <!-- 25% -->
      <div class="col-9">...</div> <!-- 75% -->
    </div>
  • (μ—¬κΈ°λŠ” 무슨 말인지 λͺ¨λ₯΄κ² λ‹€.)
  • The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:
    .row::after {
      content: "";
      clear: both;
      display: table;
    }

πŸ™„ Media Query

πŸ™‹πŸ»β€β™€οΈ Media Queryλž€?

  • λ―Έλ””μ–΄ μΏΌλ¦¬λž€ CSS3μ—μ„œ μ†Œκ°œλœ κΈ°μˆ μ΄λ‹€.
  • μ•„λž˜μ²˜λŸΌ μ“Έ 수 μžˆλ‹€.
    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }

πŸ™‹πŸ»β€β™‚οΈ 뢄기점을 μ •ν•˜μž

  • 768px을 κΈ°μ€€μœΌλ‘œ ν™”λ©΄μ˜ ꡬ성을 μ™„μ „νžˆ λ°”κΏ€ 수 μžˆλ‹€.
  • μ•„λž˜μ˜ μ½”λ“œμ™€ μ˜ˆμ‹œ 사진을 보자
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    @media only screen and (max-width: 768px) {
      /* For mobile phones: */
      [class*="col-"] {
        width: 100%;
      }
    }

πŸ™…πŸ»β€β™€οΈ λ°˜λ“œμ‹œ λͺ¨λ°”일 버전을 λ¨Όμ € λ””μžμΈν•˜λΌ!!

  • λͺ¨λ°”일 버전 λ””μžμΈμ΄ λλ‚œ 후에 뢄기점을 작고 λ°μŠ€ν¬νƒ‘ 버전을 λ””μžμΈν•΄λΌ
  • μ•„λž˜ μ½”λ“œμ™€ μ˜ˆμ‹œλ₯Ό 보자 (데λͺ¨ 링크)
  • 데λͺ¨ 링크λ₯Ό λˆ„λ₯΄κ³  우츑의 λ Œλ”λ§ νŽ˜μ΄μ§€μ˜ 넓이λ₯Ό 바꿔봐라
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

πŸ™…πŸ»β€β™‚οΈ 슀크린의 λ°©ν–₯에 따라 λ‹€λ₯Έ λ””μžμΈμ„ μ μš©ν•΄λΌ

  • 화면을 μ„Έμ›Œ μ‚¬μš©ν•  λ•Œμ™€ λˆ•ν˜€ μ‚¬μš©ν•  λ•ŒλŠ” λ‹€λ₯Έ λ””μžμΈμ΄ ν•„μš”ν•˜λ‹€
    @media only screen and (orientation: landscape) {
      body {
        background-color: lightblue;
      }
    }

πŸ§πŸ»β€β™€οΈ ν•„μš”μ— 따라 μš”μ†Œλ₯Ό 숨길 ν•„μš”λ„ μžˆλ‹€.

  • μž‘μ€ ν™”λ©΄μ—μ„œλŠ” λΆˆν•„μš”ν•œ μš”μ†Œλ₯Ό μˆ¨κΉ€ μ²˜λ¦¬ν•˜μž.
    @media only screen and (max-width: 600px) {
      div.example {
        display: none;
      }
    }
profile
μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 파이썬 그리고 컴퓨터와 λ„€νŠΈμ›Œν¬

0개의 λŒ“κΈ€