M9 Editor

개요

개발에 사용되는 구성요소의 이름을 짓는 방법을 정하며 마크업개발 협업진행시 원활한 유지보수를 위해서 규칙을 정하고 따른다. 이 장에서는 M9에서 사용할 아이디와 클래스,이미지,파일,폴더의 네이밍 규칙을 설명한다.
설명에 들어가기 앞서 기본적은 용어와 의미는 파악할 수 있도록 한다.

요소 (elementor) : ^E

HTML 문서를 구성하는 요소를 의미한다. 일반적으로 시작태그,내용,종료태그로 구성된다.

속성 (attribute) : ^A

요소에 부여할 수 있는 특성을 의미한다. 기본값이 설정되 있으나 속성을 선언해서 다른값으로 변경할 수 있다.

선택자 (selector) : ^S

요소에 CSS 스타일을 적용하기 위한 패턴이다. M9에서 사용하는 선택자 패턴의 종류는 다음과 같다.

보다 자세한 설명은 Css > 선택자 에서 설명한다.

M9 선택자
이름	패턴 예	설명
공통선택자	*	모든 요소에 적용 (1번만 사용)
타입선택자	div	해당 요소에 적용
다중 타입선택자	div,p	모든 해당 요소에 적용
하위선택자	div p	해당 요소 하위의 모든 해당요소에 적용
자식선택자	div > *	해당 요소 하위의 모든 요소에 적용
자식선택자	div > p	상위 항목이 div요소인 모든 p 요소
첫번째 선택자	div + p	div 요소 바로 뒤에 배치되는 모든 p 요소
속성선택자	ul[class~="abc"]	abc 클래스를 추가로 포함하는 모든 요소
속성선택자	A[class*=abc]	abc 클래스를 포함하는 모든 A요소
가상선택자	p::before	각 p요소의 내용 앞에 항목을 삽입합니다.
가상선택자	p::after	각 p요소의 내용 뒤에 항목을 삽입합니다.
클래스 선택자	div.class	해당 요소의 class 속성값과 일치함
아이디 선택자	div#id	해당 요소의 id 속성값과 일치함
속성선택자 종류
속성선택자	E[attr]	'attr' 속성이 포함된 요소 E를 선택
속성선택자	E[attr="val"]	'attr'속성의 값이 정확하게 'val'과 일치하는 요소 E를 선택
속성선택자	E[attr~="val"]	'attr'속성의 값에 'val'이 포함되는 요소를 선택 (공백으로 분리된 값이 일치해야 함)
속성선택자	E[attr^="val"]	'attr'속성의 값이 'val'로 시작하는 요소 선택
속성선택자	E[attr$="val"]	'attr'속성의 값이 'val'로 끝나는 요소 선택
속성선택자	E[attr*="val"]	'attr'속성의 값에 'val'이 포함되는 요소 선택
속성선택자	E[attr\|="val"]	'attr'속성의 값이 정확하게 'val'이거나 'val-'으로 시작되는 요소 E를 선택

속성 (property) : ^P

요소에 부여할 CSS스타일 특성을 의미한다. 각 속성 단위는 세미콜론(;)으로 구분해서 선언한다.

속성값 (value) : ^V

속성에 부여하는 값으로 콜론(:)으로 구분해서 선언한다.

예약어 (reserved word)

M9에디터에서 미리 약속한 일종의 언어규칙을 의미한다. 예를들어 '더보기' 는 'more'로 사용한다고 했을때, '더보기' 가 들어가는 모든 클래스명은 .more로 통일 되야한다.
M9 예약어는 별도의 페이지에서 따로 정리한다.

네이밍 규칙

최종수정 20180809D

공통 규칙

영문 소문자,숫자,언더스코어(_),하이픈(-)만을 사용한다. 특수문자는 사용하지 않는다.

이름 시작 문자

이름은 영문소문자로 시작한다. 대문자나 숫자로 시작하지 않는다. (파일 및 폴더 제외)

조합

