CodeGym /자바 코스 /Frontend SELF KO /반응형 레이아웃 기초

반응형 레이아웃 기초

Frontend SELF KO

레벨 25 , 레슨 0

사용 가능

1.1 모바일 우선 접근 방식 (Mobile-First)

Responsive design — 웹 사이트가 다양한 화면 크기와 장치에 적응할 수 있도록 하는 웹 개발 접근 방식으로, 최상의 사용 편의성을 제공합니다. 반응형 레이아웃의 주요 목표는 사용자가 어떤 장치를 사용하더라도 사이트가 편리하고 접근 가능하도록 하는 것입니다.

모바일 우선 접근 방식은 작은 화면의 모바일 장치용 디자인을 처음 만들고, 더 큰 화면으로 확장하는 것을 의미합니다. 이 방법은 사이트의 가장 중요한 요소와 기능에 집중할 수 있도록 도와줍니다.

모바일 우선 접근 방식의 장점:

모바일 사용자에게 최적화된 콘텐츠
작은 화면에 맞춘 디자인과 기능의 단순화
콘텐츠 양을 줄임으로써 성능 향상

예시:

CSS

    
      /* 모바일 장치용 기본 스타일 */

      body {
        font-size: 16px;
        margin: 0;
        padding: 0;
      }

      /* 더 큰 화면용 스타일 */

      @media (min-width: 768px) {
        body {
          font-size: 18px;
        }
      }

1.2 점진적 향상 (Progressive Enhancement)

점진적 향상은 모든 사용자에게 기본 기능을 제공한 다음, 더 강력한 브라우저 및 장치를 위해 개선 사항을 추가하는 것을 목표로 합니다. 이 접근 방식은 사용자의 장치가 일부 기능이나 스타일을 지원하지 않더라도 콘텐츠에 접근할 수 있게 보장합니다.

점진적 향상의 장점:

모든 사용자에게 기본 기능 제공
더 현대적인 장치를 가진 사용자에게 향상된 경험 제공
콘텐츠나 기능의 손실 위험 감소

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>점진적 향상</title>
          <style>
            /* 모든 브라우저에 대한 기본 스타일 */

            body {
              font-family: Arial, sans-serif;
            }

            /* 현대적인 브라우저에 대한 향상된 스타일 */

            @supports (display: grid) {
              .container {
              display: grid;
              grid-template-columns: 1fr 1fr;
              }
            }
          </style>
        </head>
        <body>
          <div class="container">
          <div>콘텐츠 1</div>
          <div>콘텐츠 2</div>
          </div>
        </body>
      </html>

1.3 레이아웃 유연성 (Fluid Layouts)

레이아웃 유연성은 다양한 화면 크기에 적응할 수 있는 유연한 요소를 사용하는 것을 의미합니다. 이는 화면 크기에 따라 자동으로 크기가 변경되는 유연한 컨테이너 사용을 포함할 수 있습니다.

레이아웃 유연성의 장점:

다양한 장치에서 콘텐츠 표시 향상
화면 크기 변경에 대한 더 나은 적응
사용 편의성과 콘텐츠 접근성 향상

예시:

HTML

    
      <div class="container">
        <div class="item-1">Content item 1</div>
        <div class="item-2">
          Etiam scelerisque lectus nulla, eget convallis orci convallis vel. Etiam sed interdum sem. Nunc vestibulum lectus nibh, in volutpat velit fermentum eget. Mauris in risus tincidunt, sodales odio et, rutrum ligula. In iaculis congue ex in laoreet. Sed id eros porttitor, finibus diam ultrices, consectetur leo. Fusce aliquam, nibh ac sollicitudin viverra, felis libero fringilla orci, nec auctor elit sapien non arcu. Proin dolor mi, iaculis ut velit id, vestibulum consectetur metus. Duis venenatis felis a diam elementum, eget ullamcorper leo scelerisque. Sed tempus euismod urna et tristique. Duis at odio quis libero commodo ullamcorper id vel odio. Maecenas volutpat rhoncus sodales. Mauris eget nunc accumsan, rhoncus massa at, placerat lorem.
          Etiam ullamcorper elementum tellus non euismod. Mauris euismod mi nisi, sed egestas ligula varius sed. Nunc tortor elit, hendrerit sed gravida in, tempus nec augue. Aliquam vitae condimentum velit. Sed id massa ac felis tempor elementum. Aenean at nulla ipsum. Fusce sed cursus tortor. Duis sodales rhoncus eros, non aliquam ante ultricies ut. Pellentesque auctor ultricies aliquet. In laoreet enim dolor, vel consectetur sapien laoreet eu.
          In efficitur pharetra ex convallis egestas. Praesent egestas, sapien fermentum consectetur vestibulum, quam dui pharetra urna, vitae finibus arcu lacus quis mauris. Quisque consectetur lorem sapien, nec pulvinar elit varius vitae. Cras elementum risus lacus, a interdum tellus euismod ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pharetra, odio vel facilisis venenatis, ipsum leo viverra ligula, ut venenatis enim ipsum ut lectus. Fusce cursus mollis congue.
        </div>
        </div>

CSS

    
      .container {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        color: white;
      }

      .item-1 {
        min-height: 50px;
        width: calc(100% / 3);
        float: left;
        background: purple;
      }

      .item-2 {
        background: gray;
      }

1.4 콘텐츠 계층 구조 (Content Hierarchy)

콘텐츠 계층 구조는 반응형 레이아웃에서 중요합니다. 왜냐하면 정보를 어떤 장치에서도 접근 가능하고 이해하기 쉽게 조직화할 수 있게 도와주기 때문입니다. 여기에는 제목, 단락, 목록 및 다른 요소를 올바르게 사용하여 명확하고 논리적인 구조를 만드는 것이 포함됩니다.

콘텐츠 계층 구조의 장점:

읽기 쉬운 정보 및 인식 향상
모든 사용자를 위한 콘텐츠 접근성 향상
사이트 탐색 및 상호작용의 용이성

예시:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>콘텐츠 계층 구조</title>
          <style>
            body {
              font-family: Arial, sans-serif;
              margin: 20px;
            }

            h1 {
              font-size: 2em;
            }

            h2 {
              font-size: 1.5em;
            }

            p {
              font-size: 1em;
              line-height: 1.5;
            }
          </style>
        </head>
        <body>
          <h1>주요 제목</h1>
          <h2>부제목</h2>
          <p>
            이는 부제목에 이어지는 텍스트 단락의 예입니다.
            텍스트는 모든 사용자가 쉽게 읽고 이해할 수 있어야 합니다.
          </p>
        </body>
      </html>

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION