3. 목표 페이지

 

페이지 제목: 목표 ( My Goals ) 페이지 

페이지 설명: 평소 내가 추구하는 모토, 목표 등의 내용을 담은 페이지:)

 

CSS

 

1. 클래스명 정하기 (CSS naming methodology)

 

HTML을 작성할 때 고민이 많았던 부분이 바로 class 이름을 정하는 것이었다. 코딩을 해보니 분명히.. 이 코드는 짧게 안 끝날 것 같다는 생각이 들었다. (물론 내가 깔끔한 코드를 작성하지 못해서 그런 걸 수도 있지만?) 어쨌든 분명 클래스명을 정하는 통일된 양식이 있을 것 같은데, 막상 다른 사람들 코드를 보면 클래스명이 다 달라서 무엇을 써야 할지 모르겠었다. 고로 정리해보는 클래스 이름 정하는 방법!

 

BEM(Block Element Modifier)

 

BEM이란 CSS 제작 방법론들(OOCSS, SMACSS) 중 대표적인 CSS 제작 방법론으로, CSS의 구조를 개선시키기 위해 만들어진 일종의 규칙 체계이다. 개발, 디버깅, 유지보수를 위해 가능한 한 명확한 체계로 이름을 붙이려는 시도에서 만들어졌다.

BEM은 내가 궁금했던 클래스명을 짓는 방법에 대한 규칙들도 포함이 되어있다!

(다만, ID를 작성하는 데는 규칙이 적용 되지 않는다고 한다.)

 

명명 규칙 (Naming Rules)

 

• 이름을 붙일 떄는 알파벳 소문자 or 숫자로 작성하기
• 단어들을 나눌 때는 하이픈(-)으로 분리하기

/*WRONG*/
.redBox{
	color:red;
}

/*CORRECT*/
.red-box{
	color:red;
}

• Block 이름은 Element와 Modifier의 네임스페이스가 됨
• Element 이름은 Block 이름과 구별하기 위하여 두 개의 underscore (__)을 사용함
• Modifier 이름은 Block 혹은 Element 이름과 구별하기 위하여 하나 혹은 두 개의 하이픈(-)를 이용함
• 한 자리 숫자를 사용해야한다면 "0"을 붙여서 사용하기

/*WRONG*/
.cyber_center_1

/*CORRECT*/
.cyber_center_01

 

더 구체적으로 Block, Element, Modifier을 나눠서 생각해보자.

 

① Block(블럭)

 

Block이란 재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트들을 얘기한다. 쉽게 말하자면, 문단 전체에 적용된 요소 혹은 그 요소를 담고 있는 컨테이너를 얘기한다. 웹사이트를 예시로 들면, 헤더, 풋터, 사이드바, 그리고 메인 컨텐츠 영역들이 각각 블럭의 요소가 되는 것이다. 밑에 첨부한 사진에서는 로고 블럭, 메뉴 블럭, 서치 블럭 등의 블럭 단위들이 모여있다.

 

출처: https://nykim.work/15

 

Block의 이름은 Element와 Modifier의 네임스페이스를 정의한다고 했다. 이때, 이름을 정할 땐 해당 클래스가 어떤 목적을 가지고 있는지에 대한 의미를 내포하고 있어야 한다. 예를 들어, 메뉴 역할을 할 클래스 이름을 짓는다고 하면 menu라는 이름을 줘야 하며 버튼 역할을 할 클래스 이름을 짓는다고 하면 button이라는 이름을 지어줄 수 있다.

 

② Element(요소)

 

Element는 블럭을 구성하는 단위다. 자세히 말하면 특정 블럭 안에서 특정 기능을 담당하는 단위이다. 따라서 블럭이 독립적인 존재라면, 요소는 자신이 속한 블럭 내에서만 의미를 가지기 때문에 의존적인 존재라고 할 수 있다. 다른 블럭의 요소로 사용할 수도 없다. 아래 사진을 보면 Tab이라는 큰 블럭안에 Tab 1, Tab 2, Tab 3, Tab 4라는 요소들이 있는 것을 볼 수 있다. 

 

출처: https://nykim.work/15

요소의 이름을 지을 때는 위에서 말했듯이 두개의 underscore (__)를 이용해 블럭과 구별해 줘야 한다. (block__element 꼴로 쓰이게 되는 것이다!) 요소도 블럭 이름 짓기와 마찬가지로 목적에 맞는 이름을 정해줘야 한다. 예를 들어, search-form이라는 클래스 블럭을 만든 후 그와 관련된 세부적인 클래스들을 표현하고 싶다고 한다면 아래와 같이 __ 를 이용해 추가해주면 된다. 점점 더 구체적으로..!

<form class="search-form">
    <input class="search-form__input"/>
    <button class="search-form__button">Search</button>
</form>

 

③ Modifier(수식어)

 

수식어(Modifier)은 블럭이나 요소의 모양과 상태를 정의하며, 말 그대로 그들을 수식해주는 역할을 한다. 생긴 게 다르거나, 기존에 정의한 것들과는 다른 동작을 할 때 정의를 해준다.

 

총 두 가지 표현 방법이 있다.

 

1) 불리언(boolean) 타입: 수식어 값이 참이라고 생각한다. 두 개의 하이픈(--)으로 표현해준다.

form__button -- disabled

 

2) 키-밸류(key-value) 타입: key값이 value 속성을 가질 때 쓰이는 수식어 

성질(key)-내용(value) 형태로 쓰인다! 아래 예시에서는 theme(key)이 normal(value)라는 속성을 가진다.

<form class="form-login form-login--theme-normal">
</form>

※ 참고자료

https://jess2.xyz/css/bem/

http://getbem.com/naming/

https://webclub.tistory.com/263

https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1

https://velog.io/@2seunghye/CSS-naming-methodologyBEM#-naming-case