22.07.04- TIL

오늘 배운 것

오늘 수업에서는 앞으로 있을 웹퍼블리싱 실습을 위한 기본적인 연습을 위해서 지금까지 배웠던 HTML태그들과 CSS속성들로 인프런 헤더 만드는 것을 연습해보았다.

그리고 스타벅스 사이트 헤더도 클론 코딩했는데 앞으로 수업시간마다 스타벅스 사이트의 나머지 부분도 클론코딩 해나갈 예정이다.

이런식으로 클론코딩을 통해서 연습을 해서 웹퍼블리싱 실습을 위한 감을 키워나가게 될거 같다.

B. E. M

개요)

Block / Element / Modifier의 약자

css 클래스 이름을 짓는 방법

 

BEM 작성법

요소__일부분  underscore(lodash)기호로 요소의 일부분을 표시

요소--상태 Hyphen(dash)기호로 요소의 상태를 표시

ex)

<div class="container">
  <div class="container__name">
    <div class="tiem">
      <div class="item__name"></div>
    </div>
  </div>
</div>
 
<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>

 

BEM, Block

가장 바깥쪽 상위 요소인 독립적 블록

재사용이 가능

재사용을 위해 margin, padding값을 적용하지 않는 것이 보통

블록은 블록을 하위 요소로 가질 수 있음

가장 바깥 상위 요소이므로 바로 클래스 선택자 사용이 가능

ex)

.header .inner {
 
}
 
.inner {
  
}

 

BEM, Element

블록에 종속되는 하위 요소

소속된 블록에 의존적

연결 방식: __를 이용

ex)

.header__logo {
 
}
 
.header__logo__image {
  
}

 

BEM, Modifier

블록에 종속되는 하위요소

엘리먼트의 모양 또는 속성이 변형 된 경우 사용

기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른 경우 등에 적용

연결 방식: --를 이용

ex)

.btn--red {
 
}
 
.btn--blue {
 
}
 
.btn--primary {
  
}