BEM 구조로 실전 페이지 뚝딱 만들기 – 초보자도 가능한 마크업 설계

BEM 구조 실전 예제 – 카드 리스트 마크업 구조 이해하기

이론은 이해했지만, 직접 짜보지 않으면 아무 소용 없습니다.
오늘은 BEM 네이밍 규칙을 활용해서 심플한 카드 리스트 레이아웃을 만들어봅니다.

🛠 만들 대상: 카드 리스트

• 3개의 카드가 가로로 나열됨
• 각 카드에는 이미지, 제목, 버튼이 들어감
• 특별한 카드에 Modifier도 적용

🍌 BEM을 적용한 HTML 구조

<div class="card-list">
  
  <div class="card">
    <img class="card__image" src="banana1.jpg" alt="바나나 1">
    <h3 class="card__title">맛있는 바나나</h3>
    <button class="card__button">구매하기</button>
  </div>
  
  <div class="card card--highlighted">
    <img class="card__image" src="banana2.jpg" alt="특별 바나나">
    <h3 class="card__title">특별한 바나나</h3>
    <button class="card__button">한정판 구매</button>
  </div>
  
  <div class="card">
    <img class="card__image" src="banana3.jpg" alt="바나나 3">
    <h3 class="card__title">싱싱한 바나나</h3>
    <button class="card__button">구매하기</button>
  </div>

</div>

여기서 보면,
- card-list : 카드 전체를 감싸는 Block
- card : 하나의 카드 Block
- card__image, card__title, card__button : 카드 안의 구성요소(Element)
- card--highlighted : 특별한 카드 Modifier

🖍️ (선택) 기본 CSS 맛보기

/* 카드 리스트 */
.card-list {
  display: flex;
  gap: 20px;
}

/* 카드 기본 스타일 */
.card {
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* 특별 카드 스타일 */
.card--highlighted {
  border-color: gold;
  background-color: #fff8dc;
}

/* 이미지 */
.card__image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 제목 */
.card__title {
  margin-top: 10px;
  font-size: 18px;
}

/* 버튼 */
.card__button {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #ffe135;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

🧠 한 줄 요약

BEM은 머리로 외우는 게 아닙니다. 손으로 짜면서 몸에 새기는 것.
바나나 껍질을 벗기듯, 구조를 하나씩 나누며 짜봅시다 🍌

다음 글: “실전 마크업 – 작은 웹페이지 하나 직접 만들어보기” 🍌