코코아톡 클론코딩(6일차)

오늘도 고고고고고

https://nykim.work/15 → BEM 에 대해 정리가 잘된 블로그다. 이해안되는 부분은 나중에 코드를 작성해보고 다시 이해해보자.

1. css 에서 요소의 이름을 어떻게 지을지(class 이름) 정하는 방법론이 존재하는데, BEM(Block Element Modifier) 방식이 있다.

2. Block 은 웹 사이트에서 재사용가능하며 기능적으로 독립적인 요소들을 뜻한다. 예를 들어, 메뉴나 검색창, 로그인 창 자체는 웹 페이지에서 content 를 다르게 하며 다양하게 사용할 수 있을 것이다.
3. Element 는 Block 을 구성하는 요소 하나하나를 말한다. menu block 에서 각각 tab 이 element 라고 할 수 있을 것이다.
4. Modifier 는 Block 이나 Element 의 속성을 말하는 것임.

1. 그럼, BEM 을 통해 어떻게 요소의 이름을 정하는 걸까? 위 사진에서 menu block 을 예시로 설명해보면 아래와 같이 작성할 수 있을 것.

<form class="menu-bar">
  <div class="menu-bar__button"></div>
  <div class="menu-bar__button"></div>
  <div class="menu-bar__button"></div>
  <div class="menu-bar__button menu-bar__button--focused"></div>
</form>

1. Menu Block(class=“menu-bar”) 에 대해서, 4개의 Element(class=“menu-barbutton”) 을 생성했음. Block 과 Element 에 대한 이름을 지어주었고, 마지막엔 menu-bar 의 button 이 focused 상태일 때, 다른 css 속성을 주기위해서 Modifier 에 대한 이름을 추가했음.(menu-barbutton–focused) 이렇게 작성하면, 코드를 이해하기 쉬울 것 같다!

2. 웹 사이트에 사용할 icon 을 찾고 싶다면, heroicons 나 font awesome 이 있음. 나는 font awesome 을 사용하기로 했다! 사용하기 위해서, 반드시 code kit 이라고 하는 js 코드를 복사해 </body> 태그 위(html 코드 제일 마지막 부분)에 붙여넣기 한 뒤 사용해라!