코딩ㆍ개발 정보/HTML 연습

[CSS Grid & Flex] 같은 레이아웃을 표현한 예제

RioRex 2024. 7. 26.

grid 레이아웃이나, flex 레이아웃 모두 HTML의 의미론적 접근을 하게 되면 같은 레이아웃이 나오게 되네.
GRID는 2차원 이상, Flex 일차원이 적합하다는게 맞지?

네, 맞습니다. CSS Grid와 Flexbox 모두 HTML의 의미론적 접근을 통해 웹 접근성과 유지보수성을 높일 수 있습니다. 두 레이아웃 시스템은 목적과 용도에 따라 다른데, 이를 고려하여 적절히 사용하면 됩니다.

주요 차이점

CSS Grid: 2차원 레이아웃(행과 열)을 다루기에 적합합니다. 전체 페이지 레이아웃이나 복잡한 레이아웃 구조를 만들 때 유용합니다.
CSS Flexbox: 1차원 레이아웃(행 또는 열)을 다루기에 적합합니다. 개별적인 UI 요소의 정렬, 크기 조정 등에 유용합니다.

같은 레이아웃 예제

Grid 레이아웃 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 3fr 1fr;
      gap: 10px;
    }
    .header, .footer {
      grid-column: span 3;
      background-color: lightgray;
      text-align: center;
      padding: 10px;
    }
    .sidebar {
      background-color: lightblue;
      padding: 10px;
    }
    .main-content {
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Flex 레이아웃 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Layout Example</title>
  <style>
    .flex-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .header, .footer {
      background-color: lightgray;
      text-align: center;
      padding: 10px;
    }
    .content-container {
      display: flex;
      gap: 10px;
    }
    .sidebar {
      background-color: lightblue;
      padding: 10px;
      flex: 1;
    }
    .main-content {
      background-color: lightgreen;
      padding: 10px;
      flex: 3;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="header">Header</div>
    <div class="content-container">
      <div class="sidebar">Sidebar</div>
      <div class="main-content">Main Content</div>
      <div class="sidebar">Sidebar</div>
    </div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

비교

Grid 레이아웃에서는 grid-template-columns와 grid-column을 사용하여 행과 열을 설정하고 요소를 배치합니다.
Flex 레이아웃에서는 flex-direction과 flex 속성을 사용하여 요소들을 정렬하고 크기를 조정합니다.

두 방법 모두 의미론적 HTML 요소를 사용하여 접근성을 높일 수 있으며, 필요에 따라 각각의 장점을 살려 사용하면 됩니다. Grid는 복잡한 2차원 레이아웃에, Flex는 단순한 1차원 레이아웃과 정렬에 특히 유용합니다.

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[CSS] grid-template-columns의 repeat를 포함한 속성 설명 (0)	2024.07.26
[CSS] grid-template-columns의 repeat를 포함한 속성 설명 (0)	2024.07.26
[CSS Flex] 레이아웃에 어울리는 태그 세트 (0)	2024.07.26
[CSS Grid] 레이아웃에 어울리는 태그 세트 (0)	2024.07.26
[HTML] href 설정, ="javascript://" 와 ="void(0)" (0)	2024.07.26