CSS layout 종류

HTML의 Layout

HTML의 Layout은 웹페이지를 구성하는 요소들을 배치하는 방법을 의미해요. 웹페이지에서 텍스트, 이미지, 버튼 같은 요소들이 어디에, 어떻게 놓일지를 정하는 거죠. HTML로 기본 구조를 만든 뒤, CSS를 사용해 레이아웃을 꾸미고 조정합니다.

---

CSS Layout 종류

1. Flexbox (Flexible Box Layout)

• 특징: 한 방향(가로 또는 세로)으로 요소를 정렬하고 공간을 효율적으로 나눌 수 있도록 도와줍니다.
• 사용 예: 아이템을 가로로 정렬하거나, 중앙에 정렬할 때 적합해요.

<div style="display: flex; justify-content: center; align-items: center; height: 200px; background: lightblue;">
  <div style="width: 100px; height: 100px; background: coral;">A</div>
  <div style="width: 100px; height: 100px; background: teal;">B</div>
  <div style="width: 100px; height: 100px; background: gold;">C</div>
</div>

• 결과: 박스 A, B, C가 가로로 나란히 정렬되며, 가운데 위치합니다.

---

2. CSS Grid Layout

• 특징: 행(row)과 열(column)을 사용해 2차원 레이아웃을 설계합니다. 복잡한 페이지 디자인에 유용합니다.
• 사용 예: 사진 갤러리, 카드 레이아웃 등을 만들 때 적합해요.

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background: lightgray;">
  <div style="background: coral;">1</div>
  <div style="background: teal;">2</div>
  <div style="background: gold;">3</div>
  <div style="background: lightgreen;">4</div>
</div>

• 결과: 박스 4개가 3개의 열로 나뉘어 배치됩니다. 각 열의 너비는 동일하며, 박스 간의 간격은 10px입니다.

---

3. Float Layout

• 특징: 원래는 텍스트를 감싸기 위해 만들어졌지만, 과거에는 요소를 배치하는 데 많이 사용됐습니다. 지금은 Flexbox나 Grid가 더 주로 사용됩니다.
• 사용 예: 간단한 이미지를 정렬하거나 레이아웃을 나눌 때 사용했어요.

<div style="overflow: hidden;">
  <div style="float: left; width: 30%; height: 100px; background: coral;">Left</div>
  <div style="float: left; width: 70%; height: 100px; background: lightblue;">Right</div>
</div>

• 결과: 첫 번째 박스가 왼쪽에, 두 번째 박스가 오른쪽에 배치됩니다.

---

요약

1. Flexbox: 한 줄에 정렬하거나 중앙 정렬 등 간단한 배치.
2. Grid: 행과 열을 사용해 복잡한 2차원 배치.
3. Float: 예전 방식, 단순 정렬에 사용되지만 이제는 잘 안 씀.

Flex와 Grid는 현대적인 레이아웃 설계에서 가장 많이 사용됩니다. 🙂