Development/CSS & SCSS

[CSS ] 코딩 컨벤션

moretz0921 2020. 9. 12. 00:26

1. CSS 기법 및 문법

- 모든 속성은 영문 소문자로만 작성

- css-sprite 기법 권장

- CSS 작성 순서:content / display / overflow / visibility / position / z-index / float(clear) / width / height / margin / padding / border / background / color / font / text-align(vertical-align) / etc

 

 

2. ID/Class 네이밍 규칙

- 직관적이고 누구나 알아볼 수 있으며 간단하게 작성하는 것이 좋습니다.

- 소문자만 사용하며 단어 구분은 "_"로 표현

- 형태_성격(항목 또는 메뉴명)_스타일 순으로 네이밍 합니다. (예. list_product)

- 단어와 숫자를 조합하는 경우 언더스코어(_) 는 생략 (예. list_chart1)

- 레이아웃을 구성하는 내용만 id(wrapper,header,container,nav,content,footer 등) 값으로 지정하였으며

그 외는 class로 지정

 

 

3. Image 네이밍 규칙

- 이미지 이름은 ‘형태_의미_상태’ 순서로 조합합니다.

- 이미지명은 영문 소문자,숫자,언더스코어(_)로 작성한다. (예. btn_next.png)

- 이름은 영문 대문자,숫자로 시작 할 수 없다. (예. bull_square.gif / bull_square2.png)

- 이미지 네이밍은 확장자에 관계없이 순차적으로 적용 한다. (예. btn_confirm2.jpg / btn_confirm3.png) */

 

 

/* z-index *********************************************************************** */

/*

#header{z-index:100}

#container{z-index:0}

#bottom{z-index:100}

.dim50{z-index:300}

#pop_wrap{z-index:400}

*/

'Development > CSS & SCSS' 카테고리의 다른 글

[CSS] 웹폰트 경량화  (0) 2020.12.20
[css] input 태그  (0) 2020.12.01
[궁금증] 반응형 웹 div 너비 높이 비율 유지 방법  (0) 2020.09.07
[CSS] border-radius  (0) 2020.08.29
css3 - 컨텐츠 가운데 정렬  (0) 2020.01.30