{code-banana} {code-banana}

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

HTML을 짤 때 가장 흔히 듣는 질문 중 하나:"클래스 이름 아무렇게나 지으면 안 되나요?"결론부터 말하면, 안 됩니다. 이름 하나에도 질서가 있어야 코드 유지보수, 협업, 확장성이 좋아집니다.💡 그래서 나온 게 BEM입니다BEM은 Block / Element / Modifier의 약자입니다.쉽게 말하면, "큰 덩어리(Block) → 내부 구성요소(Element) → 변형(Modifier)" 이런 식으로 클래스 이름을 체계적으로 짓자는 거죠.🍌 BEM 네이밍 규칙Block: 독립적인 기능 단위card, btn, headerElement: Block 안의 구성요소card__image, btn__iconModifier: Block이나 Element의 변형btn--primary, card--highlig..

HTML을 처음 배우면 가장 먼저 만나는 태그가 입니다.그런데 이걸 아무 데나 막 쓰면? CSS가 더럽게 꼬입니다.유지보수도 힘들고, 디자이너랑 협업도 안 됩니다.🧱 div는 '구조'를 짜는 태그입니다는 'division(구역)'이라는 뜻.즉, 콘텐츠를 기능/의미/디자인 기준으로 나눠주는 박스입니다.그래서 '이게 하나의 덩어리인가?'를 기준으로div를 감싸고, 분리하고, 정리하는 게 핵심입니다.🍌 바나나로 이해하는 div 구조웹사이트를 바나나에 비유해봅시다.layout = 바나나 숲 🌳 (전체 페이지 뼈대)wrap = 바나나 나무 🌲 (그 페이지의 주제 단위)section = 바나나 송이 🍇 (기능별 콘텐츠 묶음)div = 바나나 🍌 (하나의 콘텐츠).card__peel = 바나나 껍질 (스타..