HTML / CSS 실습 회고 - 2

HTML/CSS에서 시맨틱 태그, alt 속성, 그리고 클래스 활용의 중요성

웹 개발에서 시맨틱 태그와 적절한 속성 사용은 웹 접근성을 높이고 유지보수를 용이하게 만듭니다. 이번 글에서는 h1 태그와 alt 속성의 의미 있는 사용, 그리고 nth-child 대신 클래스를 활용한 스타일링의 중요성을 이론과 예제를 통해 정리해보겠습니다.

1. 시맨틱 태그와 헤딩 구조

문제점

초기 코드에서는 다음과 같은 문제가 있었습니다:
1. 헤딩 구조의 단절: h2 이후 바로 h6을 사용하여 시맨틱 구조가 깨짐.
2. 스타일을 위한 헤딩 태그 남용: 헤딩 태그는 문서의 계층 구조를 표현하기 위한 용도인데, 단순히 스타일링 목적으로 사용됨.

수정 과정

수정 전 코드:

<header class="header">
  <h1 class="logo">
    <a href="https://www.coupang.com/">
      <img src="./assets/logo/logo.png" alt="쿠팡 로고 이미지" />
    </a>
  </h1>
</header>
<section class="section">
  <div class="today-discovery-headline">
    <h2 class="title-medium-24">오늘의 발견</h2>
    <h6 class="title-medium-16 subtitle">
      <span role="separator" aria-orientation="vertical">|</span>
      오늘 쿠팡이 엄선한 가장 핫한 제품
    </h6>
  </div>
</section>

수정 후 코드:

<header class="header">
  <h1 class="logo">
    <a href="https://www.coupang.com/">
      <img src="./assets/logo/logo.png" alt="쿠팡" />
    </a>
  </h1>
</header>
<section class="section">
  <div class="today-discovery-headline">
    <h2 class="title-medium-24">오늘의 발견</h2>
    <h3 class="title-medium-16 subtitle">
      <span role="separator" aria-orientation="vertical">|</span>
      오늘 쿠팡이 엄선한 가장 핫한 제품
    </h3>
  </div>
</section>

개선 사항

1. 헤딩 구조의 연속성 유지: h2 다음에 h3를 사용하여 문서 계층 구조를 명확히 표현.
2. 스타일링은 CSS로 처리: 헤딩 태그를 스타일링 목적으로 사용하는 대신, CSS 클래스(title-medium-16)를 활용.
3. alt 속성의 의미 부여: 로고 이미지의 alt 값을 "쿠팡 로고 이미지"에서 "쿠팡"으로 변경하여 간결하면서도 명확하게 표현.

왜 중요한가?

• 시맨틱 구조 유지: 검색 엔진과 스크린 리더가 문서를 올바르게 해석할 수 있도록 돕습니다.
• 접근성 향상: 스크린 리더 사용자는 alt 텍스트를 통해 이미지를 이해합니다.
• 유지보수 용이성: 스타일링은 CSS로 분리하여 HTML 구조와 디자인을 독립적으로 관리할 수 있습니다.

2. nth-child 대신 클래스 활용

문제점

초기 코드에서는 nth-child 선택자를 사용해 카드 레이아웃을 스타일링했습니다. 그러나 이는 다음과 같은 문제를 야기합니다:
1. 요소 순서가 변경되면 스타일이 깨질 위험이 있음.
2. 코드 가독성이 떨어짐(어떤 요소가 어떤 스타일을 가지는지 명확하지 않음).

수정 과정

수정 전 코드:

<div class="card-link-column">
  <a href="/">
    <div class="card-content" tabindex="0">
      <img src="./assets/discovery/honeytea.jpg" alt="오뚜기 따뜻한 차 향기" class="product-card-image" />
      <div class="arrow-icon-container" tabindex="0">
        <img src="./assets/icon/angle-right-square.svg" alt="화살표 아이콘" />
      </div>
    </div>
  </a>
</div>

.card-link-column:nth-child(-n + 2) {
  width: 50%;
  float: left;
  padding: 10px;
}

.card-link-column:nth-child(n + 3):nth-child(-n + 6) {
  width: 25%;
  float: left;
  padding: 10px;
}

수정 후 코드:

<ul class="card-link">
  <li class="card-link-item big">
    <a href="/" class="card-content">
      <img src="./assets/discovery/honeytea.jpg" alt="오뚜기 따뜻한 차 향기" class="product-card-image" />
      <span class="purchase-icon-container" aria-label="구매하기">
        <img src="./assets/icon/angle-right-square.svg" alt="구매하기 아이콘" />
      </span>
    </a>
  </li>
</ul>

.card-link {
  list-style: none;
  padding-left: 0;
}

.card-link-item {
  float: left;
  padding: 10px;
}

.card-link-item.big {
  width: 50%;
}

.card-link-item.small {
  width: 25%;
}

개선 사항

1. 클래스 기반 스타일링: 각 카드에 명확한 클래스(big, small)를 부여하여 역할과 크기를 정의.
2. 가독성 향상: 클래스 이름만 보고도 요소의 크기와 레이아웃을 쉽게 이해할 수 있음.
3. 변경에 유연함: HTML 요소 순서가 바뀌더라도 스타일이 깨지지 않음.

3. 요약 및 결론

시맨틱 태그와 접근성

• 헤딩 태그는 문서 계층 구조를 표현하는 데 사용하며, 디자인 목적으로 남용하지 않아야 합니다.
• alt 속성은 이미지의 의미를 간결하고 명확하게 전달해야 합니다.

클래스 기반 스타일링

• nth-child 선택자는 특정 상황에서 유용하지만, 요소 순서 변경에 취약하므로 클래스 기반 접근법이 더 안전하고 유지보수에 용이합니다.

최종 메시지

HTML과 CSS는 단순히 화면에 보이는 요소를 만드는 도구가 아니라, 사용자 경험(UX)과 접근성을 고려해야 하는 중요한 기술입니다. 시맨틱 태그와 적절한 속성 사용, 그리고 명확한 클래스 네이밍은 더 나은 웹 개발로 가는 첫걸음임. 위 내용을 바탕으로 프로젝트나 과제에서 코드를 작성할 때 항상 "구조적 의미", "접근성", "유지보수성"을 염두하자!