영문소문자,숫자,하이픈(-),언더스코어(_)만 사용한다.
네이밍의 조합은 '형태_의미_순서_상태'를 기본순서로 사용한다.
CSS에서 2개이상의 단어를 조합할때 하이픈(-)을 사용한다.
CSS에서 단어와 숫자를 조합할때 하이픈(-)을 사용한다.
이미지,파일,폴더에서는 언더스코어(_)를 사용하여 조합한다.
하이픈(-),언더스코어(_)를 이용해 3단계를 초과하여 조합할 수 없다.

하이픈(-)조합은 CSS에서만 사용한다. html 문서안에서 언더스코어(_)의 조합은 form,input 엘리먼트등의 name 어트리뷰트의 값을 사용하는것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.

예약어

M9에서 사용하는 공통규칙 예약어는 별도의 페이지에서 따로 정리한다.

아이디 네이밍 규칙

최종수정 20180809D

-아이디(id)는 문서 전체의 고유 식별자이므로 한 문서에서 한번만 사용한다.

-레이아웃을 제외한 아이디는 스타일을 지정하지 않는다.

-레이아웃 아이디의 네이밍은 조합해서 사용하지 않는다.(팝업 레이아웃 예외)

-레이아웃에 사용하는 아이디는 다음과 같다

#wrap (페이지 전체영역 그룹핑)
#header (머리글 영역)
#container (본문영역 그룹핑)
#content (주요 콘텐츠 영역)
#footer (바닥글 영역)

-팝업 레이아웃에 사용하는 아이디 ('pop-'를 조합해서 사용한다.)

#pop-wrap
#pop-header
#pop-container
#pop-content
#pop-footer


<!-- 구조 샘플 -->
<div id="wrap">   
    <div id="header"></div>
    <div id="container" class="container_type">
        <div id="container"></div>
    </div>
    <div id="footer"></div>
</div>

클래스 네이밍 규칙

최종수정 20180814D

속성값을 그대로 사용한다. propoerty명 = class명

inline-style 방식의 class 형태

추가적으로 CSS를 생성하지않고 정의된 값으로만 모든 모양을 구현할 수 있는것을 목표로 한다.

클래스명 예시

누가 보더라도 의미를 알 수 있어야 한다.


/* 클래스명 예시 */
.

클래스 조합

예시


/* 기본형 */
.list-style {}

/* 종속 확장형 */
.list-style .padding-1{}
.list-style .margin-height-1{}
.list-style .letter-spacing-1{}

/* 독립 확장형 */
.list-style-2 {}
.list-style-3 {}
.list-style-4 {}

이미지 네이밍 규칙

최종수정 20180813D

다음 규칙을 준수한다.

영문소문자, 언더스코어(_), 숫자만으로 조합한다.
임의로 축약하지 않는다 (누가보더라도 의미를 파악할 수 있어야 한다)
같은 분류의 이미지가 두 개 이상이면 파일 이름 마지막에 숫자를 추가해서 구분한다.
같은 분류의 이미지가 10개 이상일 경우 숫자는 01,02..., 100개 이상일 경우 001,002,003...순으로 한다.
3단계 이하로 조합한다. (ex:btn_search_on.gif)
확장자와 관계없이 순차적으로 적용한다. (ex:abc.gif,abc_02.jpg,abc_03.png)
M9 예약어를 참조한다.

'형태_의미_상태' 순서로 조합한다.

파일관리 유틸리티 프로그램 사용시 정렬의 순서가 보장될 수 있도록 이름은 통일시키고 숫자로 구분시킨다.


/* 잘못된 예 */
example_1_page 
btn_search_m9_mail
bsm 
icon_b
btn_ON 
05_img

beatiful1_01
beatiful_img_01
sky_01
cat_05
fruit_02



/* 올바른 예*/
example_page_1
btn_search_mail
icon_black
btn_on
img_05

beatiful_01
beatiful_02
beatiful_03
beatiful_04
beatiful_05

파일 및 폴더 네이밍 규칙