실전코딩
-
BEM 구조로 실전 페이지 뚝딱 만들기 – 초보자도 가능한 마크업 설계WEB/HTML 팁 2025. 4. 30. 08:06
이론은 이해했지만, 직접 짜보지 않으면 아무 소용 없습니다.오늘은 BEM 네이밍 규칙을 활용해서 심플한 카드 리스트 레이아웃을 만들어봅니다.🛠 만들 대상: 카드 리스트3개의 카드가 가로로 나열됨각 카드에는 이미지, 제목, 버튼이 들어감특별한 카드에 Modifier도 적용🍌 BEM을 적용한 HTML 구조 맛있는 바나나 구매하기 특별한 바나나 한정판 구매 싱싱한 바나나 구매하기 여기서 보면,- card-list : 카드 전체를 감싸는 Block- card : 하나의 카드 Block- card__image, card__title, card__button : 카드 안의 구성요소(Element)- card--highlighte..