CodeGym/행동/Frontend SELF KO/반응형 그리드

반응형 그리드

사용 가능

3.1 Flexbox

Flexbox와 Grid를 사용하는 유연한 레이아웃 만들기는 현대 반응형 웹사이트 개발의 핵심 기술이야. 이 기술들은 페이지에서 요소들의 위치를 쉽게 관리할 수 있게 해주고, 다양한 화면 크기와 기기에 적응할 수 있도록 해줘.

Flexbox (Flexible Box Layout Module)는 요소를 한 줄 또는 한 열로 배치하는 일차원 레이아웃을 위해 만들어졌어. Flexbox는 유연하고 반응형인 레이아웃을 쉽게 만들어줘.

Flexbox의 주요 개념:

  • Flex-container: display: flex 속성이 적용되는 요소
  • Flex-item: flex-container의 자식 요소로, 그 안에 배치되는 요소

Flexbox 속성

Flex-container:

  • display: flex: 요소를 flex-container로 설정
  • flex-direction: flex-item의 배치 방향 설정 (row, column, row-reverse, column-reverse)
  • justify-content: 메인 축을 따라 flex-item 정렬 (flex-start, flex-end, center, space-between, space-around)
  • align-items: 교차 축을 따라 flex-item 정렬 (stretch, flex-start, flex-end, center, baseline)

Flex-item:

  • flex-grow: 여유 공간이 있을 때 요소가 커질 수 있는 능력
  • flex-shrink: 공간이 부족할 때 요소가 줄어들 수 있는 능력
  • flex-basis: 여유 공간 분배 전에 요소의 초기 크기 설정
  • align-self: align-items에 의해 지정된 교차 축 정렬을 덮어씌움

Flexbox 사용 예제

화면 크기에 따라 적응하는 세 개의 열을 가진 레이아웃을 만들어 보자:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 예제</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
      }

      .flex-item {
        flex: 1 1 200px;
        margin: 10px;
        padding: 20px;
        background-color: #f4f4f4;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">열 1</div>
      <div class="flex-item">열 2</div>
      <div class="flex-item">열 3</div>
    </div>
  </body>
</html>

코드 설명:

  • .flex-container: 요소를 flex-container로 정의하고, 요소들 사이에 균등한 간격을 두며 공간이 부족할 때 다음 줄로 넘길 수 있게 해줘
  • .flex-item: flex-item은 동일한 공간을 차지하고, 최소 너비 200px을 가지고 있으며 container 내에서 균등하게 배치되어 있어

3.2 CSS Grid

CSS Grid Layout은 행과 열을 사용하여 복잡한 레이아웃을 만들 수 있는 2차원 레이아웃 시스템이야.

CSS Grid의 주요 개념:

  • Grid-container: display: grid 속성이 적용되는 요소
  • Grid-item: grid-container의 자식 요소로, 그리드에 배치되는 요소

CSS Grid 속성

Grid-container:

  • display: grid: 요소를 grid-container로 설정
  • grid-template-columns: 그리드의 열 수와 크기를 설정
  • grid-template-rows: 그리드의 행 수와 크기를 설정
  • gap: 행과 열 사이의 간격을 관리
  • justify-items: grid-item의 수평 정렬을 관리
  • align-items: grid-item의 수직 정렬을 관리

    Grid-item:

  • grid-column: 요소가 확장 될 열의 수를 정의
  • grid-row: 요소가 확장 될 행의 수를 정의
  • justify-self: 요소의 수평 정렬을 덮어씌움
  • align-self: 요소의 수직 정렬을 덮어씌움

CSS Grid 사용 예제

화면 크기에 따라 적응하는 세 개의 열과 두 개의 행을 가진 레이아웃을 만들어 보자.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 예제</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
      }

      .grid-item {
        padding: 20px;
        background-color: #e4e4e4;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">항목 1</div>
      <div class="grid-item">항목 2</div>
      <div class="grid-item">항목 3</div>
      <div class="grid-item">항목 4</div>
      <div class="grid-item">항목 5</div>
      <div class="grid-item">항목 6</div>
    </div>
  </body>
</html>

코드 설명:

  • .grid-container: 요소를 grid-container로 정의하고, 세 개의 열과 두 개의 행을 가지고 있으며, 각 요소는 동일한 공간을 차지해
  • .grid-item: 균등한 패딩과 배경색을 가진 grid-요소들
1
과제
Frontend SELF KO,  레벨 25레슨 2
잠금
Flexbox 카드
Flexbox 카드
1
과제
Frontend SELF KO,  레벨 25레슨 2
잠금
유연한 그리드
유연한 그리드
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다