BEM명명법

BEM이란 Block Element Modifier의 약자로 개발자들이 서로의 코드를 이해하기 쉽고 요소의 기능에 따라 작성하기 위한 선택자 명명법이다. 개발자들끼리의 약속?이라고 할 수 있다.

Block은 이 엘리먼트가 다른 곳에서 재사용성이 있는지를 생각해보면 쉽다. 독립적으로 존재할 수 있다면 Block이다.

Element는 다른 곳에서 따로 사용하지 않는 것이라면, 종속되어 있다면 Element이다.
흔히 말해 Block에 속해서만 의미를 갖는 엘리먼트이다.

Modifier는 ~
카카오뱅크 사이트의 상단바 예를 들어보자. 빨간색 테두리의 카카오뱅크 로고는 다른 곳에서도 사용될 수 있다. 하지만 파란색의 "은행소개"라는 메뉴는 오직 상단바에 속해서만 의미를 갖는다. 이런경우 로고와 상단바는 block, "은행소개"메뉴란은 element이다.
그래서 이름을 명명할 때 상단바는 top-bar, 로고는 logo로 이름짓고 "은행소개"메뉴는 그 속한 block의 이름 뒤에 "__"를 붙여

top-bar__menu.bank

라고 이름짓는다. css선택자로 사용할 때에도

top-bar > logo {~}
top-bar > top-bar__menu.bank {~}

이렇게 작성하지 않고

logo {~}
top-bar__menu.bank {~}

부모 태그를 제외하고 작성한다. 이렇게 함으로써 이 엘리먼트가 무엇에 속한 것임을 알면서도 높은 가독성을 가질 수 있다.

고정비율 엘리먼트

우리가 이미지를 불러와서 너비를 웹페이지의 50%라고 설정한다면 이미지는 그 비율이 정해져 있기 때문에 웹페이지의 너비를 줄이게 되면 자연스럽게 높이도 같이 줄어든다.
<-codepen을 열어 너비를 조절해보자

이러한 속성을 div태그로 만들어보자.
우선 정상적인 방법으로는 만들 수 없다. 너비가 줄어들면 높이도 같이 줄어들어야하기 때문이다. 그래서 하나의 태그를 더 사용하여 그 자식 태그의 padding값을 div태그의 높이로 사용할 것이다. padding값의 %는 부모의 너비 대비 %이다.

<div>
	<section></section>
</div>

section을 감싼뒤 div에게는 너비 50%, 자식인 section에게는 padding-top(또는 padding-bottom):50%;을 주게되면 자연스럽게 너비가 웹페이지 너비의 50%,
높이가 웹페이지 너비의 25%인 div태그를 만들 수 있다.

여기서 html의 코드를 더 단순하게 만들기 위해 before태그나 after태그를 사용해보자.(before,after태그들은 display속성이 inline이므로 block으로 바꿔주어야 한다.)

background-image

그동안은 이미지를 추가하기 위해 img태그를 사용했지만 background이미지라는 속성이 있다. 말그대로 background-color와 기능과 유사하게 배경에 색상대신 이미지를 집어넣는 속성인데 형식을 아래와 같다.

selector{
background-image:url( 이미지 주소 )
}

불러오는 이미지가 엘리먼트 박스의 크기보다 작은 경우, 이미지가 여백을 채울만큼 이미지의 개수를 붙여서 보여준다.
이때 이미지를 한개만 나오게 하고 싶다면 background-repeat:norepeat;를 사용한다. img태그와 마찬가지로 background-size를 너비,높이를 조절할 수 있고 cover나 contain도 사용할 수 있다.
(contain: 이미지 전체를 본래의 비율대로 박스 안에 보여준다, cover: 본래의 비율대로 이미지로 박스를 덮는다.)
그리고 박스보다 이미지가 커서 보여지는 이미지의 위치를 옮기고 싶을 때에는
background-position: (x축으로 이동) (y축으로 이동);을 사용한다. 값으로 center나 %도 사용할 수 있다.

스프라이트 이미지

background-image의 속성을 이용해서 이미지를 사용하는 방식이 있는데 스프라이트 이미지이다. 우리가 홈페이지에 200개의 이미지를 사용한다고 하면 200개의 이미지를 모두 통신하는데 시간이 필요할 것이다. 하지만 이것을 하나의 이미지로 합치고 background-position과 박스의 너비 높이를 조절해서 200개로 사용한다면 한번의 통신으로도 200개의 이미지로 사용할 수 있어 시간적, 용량적으로 절약할 수 있게 된다. 가까운 예로 네이버도 이런 스프라이트 이미지 방식을 사용하고 있다.


위 스프라이트 이미지로 이 증권 아이콘을 가져온다고 해보자.

div태그로 박스를 만든 후, background-position으로 조절해가면서 위치와 너비 높이를 알아내는 것이다.

이렇게 한땀한땀 조절해가는 방식이 있지만 페이지 검사를 해보면 이 스프라이트 이미지의 위치와 박스의 너비, 높이가 다 나와있다.

위 코드를 그대로 복사해서 코드에 붙여넣기 하면 스프라이트 이미지에서 원하느 아이콘 이미지를 사용할 수 있다.