지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
지난 글은
웹페이지 또는 어플의
디자인에서 사용할
아이콘을 사용하는 방법을
알려드렸습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - 가입페이지 만들기 - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 지난 글은 메신저 어플의 가입페이지를 만드는 첫 단계였습니다. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해
tm-csc.tistory.com
이번 글에서는
Block Element Modifier
즉 BEM에 대해 알려드리겠습니다.
처음 HTML, CSS를
작성하다 보면 CLASS 또는
ID를 작성할 때 규칙에 대해
생각하지 않고 작성하여
오류가 나는 경우가 많습니다.
그래서 BEM은 많은 사람들이
적용시키는 규칙입니다.
그 이유는 조금 더 쉽게
CSS, HTML을 글을 쓰기 위해서
또는 동시에 여럿이 작업해도
헷갈리지 않기 위함입니다.
먼저 BEM스타일로
작성하는 규칙은
기본적으로 이렇게 생겼습니다.
제일 먼저. btn이라는
버튼이 있고
버튼 안에 price 정보가 있으며
그 부분의 CLASS 이름을
btn__price라고 적는다는 것을
알 수 있습니다.
즉 부모가 btn이며
btn을 부모로 여기는
자식 항목의 경우
__ 언더바를 두 개 입력하고
그에 대한 내용을 적는 것이죠.
마지막으로 수정 요소는
자식이 아니지만 btn을
수정할 수 있기에
__언더 바가 아닌 --
이렇게 일반 바로
두 개 입력해줍니다.
btn--orange {}
btn--big {}
이렇게 말이죠.
ID는 한 가지만 사용할 수 있고
CLASS는 여러 번 사용할 수
있다고 말씀드린 적 있습니다.
하지만 코딩이 길어지면
길어질수록 CSS를 작성할 때
ID 였는지 CLASS였는지
헷갈릴 때가 있습니다.
그래서 이러한 문제를
겪은 많은 프로그래머들이
모든 부분을 클래스를
사용하자고 결정했고
규칙에 따라 작성할 경우
굳이 HTML에 들어가서
ID인지 CLASS인지
찾아볼 필요가 없어진 것이죠.
그리고 이런 식으로 작성하면
btn이라는 클래스 안에는
버튼의 가격이라는 클래스와
버튼의 내용이라는 클래스,
즉 버튼의 속성 또는 내용을
담고 있는 클래스를 지정하여
구분하기 쉬워집니다.
그리고 btn 외에
큰 버튼인 big--btn과
오렌지색의 btn--orange처럼
다른 btn과 중복되는
내용까지 적음으로써
CSS에서 같은 내용을
반복적으로 적지 않고
한 번만 적고 끝낼 수 있습니다.
그리고 이렇게 비슷한
모양 또는 같은 텍스트 등
반복되는 모양의 버튼 또는
다른 박스를 만든다고 해도
어렵지 않게 구분하여
코드를 쉽게 적을 수 있을 겁니다.
물론 클래스 이름이
길어진다는 이유로
BEM을 싫어하는 분들도
계실 수 있지만
개인적으로는 코드의 양이
길어질수록 헷갈리고
구분하기 어려우면 길어지는
CSS에 적었던 내용을
또 적기도 합니다.
그럴 때 BEM을 활용한다면
조금이나마 쉽게 코드를
작성할 수 있을 거라 생각합니다.
본격적으로 코딩을 시작하기 전에
알려드려야 할 것 같아
이번 글은 BEM에 대해
알려드렸습니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
