Web Publishing Guide
01 프로젝트 환경
· 문서 및 버전은 HTML5, CSS3로 지정한다.
· 인코딩은 UTF-8로 선언한다.
02 폴더명
· common : 공통 파일이 들어있는 폴더
· fonts : 폰트 파일이 들어있는 폴더
· images : 이미지가 담겨있는 폴더
-favicon 아이콘 포함
· js : 페이지에 연결된 자바스크립트 폴더
· 페이지명의 폴더 : 연결되어 있는 페이지 파일들이 담긴 폴더
03 파일명
· 파일명은 20글자 이내로 알파벳 소문자, 숫자, 하이픈(-), 언더바(_)을 조합하여 생성한다. (공백, 특수기호는 사용하지 않음)
· 누구나 알아보기 쉽게 형태와 의미에 맞는 네이밍을 한다.
· 웹사이트의 메인페이지는 index.html로 명한다.
· 직접 만들어 연결된 CSS와 js는 파일명으로 통일한다.
(ex. index.html / index.css / index.js )
04 HTML 작업규칙
· HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validator 검사를 통과해야 한다.
· 브라우저 호환성을 위해 DTD 문서형 선언을 기본으로 한다.
· lang 속성을 통해 User Agent가 언어를 해석할 수 있게 한다. <html lang="ko">
· head 태그 안에 meta, title, link, script 순으로 요소를 선언한다.
· favicon은 디바이스를 고려해 여러 사이즈로 넣는다.
· 본인이 작성한 CSS, javascript/jQuery는 마지막에 작성한다.
· 문서의 마크업 언어(HTML)와 화면 표시 언어(CSS)를 본래의 목적에 맞게 최대한 분리한다.
· 외부 작업시 최정 html 결과물의 image, css, js등은 각각 /images, /css, /js 폴더에 위치시키며 상대경로로 표기한다.
· 코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 들여쓰기 규칙을 준수한다.
· 코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 주석 사용을 준수한다.
- 주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 한다.
· <button> 태그의 type 속성을 지정하지 않았을 때, IE6, IE7의 경우 submit 기능으로 동작하므로 폼 값을 전송하는 용도로 사용하지 않을 경우 type=”button”을 지정한다.
· 특수문자는 Entity Name을 사용한다.
05 CSS 작업규칙
· 문서 첫 줄에 @charset “utf-8”; 인코딩을 선언한다.
· 상단에 폰트 설정 후 기본 세팅을 지정해준다.
· 모든 속성은 영문 소문자로 작성한다.
· 폰트의 선언, 배경 url, filter, content에 작은 따옴표(‘‘)를 사용한다. 그 외의 경우는 사용하지 않는다.
· 두개 이상의 요소에 하나의 스타일을 지정하는 경우 쉼표(,)를 사용하여 작성한다.
· 마지막 선언된 속성에도 세미콜론(;)을 사용한다.
· 선택자 간, 중괄호간 한칸의 공백을 사용한다. 중괄호 안쪽 좌우에는 공백은 사용하지 않는다.
· 코드의 가독성을 높이기 위해 섹션별 주석 사용을 준수한다.
· CSS 주석 처리는 시작 주석을 작성하며 종료 주석은 작성하지 않는다.
· 객체를 구분하기 위하여 코드 그룹 간 1줄의 빈 줄을 허용한다.
· 종료코드 이후에 오는 요소에 한 칸 띄어 쓰기를 허용한다.
06 javscript/jQuery
· 코드 별 구분을 위해 맨 위에 해당 코드의 타이틀 주석을 작성한다.
· 플러그인 사용시 필요한 javascript는 절대경로를 통해 연결한다.
· 직접 작성한 javascript는 js/name.js로 상대경로를 통해 연결한다.