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

강의 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;
}

이 예에서는:

• 머리글과 바닥글은 높이와 배경색이 고정되어 있으며, 메인 콘텐츠는 나머지 공간을 채울 정도로 확장됩니다.
• Flexbox는 콘텐츠를 수직으로 정렬하고 배포하는 데 사용됩니다.

연습

1. 플로트를 사용하여 2열 레이아웃을 만드는 간단한 웹페이지를 만듭니다.
2. Flexbox를 사용하여 반응형 탐색 모음을 디자인하세요.
3. CSS 그리드를 사용해 다양한 행과 열 크기로 다중 열 레이아웃을 만들어 보세요.

---

다음: 다음 강의에서는 미디어 쿼리를 사용한 반응형 웹 디자인을 살펴보겠습니다. 여기서 레이아웃을 다양한 화면 크기에 맞게 조정하고 장치. 계속 지켜봐주세요!

---

Linkedin에서 나를 팔로우하세요

리도이 하산

위 내용은 CSS 레이아웃 - 부동 소수점, Flexbox 및 그리드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!