CSS 레이아웃 - 부동 소수점, Flexbox 및 그리드-CSS 튜토리얼-php.cn

CSS 레이아웃 - 부동 소수점, Flexbox 및 그리드

WBOY

풀어 주다： 2024-09-03 14:55:48

원래의

1105명이 탐색했습니다.

CSS Layouts - Floats, Flexbox, and Grid

강의 5: CSS 레이아웃 - Float, Flexbox 및 Grid

이번 강의에서는 CSS로 레이아웃을 만드는 데 필수적인 기술을 살펴보겠습니다. float, Flexbox 및 Grid를 사용하여 콘텐츠를 구성하는 방법을 이해하면 반응성이 뛰어나고 잘 구성된 웹 사이트를 구축할 수 있습니다. 이 강의가 끝나면 다양한 화면 크기와 장치에 적합한 레이아웃을 만들 수 있게 될 것입니다.

CSS 레이아웃 기술 이해

CSS는 각각 고유한 사용 사례가 있는 여러 가지 레이아웃 기술을 제공합니다. Floats, Flexbox 및 Grid의 세 가지 기본 방법을 다룰 것입니다.

1. 수레

플로트는 원래 이미지 주위에 텍스트를 배치하기 위해 설계되었지만 레이아웃을 만드는 데 널리 사용되었습니다. 대부분 새로운 기술로 대체되었지만 특정 상황에서는 여전히 유용합니다.

예:

  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

로그인 후 복사

HTML:

  <div class="clearfix">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
  </div>

로그인 후 복사

이 예에서는 두 개의 div가 왼쪽과 오른쪽으로 부동되어 2열 레이아웃을 생성합니다.

2. 플렉스박스

Flexbox는 강력한 정렬 및 배포 기능을 제공하는 보다 현대적인 레이아웃 기술입니다. 유연하고 반응성이 뛰어난 레이아웃을 만드는 데 적합합니다.

예:

  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-item {
    flex: 1;
    margin: 10px;
  }

로그인 후 복사

HTML:

  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>

로그인 후 복사

여기서 .flex-container는 Flexbox를 사용하여 세 항목을 동일한 간격으로 컨테이너 전체에 균등하게 배포합니다.

3. CSS 그리드

그리드는 CSS에서 가장 강력한 레이아웃 시스템으로, 행과 열을 정밀하게 제어하여 복잡한 2차원 레이아웃을 만들 수 있습니다.

예:

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
  }

  .grid-item {
    padding: 20px;
    background-color: #ccc;
  }

로그인 후 복사

HTML:

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

로그인 후 복사

이 예에서는 두 개의 열이 있는 그리드 레이아웃을 만듭니다. 첫 번째 열은 공간의 한 부분을 차지하고 두 번째 열은 두 부분을 차지하며 항목 간 간격은 10px입니다.

실제 예:

Flexbox를 사용하여 머리글, 본문, 바닥글을 정렬하는 간단한 웹페이지 레이아웃을 만들어 보겠습니다.

HTML:

<div class="flex-container">
  <header class="flex-item header">Header</header>
  <main class="flex-item main">Main Content</main>
  <footer class="flex-item footer">Footer</footer>
</div>

로그인 후 복사

CSS:

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

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

로그인 후 복사

이 예에서는: