home강의 홈으로
Section 3. HTML 더 깊이 알아보기
Lesson 4. 가독성을 위한 이름 짓기
CSS, JS 사용을 위해 요소들을 구분하는 방법들
A. 태그 위주
article { /* ... */ }
article aside { /* ... */ }
article aside figure { /* ... */ }
article div header { /* ... */ }
article ul li { /* ... */ }
article div ul li { /* ... */ }
article div ul li.special { /* ... */ }
/* ... */
- 장황한 선택자
- CSS 선택자만으로 요소를 식별하기 어려움
- 위치와 태그가 같지만 종류가 다를 경우
B. 클래스 위주
.card { /* ... */ }
.card .thumb { /* ... */ }
.card .thumb .image { /* ... */ }
.card .body .title { /* ... */ }
.card .body .list { /* ... */ }
.card .body .list .list-item { /* ... */ }
.card .body .list .list-item.special { /* ... */ }
- 여전히(혹은 더욱) 장황해질 수 있는 선택자
- 종속 관계 명시 없이는 중복될 수 있는 클래스
C. BEM(Block Element Modifier)
.BLOCK__ELEMENT--MODIFIER { /* ... */ }
⭐️ 블록(컴포넌트) 단위로 명명
.card { /* ... */ }
.card__thumb { /* ... */ }
.card__image { /* ... */ }
.card__title { /* ... */ }
.card__list { /* ... */ }
.card__list-item { /* ... */ }
.card__list-item--special { /* ... */ }
- 간결해진 선택자 - 코드량 감소
- 명확한 선택자 - 중복 문제 해소
- 높은 가독성, 이해하기 쉬운 구조
BEM 관련 참고자료
🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )
🛑질문 전 필독!!
- 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
- 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
- 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
- "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
- 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
