배울 점, 기억 할 점
id나 class 이름을 지을 때는 너무 일반적인 이름, 자주 사용되는 이름은 지양하기. 이름을 길게 언더바를 이용해서 짓는 것을 추천.
ex ) status-bar__column
BEM : Block__Element—Modifier
class만 사용함.
element는 block을 구성하는 단위.
modifier는 block이나 element의 속성 담당.
단점은 class가 엄청 커질 수 있다는 것.
ex ) block : .search-form
element : .search-form__input , .search-form__button
modifier : .search-form—color-orange(key-value 타입), .search-form—focused(boolean 타입)
아이콘 추가 방법 2가지종류
직접 이미지 아이콘 추가
SVG
SVG방법
Heroicons [Heroicons - Free Open Source SVG Icon Library]
(https://heroicons.dev/)
Fontawesome [Font Awesome]
(https://fontawesome.com/)
- 스크립트는 body 태그 닫기 직전에 위치시킴
728x90
'노마드 코더' 카테고리의 다른 글
코코아 클론 챌린지 12일, 13일차 (0) | 2022.06.18 |
---|---|
코코아 클론 챌린지 11일차 (0) | 2022.06.17 |
코코아 클론 챌린지 9일차 (0) | 2022.06.14 |
코코아 클론 챌린지 8일차 (0) | 2022.06.13 |
코코아 클론 챌린지 6일차 (0) | 2022.06.11 |