[CSS Grid] 레이아웃에 어울리는 태그 세트

CSS Grid 레이아웃 자체는 어떤 HTML 태그와도 잘 작동하지만, 의미론적 HTML을 유지하는 것이 웹 접근성과 유지보수성에 도움이 될 수 있는 태그 세트는 어떤 것이 있어?

 

CSS Grid 레이아웃을 사용할 때, 의미론적 HTML을 유지하면서 웹 접근성과 유지보수성을 높일 수 있는 다양한 HTML 태그 세트가 있습니다. 각 태그는 특정 의미와 용도를 가지고 있어, 콘텐츠의 구조와 의미를 명확하게 전달할 수 있습니다. 다음은 이러한 태그 세트의 예시입니다.

1. 네비게이션 바

<nav class="grid-container">
  <ul class="grid-item">
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

 

• nav: 네비게이션 링크 그룹을 정의
• ul/li: 목록 항목을 구조화
• a: 링크 요소

 

 

2. 아티클 및 섹션

<article class="grid-container">
  <header class="grid-item">
    <h1>Article Title</h1>
  </header>
  <section class="grid-item">
    <h2>Section Title</h2>
    <p>Content goes here...</p>
  </section>
  <footer class="grid-item">
    <p>Article footer information...</p>
  </footer>
</article>

 

• article: 독립적인 콘텐츠 블록을 정의
• header: 아티클의 헤더를 정의
• section: 문서의 섹션을 정의
• footer: 아티클의 푸터를 정의

 

 

3. 카드 레이아웃

<div class="grid-container">
  <article class="grid-item">
    <h2>Card Title 1</h2>
    <p>Card content...</p>
    <a href="#">Read more</a>
  </article>
  <article class="grid-item">
    <h2>Card Title 2</h2>
    <p>Card content...</p>
    <a href="#">Read more</a>
  </article>
  <article class="grid-item">
    <h2>Card Title 3</h2>
    <p>Card content...</p>
    <a href="#">Read more</a>
  </article>
</div>

 

• div: 그리드 컨테이너로 사용
• article: 각각의 카드 요소

 

 

4. 양식 레이아웃

<form class="grid-container">
  <div class="grid-item">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="grid-item">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="grid-item">
    <button type="submit">Submit</button>
  </div>
</form>

 

• form: 양식을 정의
• label: 입력 필드에 대한 레이블을 정의
• input: 다양한 타입의 입력 필드를 정의
• button: 제출 버튼

 

 

5. 레이아웃 그리드

<header class="grid-container">
  <div class="grid-item">
    <h1>Site Title</h1>
  </div>
</header>
<main class="grid-container">
  <section class="grid-item">
    <h2>Main Content</h2>
    <p>Content goes here...</p>
  </section>
  <aside class="grid-item">
    <h2>Sidebar</h2>
    <p>Additional content...</p>
  </aside>
</main>
<footer class="grid-container">
  <div class="grid-item">
    <p>Footer information...</p>
  </div>
</footer>

 

• header: 페이지나 섹션의 헤더를 정의
• main: 문서의 주요 콘텐츠를 정의
• section: 주요 콘텐츠의 섹션을 정의
• aside: 주요 콘텐츠와 관련된 부가 콘텐츠를 정의
• footer: 페이지나 섹션의 푸터를 정의

 

 

CSS Grid 스타일 예시

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

이렇게 의미론적 HTML 요소를 사용하면, 웹 접근성과 SEO 최적화에 도움이 되며, 유지보수성도 높아집니다. 의미론적 태그를 사용하여 구조를 명확히 하고, CSS Grid를 통해 레이아웃을 유연하게 조정할 수 있습니다.

주요 차이점

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

🐤 관련글 참고

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