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

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

 

CSS Flexbox 레이아웃을 사용할 때도 마찬가지로 의미론적 HTML 태그를 사용하여 구조를 명확히 하고 웹 접근성과 유지보수성을 높일 수 있습니다. 다음은 CSS Flexbox를 사용하여 레이아웃을 구성할 때 적합한 HTML 태그 세트와 예시입니다.

1. 네비게이션 바

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

<style>
.flex-container {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}

.flex-item a {
  text-decoration: none;
  padding: 10px;
}
</style>

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

2. 아티클 및 섹션

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

<style>
.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-item {
  margin: 10px 0;
}
</style>

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

3. 카드 레이아웃

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

<style>
.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-item {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px;
  text-align: center;
  flex: 1;
}
</style>

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

4. 양식 레이아웃

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

<style>
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flex-item {
  display: flex;
  flex-direction: column;
}
</style>

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

5. 레이아웃 그리드

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

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

main {
  display: flex;
}

.flex-item {
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
}
</style>

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

CSS Flex 스타일 예시

.flex-container {
  display: flex;
  gap: 10px;
}

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

CSS Flexbox를 사용하여 레이아웃을 구성할 때도 HTML의 의미론적 요소를 사용하면, 구조가 명확해지고 웹 접근성과 SEO가 향상됩니다. Flexbox는 주로 일차원(가로 또는 세로) 레이아웃에 적합하며, 요소들의 크기 조정 및 정렬에 유연성을 제공합니다.

 

주요 차이점

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

🐤 관련글 참고

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