코드규칙

들여쓰기

1탭 들여쓰기 > 공백 4칸으로 설정한다.

빈줄

가독성을 고려하여 빈 줄을 추가 할 수 있다. 단 연속적으로 1줄을 초과하지 않는다.

주석

<!-- 영역명 -->
<div>
    <p>시작과 끝이 있고, 마크업의 영역을 표시한다.</p>
</div>
<!-- //영역명 -->

------------------------------------------------------

<!-- 설명내용 -->
<p>시작과 끝이 없고, 설명할 내용을 주석으로 표기한다. </p>

------------------------------------------------------

<div>
    인라인 주석인 경우 <!-- 기록주석 -->
</div>

속성 선언순서

구분	속성
기능	href, src, type
이름	name, id
정보	replaceholder, title, alt, value
옵션	target, tabindex
role_page	role
roperty	aria-controls, aria-describedby, aria-labelledby, aria-popup, aria-modal 등
꾸미기	class
상태	checked, disabled, selected, required, aria-selected, aria-current, aria-hidden 등

<a href="#none" title="새창열기" target="" class="">인쇄하기</a>
<iframe src="about:blank" title="빈프레임"></iframe>
<img src="img.gif" alt="대체텍스트">
<input type="text" name="" id="" value="" title="" class="" disabled="">

CSS

CSS 기본 규칙

이 CSS 파일에 어떤 작업을 했는지 설명하기.

@charset "utf-8";
/*-------------------------------------------------------------------
    파일정의: 
    속성순서: 레이아웃 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

작업정보는 위 사항을 필수정보로 제공한다.

작은 따옴표 사용 범위

마지막 선언된 속성에도 세미콜론(;)을 사용한다.

.class-name {font-family:'dotum';}
.filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod='scale';}
.class-nam//after{content:'.'}
.class-name {background:url(img.gif) no-repeat}

공백의 사용

선택자 간, 중괄호간 한칸의 공백을 사용한다, 중괄호 안쪽 좌우에는 공백은 사용하지 않는다.

.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}
.class-name {padding:0; margin:0;}
.class-name {padding:0; margin:0;}

들여쓰기 / 줄 바꿈

CSS 코드 작성시 들여쓰기는 허용하지 않는다.
공통으로 사용되는 속성의 선택자간의 줄 바꿈은 허용하며 이 외의 줄바꿈은 허용하지 않는다.

h4.class-name {font-siz//1.25em; letter-spacing:-1px; margin:0.5em 0 0 0;}

.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}

주석 / 빈줄

종료 주석은 작성하지 않는다.
코드 그룹 간 1줄의 빈 줄을 허용한다. 단, 1줄을 초과하않는다.

/* title */
.title-type1 {margin:30px 0 10px 0;}
    
/* description */
.desc1 {padding:2px 0 0 15px; font-siz//0.917em;}

선택자 (공통 선택자)

* 공통 선택자는 웹 페이지의 성능을 저하를 가져오기 때문에 가급적 사용하지 않는다.

/* 잘못된 예 */
* {margin:0; padding:0}