NHN 코딩 컨벤션

Transcription

1 NHN Coding Convention for Markup Languages (HTML/CSS) NTS UIT 개발실 일반

2 저작권 Copyright 2006~2012 NHN Corp. All Rights Reserved. 이문서는 NHN 의지적재산이므로어떠한경우에도 NHN 의공식적인허가없이이문서의일부또는전체를복제, 전송, 배포하거나변경하여사용할수없습니다. 이문서는정보제공의목적으로만제공됩니다. NHN 는이문서에수록된정보의완전성과정확성을검증하기위해노력하였으나, 발생할수있는내용상의오류나누락에대해서는책임지지않습니다. 따라서이문서의사용이나사용결과에따른책임은전적으로사용자에게있으며, NHN 는이에대해명시적혹은묵시적으로어떠한보증도하지않습니다. 관련 URL 정보를포함하여이문서에서언급한특정소프트웨어상품이나제품은해당소유자가속한현지및국내외관련법을따르며, 해당법률을준수하지않음으로인해발생하는모든결과에대한책임은전적으로사용자자신에게있습니다. NHN 는이문서의내용을예고없이변경할수있습니다.

3 문서정보 문서개요이문서는 NHN 의마크업개발자가소스코드작성시에따라야할규칙을기술한다. 1장. 개요 NHN 코딩컨벤션의필요성과코딩컨벤션의요소, 용어를소개한다. 2장. 네이밍규칙 id/class, 이미지, 파일, 폴더의네이밍규칙을설명한다. 3장. HTML 코드작성규칙 HTML 코드의기본작성규칙과들여쓰기, 빈줄사용, DTD 및인코딩선언, 주석표기규칙을설명한다. 4장. HTML 요소작성규칙 HTML 요소종류별작성규칙을설명한다. 5장 CSS 코드작성규칙 CSS 코드의기본작성규칙과인코딩, 선택자, 속성등의작성규칙을설명한다. 부록 A. 코딩시참고사항웹표준기반의마크업, 크로스브라우징범위, 폴더생성방법, 플래시사용시유의점을설명한다. 부록 B. 약속어목록네이밍약속어를설명한다. 독자 이문서는마크업언어를다루는 NHN 의개발자를대상으로한다. 문의처 이문서의내용에오류가있거나내용과관련한의문사항이있으면아래의연락처로문의한다. 연락처 : dl_markup@nhn.com 문서버전및이력 버전일자 이력사항 작성자 승인자

4 초안작성웹표준 1 팀 박상혁, 주재승, 조진주 웹표준 1 팀박태준 검토및재작성기술문서팀김붕미기술문서팀유영경 수정사항 내용오류수정 수정사항 CSS 속성값축약 CSS 핵선언방법 삭제 / 숨김주석처리 tbody 선언방법 iframe 접근성보장방법 공통네이밍예약어표 수정사항 모바일컨벤션추가 표 2-5 오타수정 3.5 D 내용추가 5.1 C 내용추가 5.3 내용추가 5.8 내용추가 올바르지않은 URI 수정 수정사항 2.2 내용추가 2.4 오타및내용보완 3.1 내용추가및일부삭제 3.4 내용추가및일부삭제 3.5 내용일부삭제및수정 3.6 내용추가 4.2 내용추가 4.3 내용추가 4.4 내용삭제 4.5 내용추가 5.1 내용추가 5.5 잘못된표기변경 5.8 오타및내용수정 5.12 잘못된표기변경 5.14 내용일부삭제및수정 5.16 잘못된표기변경 6.4 내용보완 6.7 잘못된표기변경 부록 B 내용추가 수정사항 소속팀, 카피라이트, 문의처수정 웹표준 1 팀주재승웹표준 1 팀주재승웹표준 1 팀박상혁, 주재승, 조진주웹표준 2 팀문지애, 노찬현, 윤미진웹표준 1 팀박상혁, 주재승, 조진주웹표준개발 1 팀김동우, 조진주 웹표준 1 팀박태준웹표준 1 팀박태준웹표준 1 팀박태준웹표준 1 팀박태준웹표준개발 1 팀박태준

5 1.3 내용일부수정 2.3 내용일부추가 2.4 내용일부수정및삭제 3.1 내용일부추가 3.3 내용일부수정 3,4 내용일부수정및추가 3.6 내용수정 4.2 내용일부수정 4.3 내용일부수정및추가 4.4 내용일부수정 4.5 내용일부추가 5.3 내용일부수정 5.4 내용일부수정 5.8 내용일부수정및추가 5.9 내용삭제 5.11 내용일부수정 5.12 내용일부수정 5.15 내용일부수정및삭제 5.16 내용수정 6.2 일부내용삭제 6.4 일부내용추가 6.5 내용추가 6.6 내용추가 6.7 내용일부수정및추가 6.8 내용일부수정및삭제 부록 A 내용수정및추가 부록 B 오타수정및추가 수정사항소속팀, 카피라이트, 문의처수정 2.4 내용일부수정 3.1 내용일부수정 3.2 내용일부수정 3.4 내용일부수정및삭제 3.6 내용수정 4.2 내용일부수정 4.3 내용일부수정 4.4 내용일부수정 4.5 내용일부수정 5.1 내용일부수정 5.9 내용일부수정 5.10 내용일부수정 5.13 내용일부수정 5.14 내용수정 웹표준개발 1 팀 김동우 웹표준개발 1 팀 박태준

6 5.15 내용수정 6.2 내용일부수정 6.4 내용일부수정 6.5 내용일부수정 6.6 내용일부수정 6.7 내용일부수정 6.8 내용일부수정 6.9 내용일부수정 6.10 내용일부수정 6.11 내용일부수정 A.1 내용일부수정 A.2 내용수정 A.3 내용수정 A.6 내용삭제 A.8 내용추가 수정사항소속팀, 문서개요, 문의처수정 목록수정 내용일부삭제 B. 내용일부삭제 D. 내용일부삭제 내용일부삭제 A 내용일부수정 D 내용일부수정 E 내용일부수정 G 내용일부삭제 J 미디어타입추가 L 내용일부삭제 1.3 A 제목수정 1.3 C 내용일부삭제 표 1-1 내용일부수정 1.3 D 내용수정 1.3 E 내용수정 1.3 F 내용일부삭제 2.1 C 내용일부수정 2.1 D 내용일부수정 표 2-2 내용일부삭제 2.2 B 제목수정 표 2-3 내용일부삭제 2.2 C 내용일부수정 표 2-4 내용일부수정 2.2 D 내용일부삭제 2.2 E 내용일부수정 UX 디자인실 김용원, 서미연 UX 디자인실 소지훈

7 2.2 F 내용추가 그림 2-3 추가 그림 2-4 추가 표 2-5 내용일부수정 표 2-6 내용일부수정 2.3 A 내용일부삭제 표 2-7 내용일부삭제 2.4 A 내용일부삭제 표 2-8 내용일부삭제 표 2-9 모바일삭제 표 2-9 참고내용수정 2.4 B 내용일부삭제 표 2-10 내용일부삭제및표번호수정 3.1 B 내용수정 표 3-3 내용일부삭제 3.1 E 내용일부삭제및추가 표 3-4 내용일부수정 3.2 내용일부수정 3.2 참고삭제 3.3 내용일부삭제 A 내용일부삭제 A 내용일부수정 모바일삭제 표 3-7 삭제 참고삭제 3.5 A 내용일부삭제 표 3-8 내용일부삭제및표숫자변경 3.5 B 내용일부삭제 3.5 C 내용일부삭제 표 3-9 내용일부삭제및표숫자변경 3.6 일부내용수정및삭제 4. 제목수정 4.1 내용추가 4.2 제목수정 4.2 A 내용일부수정 4.2 B 내용일부수정 4.2 C 삭제 4.2 D 내용일부수정및제목번호수정 4.2 E 내용일부삭제및제목번호수정 4.2 F 내용일부삭제및제목

8 번호수정 4.2 G 내용일부수정및제목번호수정 4.2 H 내용일부수정및제목번호수정 4.3 제목수정 4.3 A 내용일부수정 4.3 B 내용일부수정 4.3 C 내용일부삭제및추가 4.3 D 내용일부수정 4.3 E 내용일부수정 4.3 F 내용일부삭제 4.4 내용일부추가 4.4 A 내용일부삭제 4.4 B 내용일부수정 4.4 C 내용일부수정 4.4 D 내용일부삭제 4.4 E 내용일부삭제 4.4 F 내용일부삭제 4.4 G 내용일부수정 4.4 G 참고내용일부수정 4.5 제목수정 4.5 A 내용일부삭제 4.5 B 내용일부삭제 4.5 C 내용일부삭제 4.5 D 내용일부수정 4.5 E 내용일부삭제 5.1 A 내용일부삭제 5.2 내용일부추가 5.4 내용일부삭제 5.5 내용일부삭제및추가 5.7 A 내용일부삭제및수정 5.7 C 내용일부수정 5.7 참고내용일부수정 내용일부삭제 표 5-11 내용일부수정 표 5-12 삭제 표 5-13 표번호수정 B 오타수정 5.10 핵모바일삭제 표 5-17 삭제 5.11 내용일부수정 5.11 참고내용일부추가 5.12 A 내용일부수정

9 5.12 B 제목수정 5.12 C 내용일부수정 내용일부추가 내용일부추가 A 내용일부수정 B 내용일부수정 5.14 내용일부수정 5.14 모바일삭제 5.15 내용일부수정 6. 전체삭제 부록 A.1.1 삭제 부록 A.1.2 내용일부삭제및부록번호수정 A.1.1 부록 A.1.3 내용일부삭제및부록번호수정 A.1.2 부록 A.1.3 추가 부록 A.2 내용일부수정 표 A-2 삭제 표 A-3 삭제 그림 A-2 수정 부록 A.3.2 내용일부수정 부록 A.4 내용일부삭제 부록 A.5 삭제 부록 A.6 번호수정 A.5 그림 A-3 수정 부록 A.8 삭제 부록 B 제목수정 부록 B.1 내용일부수정및삭제 표 B-1 삭제 표 B-2 내용추가 표 B-3 내용추가 부록 B.2 삭제

10 표기규칙 참고표기 참고 독자가참고해야할내용을기술한다. 주의표기주의독자가반드시알아야할사항, 시스템에러를유발할수있는사항, 수행하지않았을때재산상의피해를줄수있는사항을기술한다. 소스코드표기 이문서에서소스코드는회색바탕에검정색글씨로표기한다. <dl class="error_list_type"> <dt> 점검시간 :</dt> <dd><span> ( 화 ) 오전 02:00~03:00</span>( 총 6 시간 )</dd> <dt> 점검이유 :</dt> <dd> 방명록 UI 개선 </dd> </dl>

11 목차 1. 개요 코딩컨벤션필요성 코딩컨벤션요소 네이밍규칙 HTML 코드작성규칙 HTML 요소작성규칙 CSS 코드작성규칙 웹접근성보장방법 코딩컨벤션용어 네이밍규칙 기본규칙 id 및 class 네이밍규칙 이미지네이밍규칙 파일및폴더네이밍규칙 오류! 책갈피가정의되어있지않습니다. 3. HTML 코드작성규칙 기본규칙 들여쓰기규칙 빈줄 DTD 및인코딩 DTD 선언 인코딩선언 주석 초기파일 HTML 요소작성규칙 기본규칙 45

12 4.2 전역구조화요소 폼요소 표요소 기타요소 CSS 코드작성규칙 기본규칙 들여쓰기 공백 빈줄 줄바꿈 인코딩 선택자 속성 속성선언순서 속성값축약 약식속성사용범위 한글폰트선언 z-index 핵 (hack) 미디어타입 CSS 선언타입 주석 기본형식 작성자정보표기 의미있는그룹영역의주석표기 파일분기 초기파일 73 부록 A. 코딩시참고사항 75 A.1 웹표준기반의마크업 76 A.1.1웹표준기반의마크업 96 A.1.2 웹표준기반의마크업프로세스 76 A.1.3 웹접근성보장방법 76 A.2 크로스브라우징범위 77 A.3 폴더생성 78 A.3.1 마크업폴더구조 78 A.3.2 폴더생성시고려사항 78 A.4 플래시사용시유의점 80

13 A.5 CSS Sprites 사용방법 81 A.6 단위변환 82 부록 B. 약속어목록 83 B.1 네이밍약속어 84 B.2 대체텍스트약속어 오류! 책갈피가정의되어있지않습니다.

14 표및그림목록 표목록표 1-1 선택자종류 21 표 2-1 공통네이밍규칙예 24 표 2-2 네이밍조합예 24 표 2-3 레이아웃약속어범위 27 표 2-5 레이아웃네이밍조합예 28 표 2-6 class 네이밍확장예 29 표 2-7 이미지네이밍조합예 30 표 2-8 파일및폴더네이밍규칙예 31 표 3-1 소문자작성예 34 표 3-2 애트리뷰트값표기예 34 표 3-3 Character entity references 사용예 34 표 3-4 스크립트예 35 표 3-5 들여쓰기사용예 36 표 3-6 빈줄사용예 38 표 3-8 개발적용관련주석표기예 42 표 4-1 <body> 태그의클래스추가 49 표 5-1 소문자작성예 56 표 5-2 따옴표사용예 56 표 5-3 마지막세미콜론예 56 표 5-4 들여쓰기사용예 57 표 5-5 선택자간공백제거예 58 표 5-6 속성간공백제거예 58 표 5-7 중괄호좌, 우공백제거예 58 표 5-8 빈줄사용예 59 표 5-9 줄바꿈사용예 60 표 5-10 다중선택자사용예 62 표 5-11 속성선언순서 63 표 5-14 테두리스타일이 2개이상다를경우약식속성선언의예 64 표 5-15 폰트선언예 65 표 5-16 사용가능한핵 67 표 A-1 크로스브라우징범위 77

15 표 A-2 wmode별특징 80 표 A-3 단위변환 82 표 B-1 객체약속어 84 표 B-2 이미지약속어 84 그림목록그림 2-1 HTML 기본템플릿구조 25 그림 2-2 모바일 HTML 기본템플릿구조 25 그림 2-3 종속확장 class 예 27 그림 2-4 독립확장 class 예 28 그림 5-1 z-index 권장선언값 66 그림 5-2 모바일 z-index 권장선언값 오류! 책갈피가정의되어있지않습니다. 그림 A-1 웹표준기반의마크업프로세스 76 그림 A-2 마크업폴더구조 78 그림 A-3 CSS 스프라이트배경이미지배치의잘못된예 81 그림 A-4 CSS 스프라이트배경이미지배치의예 103

16

17 1. 개요 이장에서는 NHN 마크업코딩컨벤션의필요성, 요소및용어를소개한다.

18 1. 개요 1.1 코딩컨벤션필요성 마크업개발은프런트-엔드페이지의기본골격을형성하기때문에디자인, 브라우저, 스크립트, 성능, 접근성등과긴밀한관계가있다. 즉, 마크업개발을잘해야모든브라우저에서콘텐츠를손실없이, 빠르고쉽게사용자에게전달할수있다. 코딩컨벤션은이러한조건을만족시키기위해마크업개발자가지켜야할표준을제시한다. 또한, 유지보수에투자되는비용을최소화하기위해통일된코드작성법을제시한다. 코드를최초로작성한사람이끝까지유지보수할확률은매우낮다. 따라서, 최초개발자가아닌사람도코드를빠르고정확하게이해할수있도록작성하는것은코드의유지보수비용을절감하고업무효율을높이는데결정적인역할을한다. 적어도한프로젝트의마크업코드는같은코딩컨벤션에따라작성해야한다. 코딩컨벤션을준수하면프로젝트멤버간코드공유도쉬워지고, 일관성있게코드를작성할수있다. 어떤코딩컨벤션을선택하느냐가중요한것이아니라, 통일된기준으로소스코드를작성하는것이중요하다. 18 NHN Coding Convention

19 1. 개요 1.2 코딩컨벤션요소 네이밍규칙 네이밍규칙은레이아웃, 객체, 이미지, 폴더, 파일의이름을작성하는규칙이다. 이해하기쉬운이름으로 작성해야코드를쉽게파악할수있다 HTML 코드작성규칙 A. 들여쓰기 HTML 코드를작성할때코드의가독성을높이기위하여왼쪽첫번째열부터오른쪽으로일정한간격만큼 띄어쓴다. 들여쓰기를하면전체 HTML 구조를쉽게파악할수있다. B. 빈줄 C. HTML 코드의빈줄은의미있는객체를구분하기위하여사용한다.DTD 및인코딩 DTD(Document Type Definition) 는 SGML(Standard Generalized Markup Language) 계열마크업언어의문서타입을정의하는것으로서, 해당 HTML 문서가어떤버전의 HTML로작성되었는지, 어떤규칙으로내용을기술하고어떤요소와애트리뷰트, 애트리뷰트값을지정할수있는지정의한다. 또한인코딩을선언하여문서에서사용되는문자코드세트를지정한다. DTD와인코딩선언은 HTML 문서가브라우저에서바르게해석될수있도록한다. D. 주석 HTML 코드의주석은코드그룹을구분하거나, 참고해야하는사항을기술한다 HTML 요소작성규칙 HTML 요소작성규칙은반드시선언해야하는애트리뷰트와선택적사용이가능한애트리뷰트에대한 내용을기술한다 CSS 코드작성규칙 A. 들여쓰기 CSS 코드는들여쓰기를하지않는다. 단, 중괄호 {} 가중첩되는경우예외 B. 공백 CSS 코드는공백을최소화한다. C. 빈줄 CSS 코드의빈줄은코드그룹의영역을표시하기위하여사용한다. D. 줄바꿈 CSS 코드의가독성을위한속성줄바꿈은하지않는다.

20 1. 개요 E. 인코딩 HTML 문서가브라우저에서바르게해석될수있도록 CSS 의인코딩은 HTML 의인코딩과동일하게선언한다. F. 선택자 선택자버그가발생하지않도록사용규칙을준수한다. G. 속성 속성선언순서를준수하여코드를쉽게파악할수있도록하며, CSS 코드최적화를위해속성값을축약하여 사용하고약식속성을허용범위에맞게사용한다. H. z-index z-index 속성값을범위에맞게사용하여객체가브라우저에서바르게표현되도록한다. I. 핵 크로스브라우징을위해제시된핵 (hack) 에한해최소한의사용을허용한다. J. 미디어타입 미디어타입상황에맞게추가해서사용한다. K. CSS 선언타입 상황에알맞은 CSS 선언타입을선택한다. L. 주석 CSS 코드의주석은코드그룹을구분하거나참고해야하는사항을기술한다 웹접근성보장방법 모든사람이환경의제약없이웹콘텐츠에접근할수있도록보장하는마크업방법을기술한다. 20 NHN Coding Convention

21 1. 개요 1.3 코딩컨벤션용어 A. 요소 (Element) HTML 문서를구성하는요소를의미한다. 일반적으로시작태그, 내용, 종료태그로구성된다. B. 애트리뷰트 (Attribute) 요소에부여할수있는특성을의미한다. 기본값이설정되어있으나애트리뷰트를선언하여다른값으로 설정할수있다. C. 선택자 (Selector) 요소에 CSS 스타일을적용하기위한패턴이다. 이문서에서언급하는선택자의종류는다음표와표 1-1같다. 표 1-1 선택자종류 이름 패턴 예 설명 공통선택자 * 어떤요소와도일치함. 타입선택자 div 해당요소와일치함. 하위선택자 div p 해당요소의하위의모든요소와일치함. 자식선택자 div > p 해당요소의자식요소와일치함. class 선택자 : div.class 해당요소의 class 애트리뷰트값과일치함. id 선택자 div#id 해당요소의 id 애트리뷰트값과일치함. D. 속성 (Property) 요소에부여할 CSS 스타일특성을의미한다. 기본값이설정되어있으나속성을선언하여다른값으로설정할 수있다. 각속성단위는세미콜론 (;) 으로구분지어선언한다. E. 속성값 (Value) 속성에부여하는값을의미한다. F. 약속어 이문서에서약속어는객체, 이미지, 파일및폴더의네이밍시의미를일관되게표현하기위해미리지정해 놓은일종의언어규칙을의미한다.

22

23 2. 네이밍규칙 이장에서는 id/class, 이미지, 파일, 폴더의네이밍규칙을설명한다.

24 2. 네이밍규칙 2.1 기본규칙 다음과같은기본네이밍규칙을준수한다. A. 일반규칙 이름은영문소문자, 숫자, 언더스코어 (_) 로작성한다. B. 시작이름 이름은영문소문자로만시작할수있다. 단, css 주석문은영문대문자를허용한다. ( 예 : /* NHN WSD1Team KDW */) 표 2-1 공통네이밍규칙예 잘못된예 Btn 2btn _btn btn_ 올바른예 btn btn2 btn btn C. 약속어 약속어는레이아웃약속어, 객체약속어, 이미지약속어에근거하여작성한다.( 표 2-3 레이아웃약속어 범위, 표 2-4 팝업레이아웃약속어범위, 표 B 2-1 객체약속어, 표 B 2-2 이미지약속어에근거하여 작성한다.) 약속어가없으면, 종류와특성을나타내도록네이밍하거나공통네이밍약속어 Guide 를참고하여 작성한다. 공통요소약속어 (.u_) 는공통업무담당자에한에서만사용한다. 참고 공통네이밍약속어 Guide 는권장약속어로공통네이밍약속어 Guide 는아래링크주소를참고한다. D. 영문소문자, 숫자, 언더스코어조합 영문소문자, 숫자, 언더스코어 (_) 만사용할수있다. 언더스코어 (_) 는단어와단어조합할때만사용한다. 언더스코어 (_) 가포함된약속어는숫자, 영문소문자와조합하여사용할수있다. 표 2-2 네이밍조합예 기본형잘못된예올바른예 section sectionlist section_list 24 NHN Coding Convention

25 no - no1, no2, no3. no10 2. 네이밍규칙

26 2. 네이밍규칙 2.2 id 및 class 네이밍규칙 다음그림은 HTML 의기본템플릿구조를나타낸것이다. 그림 2-1 PC HTML 기본템플릿구조 26 NHN Coding Convention

27 2. 네이밍규칙 그림 2-2 모바일 HTML 기본템플릿구조 A. id, class id는문서전체의고유식별자이므로한문서에서동일한 id를여러번사용하지않는다. 레이아웃을제외한 id는스타일을지정하지않는다. class는문서에서여러번사용할수있다. B. 레이아웃약속어레이아웃에는다음표에예약된 id만사용한다. 표 2-3 레이아웃약속어범위 약속어 #wrap #header #container #content #footer 범위페이지전체영역머리글영역본문영역주요콘텐츠영역바닥글영역 C. 팝업레이아웃약속어 팝업문서의레이아웃지정범위는동일하다.

28 2. 네이밍규칙 레이아웃약속어앞에 'pop_' 를조합하여사용한다. 표 2-4 팝업레이아웃약속어범위 약속어 #pop_wrap #pop_header #pop_container #pop_content #pop_footer 범위페이지전체영역머리글영역본문영역주요콘텐츠영역바닥글영역 D. 레이아웃네이밍조합 레이아웃에디자인속성을추가 / 변경하려면 class 를사용한다. 표 2-5 레이아웃네이밍조합예 잘못된예 #wrap2, #wrap_type 올바른예 #wrap <div id="wrap" class= wrap_type > <div id="header"></div> <div id="container" class="container_type"> <div id="content"></div> </div> </div> <div id="footer"></div> </div> E. 객체네이밍 객체약속어는표 B-1 객체에근거하여작성한다. 객체는 class 만사용할수있으며, 전사공통마크업템플릿의 class 와중복되지않아야한다. 개발과연동되는동적객체도 class 만사용한다. 팝업, iframe 에도동일한규칙을적용한다. F. class 네이밍확장 종속확장 class 기본형 class 에종속되어여백, 색깔, 행간등의몇가지속성을부여하고자할때사용하는 class. <style>.mykin_list a{font-size:12px;line-height:14px;font-weight:bold}.mykin_list_v1 a{color:#f00}.mykin_list_v2 a{color:#03f} </style> <div class="mykin_list"><a href="#"> 바로가기 </a> </div> <div class="mykin_list mykin_list_v1"><a href="#"> 바로가기 </a> </div> <div class="mykin_list mykin_list_v2"><a href="#"> 바로가기 </a> </div> 28 NHN Coding Convention

29 2. 네이밍규칙 그림 2-3 종속확장 class 예 독립확장 class 기본형 class 의변형이타입으로분류할만큼클경우사용하는 class. <ul class= mykin_list2 > <li> 리스트 1</li> <li> 리스트 1</li> <li> 리스트 1</li> </ul> <ul class= mykin_list3 > <li> 리스트 1</li> <li> 리스트 1</li> <li> 리스트 1</li> </ul> 그림 2-4 독립확장 class 예 표 2-6 class 네이밍확장예 기본형확장형설명 mykin_list mykin_list_v1, mykin_list_v2... 종속확장 class mykin_list2, mykin_list3 독립확장 class

30 2. 네이밍규칙 2.3 이미지네이밍규칙 다음과같은이미지네이밍규칙을준수한다. A. 이미지네이밍 이미지약속어는표 B-2 이미지에근거하여작성한다. 같은분류의이미지가두개이상이면파일이름마지막에숫자를추가하여구분한다. 이미지네이밍은이미지확장자와관계없이순차적으로적용한다. 예 ) bu_dot1.gif, bu_dot2.jpg, bu_dot3.png 임시이미지는 tmp_ 를조합한다. 예 ) tmp_ B. 이미지네이밍조합 이미지이름은 ' 형태 _ 의미 _ 상태 ' 순서로조합한다. 표 2-7 이미지네이밍조합예잘못된예 올바른예 설명 on_recommend_tab1 tab1_recomm_on ' 형태 _ 의미 _ 상태 ' 순서로조합한다. bnm.gif btn_naver_mail.gif 임의로축약하지않는다. btn_search.gif btn_srch.gif 영문소문자를사용한다. 1btn_search.gif btn_srch.gif 숫자로시작하지않는다. 30 NHN Coding Convention

31 2. 네이밍규칙 2.4 파일및폴더네이밍규칙 다음과같은파일및폴더네이밍규칙을준수한다. A. 파일및폴더네이밍 표 2-8 파일및폴더네이밍규칙을따른다. 표 2-8 파일및폴더네이밍규칙예 분류 예제 설명 HTML news.html ' 서비스영문이름.html' 로사용 pop_.html ifr_.html Inc_.html 팝업파일을사용 iframe 파일을사용 Include 파일 tmp_.html 임시파일을사용 (QP 예외규칙 ) CSS news.css ' 서비스영문이름.css' 로사용한다. news_e.css 모바일예외대응시 모바일 CSS 파일분기규칙 에따 라사용한다. Folder p_yymmdd_ 프로젝트이름신규프로젝트작업시사용 s_yymmdd_ 서스테이닝이름 img, css, js p_yymmdd_ 프로젝트명 \ 메뉴명 tmp_ 서스테이닝작업시사용 image, css, javascript 폴더사용 HTML 파일의폴더분류가필요한경우사용임시파일의폴더분류가필요한경우사용 (QP 예외규칙 ) 참고모바일 CSS 파일분기규칙은아래링크주소를참고한다. B. 파일및폴더네이밍조합 HTML파일은 ' 메뉴이름 _ 의미 _ 상태 ' 순서로조합한다. CSS 파일은 ' 서비스이름 ' 을맨앞으로하여조합한다. 표 2-99 HTML/CSS 조합예 분류조합예설명 HTML news_nboard_view.html ' 메뉴이름 _ 의미 _ 상태 ' 순서로조합한다. CSS news_home.css ' 서비스이름 ' 을맨앞으로하여조합한다.

32 2. 네이밍규칙 news_admin.css news_pop.css, news_nanum.css 32 NHN Coding Convention

33 3. HTML 코드작성규칙 이장에서는 HTML 코드의기본작성규칙과들여쓰기, 빈줄사용, DTD 및인코딩선언, 주석표기규칙을설명한다.

34 3. HTML 코드작성규칙 3.1 기본규칙 HTML 코드를작성할때다음과같은기본규칙을준수한다. A. W3C Validation HTML은해당 DTD의명세에맞게작성하며, W3C validation을통과해야한다. 단, HTML5 DTD 선언시다음오류내용은허용한다. <iframe> 의 frameborder, marginwidth, marginheight, scrolling 애트리뷰트 B. 영문소문자사용 DTD 를제외한모든요소와애트리뷰트는소문자로작성한다. 표 3-1 소문자작성예 잘못된예 <SPAN Class="desc"> 간단한설명 </SPAN> 올바른예 <span class="desc"> 간단한설명 </span> C. 애트리뷰트값표기 애트리뷰트값은큰따옴표 (" ") 로묶는다. 표 3-2 애트리뷰트값표기예 잘못된예 <img src='test.gif' width='100' height='100' alt=' 테스트 '> 올바른예 <img src="test.gif" width="100" height="100" alt=" 테스트 "> D. Character entity references 사용특수기호는문자엔티티참조를사용하여코드로변환한다. 자세한사항은아래경로에서확인할수있다. 단, 아포스트로피 ( ) 는 &#39; 로선언한다. HTML 4.01의 Character entity references: HTML 5의 Character references: 표 3-3 Character entity references 사용예 잘못된예 올바른예 <a href="...&nid=2">q&a <a href="... &nid=2">q&a 참고 <, >, ", ', & 등의특수기호를 Character entity references 로변환하지않으면, 브라우저가이를시작 / 종료요소나애트리뷰트로잘못해석할수있다. 자동으로생성되는링크의경로나이미지의 alt 값에도 Character entity references 가바르게적용되도록한다. 34 NHN Coding Convention

35 3. HTML 코드작성규칙 E. 스크립트선언지양 Javascript 를사용하되태그에 inline 방식으로사용하는이벤트속성및스크립트는 HTML 산출물에선언하지 않는다.(<head> 태그사이또는 <body> 태그최하단에선언할수있다 ) 표 3-4 스크립트예 잘못된예 <input type="text" id="user_id" name="user_id" onfocus="this.classname='focus'"> 올바른예 <!-- [D] 입력박스에포커싱되었을때, class="focus" 추가 --> <input type="text" id="user_id" name="user_id" class="focus">. <script> document.getelementbyid("user_id").addeventlist ener('focus',function(e){e.target.classname="focus ";},false); </script> </body>

36 3. HTML 코드작성규칙 3.2 들여쓰기규칙 들여쓰기를하면코드의가독성이높아지고전체 HTML 구조를쉽게파악할수있다. 다음과같은들여쓰기규칙을준수한다. 마크업의중첩이깊어질때마다자식요소는 1탭들여쓰고, 1탭의크기는공백 4칸으로설정한다. 문서내에서반드시탭을이용하여들여쓰기를하며, 탭을대신하여공백으로띄어들여쓰지않는다. 또한다음의경우에는중첩단계의파악이용이하도록들여쓰지않는다. <html> 의자식요소인 <head>, <body> <head> 의자식요소 <body> 의자식요소 <table> 의자식요소인 <caption>, <colgroup>, <col>, <thead>, <tbody>, <tfoot>, <tr>,<th>, <td> <ul>, <ol>, <dl> 의자식요소인 <li>, <dt>, <dd> 요소 <fieldset> 의자식요소인 <legend> <map> 의자식요소인 <area> 표 3-5 들여쓰기사용예 잘못된예 <table> <caption>...</caption> <colgroup> <col> </col> </colgroup> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> <ul> <li>...</li> <li>...</li> </ul> 올바른예 <table> <caption>...</caption> <colgroup> <col> </col> </colgroup> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> <ul> <li>...</li> <li>...</li> </ul> 36 NHN Coding Convention

37 3. HTML 코드작성규칙 잘못된예 <ol> <li>...</li> <li>...</li> </ol> <dl> <dt>...</dt> <dd>...</dd> </dl> 올바른예 <ol> <li>...</li> <li>...</li> </ol> <dl> <dt>...</dt> <dd>...</dd> </dl>

38 3. HTML 코드작성규칙 3.3 빈줄 빈줄을사용하려면다음과같은사용규칙을준수한다. 의미있는객체를구분하기위하여코드그룹간 1줄씩빈줄을만드는것은허용한다. 빈줄의간격은 1줄을초과하지않는다.. 표 3-6 빈줄사용예 잘못된예 <head> 내용... </head> 빈줄빈줄 <body> 내용... </body> 올바른예 <head> 내용... </head> 빈줄 <body> 내용... </body> 38 NHN Coding Convention

39 3. HTML 코드작성규칙 3.4 DTD 및인코딩 DTD 선언 HTML 문서는반드시 DTD 를선언한다. A. 기본 DTD 신규 HTML 문서를작성할때 'HTML5' 를사용한다. 작성예는다음과같다. <!DOCTYPE html> 참고 HTML5 는 SGML 에기본으로하지않기때문에, DTD 의참조를요하지않는다. <!DOCTYPE> 은웹브라우저가 HTML 이무슨버전인지알수있게해준다. B. 기타 DTD 사용중인서비스를부분개편하거나완전히개편하더라도기존의 HTML/CSS 데이터의존도가높다면, 기존과동일한 DTD 를사용할수있다. 작성예는다음과같다. HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Quirks Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 주의 아래와같은경우 DTD 설정별표준문법으로마크업하더라도브라우저에서 Quirks Mode 로인식하여바르게해석되지않으므로주의한다. DTD 가선언되지않은경우 (html 태그로문서시작 ) <html> 선언한 DTD 앞에다른문자가오는경우 <!-- //html 문서시작 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " org/tr/html4/loose.dtd">

40 3. HTML 코드작성규칙 인코딩선언 HTML 문서는반드시인코딩정보를선언한다. 인코딩설정은 DB 의인코딩방식과도관련이있으므로 반드시담당개발자와협의하여정해야한다. A. 기본인코딩신규 HTML 문서를작성할때기본인코딩은 utf-8을원칙으로한다. 다음은인코딩방식으로 utf-8을선언한예이다. <meta charset="utf-8"> HTML4.01 DTD 사용시에는아래와같이선언한다. <meta http-equiv="content-type" content="text/html;charset=utf-8"> utf-8 은다국어지원이가능하며, euc-kr 보다표현가능한한글 ( 고어, 음절등 ) 이더많다. 참고 한글은 utf-8 에서 3 바이트, euc-kr 에서 2 바이트를차지하기때문에, utf-8 이 euc-kr 에비하여 DB 저장용량이나트래픽이많을수있다. Internet Explorer 7 이상의버전에서아래와같이링크의밑줄이글자와붙어보이는현상이있다. B. 기타인코딩 utf-8 인코딩을사용할수없으면 euc-kr을사용한다. 다음은인코딩방식으로 euc-kr을선언한예이다. <meta http-equiv="content-type" content="text/html;charset=euc-kr"> HTML, CSS 파일을저장할때반드시설정한인코딩을선택하여저장한다. 40 NHN Coding Convention

41 3. HTML 코드작성규칙 3.5 주석 A. 기본형식 HTML 주석의시작과종료는아래와같이표기하며, 기본형식에맞게작성한다. 시작주석 <!-- 주석내용 --> 종료주석 <!-- // 주석내용 --> 주석기호와주석내용사이에는반드시공백한칸이있어야한다. 시작과종료주석의주석내용은동일해야한다. 표 3-7 주석기본형식예 잘못된예 올바른예 <!--GNB--> <!-- GNB --> <!--* GNB *--> <!-- GNB 시작 --> <!-- //GNB --> <!-- //GNB 끝 --> 주의 마크업과개발의편의를위해작성한주석은실제서비스를적용할때반드시삭제한다. B. 레이아웃및콘텐츠영역의주석표기 wrap 을제외한레이아웃과독립된콘텐츠영역의시작과끝에주석을표기하며, 독립된콘텐츠영역의주석 표기는선택사항이다. HTML 코드와주석은줄로분리해야한다. <!-- content --> <div id="content"> <!-- 네임카드 --> <div class="namecard">... </div> <!-- // 네임카드 --> </div> <!-- //content --> C. 개발적용과관련된주석표기 개발적용과관련된주석은해당되는영역위에표기하며, 종료주석은표기하지않는다. 주석앞에는 [D] 라는말머리를사용하여담당개발자가반드시확인할수있도록한다.

42 3. HTML 코드작성규칙 표 3-8 개발적용관련주석표기예사용예 <!-- content -- > <!-- [D] 케이스별클래스변화의사 : my_doctor 변호사 : my_lawyer --> <img src="btn.gif" width="100" height="100" alt=" 버튼 "> <!-- [D] 활성된버튼은파일명에 _on 추가 <img src="btn_on.gif" width="100" height="100" alt=" 버튼 "> --> 42 NHN Coding Convention

43 3. HTML 코드작성규칙 3.6 초기파일 신규 HTML 문서를작성할때아래파일을참고한다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title> 메뉴 : 브랜드명서비스 </title> <link rel="stylesheet" type="text/css" href="sevice_name.css"> </head> <body> <div id="wrap"> <!-- u_skip --> <div id="u_skip"> </div> <!-- //u_skip --> <!-- header --> <div id="header"> </div> <!-- //header --> <!-- container --> <div id="container"> <!-- content --> <div id="content"> </div> <!-- //content --> </div> <!-- //container --> <!-- footer --> <div id="footer"> </div> <!-- //footer --> </div> </body> </html> 모바일신규 HTML 문서를작성할때아래파일을기본으로한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content=".."> <title> 상단 : 헤더명 </title> <link rel="stylesheet" type="text/css" href="css/.."> </head> <body class=".."> <!-- u_skip --> <div id="u_skip" > </div> <!-- //u_skip --> <!-- header --> <header role="banner"> </header> <!-- //header --> <hr /> <!-- content --> <div id="content" role="main"> </div> <!-- //content --> <hr /> <!-- footer --> <div id="footer" role="contentinfo"> </div> <!-- //footer --> </body> </html>

44 4. HTML 요소작성규칙 4. HTML 요소작성규칙 이장에서는 HTML 요소종류별작성규칙을설명한다. 44 NHN Coding Convention

45 4. HTML 요소작성규칙 4.1 기본규칙 특정요소에 class, style 을선언할때는선언순서를준수한다. 다음과같이 class 와 style 은제일뒷부분에 선언한다. <input type="text" id="user_id" title=" 사용자 ID" class="input_txt" style="width:100px">

46 4. HTML 요소작성규칙 4.2 전역구조화요소 A. <html> 다음과같이 lang 애트리뷰트를선언한다. class 애트리뷰트는선언하지않는다. <html lang="ko"> XHTML DTD 선언시에는다음과같이 lang 애트리뷰트를선언한다. <html xmlns=" xml:lang="ko" lang="ko"> lang 애트리뷰트는 User Agent가언어를올바로해석할수있게도와주며, 검색과음성장치 (speech synthesizers) 에활용된다. 언어코드는모든요소에사용할수있지만 HTML 요소에해당문서의주언어코드만선언한다. HTML 4.01 Specification, XHTML 1.0 Specification에서자연어는 RFC 1766에명시된언어코드를사용한다. RFC1766은각각 ISO639, ISO3166을참조하며, ISO Specification은유료이므로아래웹페이지를참조한다. MSDN Language Codes: 자주사용하는국가코드는 en( 영어 ), ja( 일본어 ), zh-cn( 중국어 ) 이다. B. <head> meta, title, link, script, style 순서로요소를선언한다. <head> <meta charset="utf-8"> <title> 속보 : 뉴스 </title> <link rel="stylesheet" href="css/default.css"> <script src="js/default.js"></script> <style> </style> </head> HTML 4.01 DTD 선언시에는다음과같다. <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <title> 속보 : 뉴스 </title> <link rel="stylesheet" type="text/css" href="css/default.css"> <script type="text/javascript" src="js/default.js"></script> <style type="text/css"> </style> </head> C. <title> " 메뉴 : 브랜드명서비스 " 의형식으로작성한다. <title> 속보 : 네이버뉴스 </title> 46 NHN Coding Convention

47 4. HTML 요소작성규칙 D. <link> rel, type, href 애트리뷰트를선언한다. <link rel="stylesheet" type="text/css" href="css/default.css"> E. <script> src 애트리뷰트를선언한다. <script src="js/default.js"></script> F. <style> <style > </style> 참고 language 애트리뷰트는 HTML4 이전버전의하위호환성을위해사용하는비표준애트리뷰트로, 사용하지않는다. HTML4.01 문서의경우 <script> 와 <style> 선언시 type 애트리뷰트를선언한다. G. <body> 모바일에서는 <body> 에브라우저별로정의된 class명을지정하고이를상속하여브라우저별 CSS 렌더링차이를해결한다. 변경사항이잦으니아래경로에서확인한다 표 4-1 <body> 태그의클래스추가 브라우저 클래스 사파리 s, s2(ios 4.2 미만 ) 안드로이드 a <body class="s">

48 4. HTML 요소작성규칙 4.3 폼요소 폼컨트롤요소를마크업할때 <form>, <fieldset>, <legend> 요소를다음과같이선언한다. 단, 필요에따라 개별적으로사용할수있다. <form> <fieldset> <legend> 개인정보 </legend> </fieldset> </form> A. <fieldset> <form> 요소의자식노드로선언하여폼컨트롤요소들을그루핑하기위해선언한다. <form> <fieldset> <legend> 개인정보 </legend> </fieldset> </form> B. <legend> 폼컨트롤그룹인 <fieldset> 의자식요소로서폼컨트롤요소들의그룹이름을표현하기위해선언한다. <form> <fieldset> <legend> 개인정보 </legend> </fieldset> </form> C. <input> <label> 요소, title 애트리뷰트, alt 애트리뷰트를통해스크린리더사용자는주변맥락에대한이해없이각요소에독립적으로접근해도폼을이해할수있다. <label for="user_id"> 아이디 </label> <input type="text" id="user_id" name="user_id"> <input type="image" src="btn_confirm.gif" alt=" 확인 "> <input type="text" id="num1" name="num1" title=" 지역번호 "> <input type="text" id="num2" name="num" title=" 국번 "> <input type="text" id="num3" name= num title=" 전화번호 "> 다음과같이 type 값에따라애트리뷰트를선언한다. type 이 text 인경우 동일한스타일의텍스트필드이나너비값이다를경우 style 애트리뷰트를이용하여 width값을제어한다. type이 radio, checkbox인경우그루핑이필요하면선택적으로 name 애트리뷰트를이용하여항목들을그루핑한다. 기본선택에대한표현이필요할경우 checked="checked" 라고표기한다. type이 image인경우 alt 애트리뷰트를반드시선언한다. <input type="image" src="img/btn_confirm.gif" alt=" 확인 "> 48 NHN Coding Convention

49 4. HTML 요소작성규칙 type 이 file인경우 : type 애트리뷰트를선언한다. <input type="file"> type 이 button, reset, submit 인경우 : type 애트리뷰트를선언한다. <input type="button"> D. <select> 동일한스타일의셀렉트박스이나너비값이다르면선택적으로 style 애트리뷰트를이용하여 width 값을 제어한다. <label for="grade"> 등급 </label> <select id="grade" style="width:100px"> <option>1 등급 </option> <option>2 등급 </option> </select> <select title=" 등급 " style="width:100px"> <option> 등급 </option> </select> E. <label> <input>(text, checkbox, radio, file, password), <select>, <textarea> 와같은폼요소는 for 애트리뷰트를 부여하여해당요소의 id 값과동일한이름으로연결 (coupling) 한다. 단, 레이블명이위치할공간이없는 경우 title 애트리뷰트로대체할수있다. <input type="radio" name="alignment" id="align_left"> <label for="align_lft"> 왼쪽정렬 </label> <input type="checkbox" name="sports" id="soccer"> <label for="soccer"> 축구 </label> 단, <label> 안에 <input> 앨리먼트가있는경우 for 와 id 를이용하여연결하지않아도된다. <label><input type="checkbox" name="sports"> 축구 </label> F. <textarea> cols, rows 애트리뷰트를선언한다. CSS를정상적으로불러오지못하는상황에서도사용에문제가없도록 cols, rows의애트리뷰트값은각각최소 30, 5 이상이되도록선언한다. <label> 로연결 (coupling) 할수없는경우 title을사용하여도무방하며 id, title 애트리뷰트를선언한다. <textarea cols="30" rows="5" (id=" ") (title=" ")></textarea> G. <button> type 애트리뷰트를선언한다. type 애트리뷰트를 button으로선언하여열기 / 닫기, 접기 / 펼치기등의 UI를제어한다. 폼전송역할을하는버튼은 submit 타입을사용한다. <button type="button"> 열기 </button> <button type="submit"> 전송 </button>

50 4. HTML 요소작성규칙 4.4 표요소 표요소를아래와같이배치한다. <table summary=" 짬뽕은자장면보다 500 원비싸고열량이 50kcal 높다 "> <caption> 자장면과짬뽕의가격과열량비교 </caption> <col span="2" style="width:100%"> <thead> <tr> <th scope="col" > 구분 </th> <th scope="col" abbr=" 가격 "> 가격 (won)</th> <th scope="col" abbr=" 열량 "> 열량 (kcal)</th> </tr> </thead> <tfoot> <tr> <th scope="row" > 계 </th> <td>6,500</td> <td>650</td> </tr> </tfoot> <tbody> <tr> <th scope="row"> 자장면 </th> <td>3,000</td> <td>300</td> </tr> <tr> <th scope="row"> 짬뽕 </th> <td>3,500</td> <td>350</td> </tr> </tbody> </table> A. <table> 2차원의격자형데이터를표현하기위해사용한다. 표의요약내용을표기해야할때 summary 애트리뷰트를선택적으로사용할수있다. <table summary="summary context here">.. B. <caption> 표의제목을표현하기위해사용한다. caption 요소는반드시선언한다 <caption> 자장면과짬뽕의가격과열량비교 </caption> C. <colgroup> <col> 요소를그루핑하여디자인을제어할때선언한다. 이요소는선택적으로사용한다. <colgroup><col style="width:100px"></colgroup> <colgroup><col span="2" style="width:100px"></colgroup> D. <col> 표각열의너비지정을위해선언한다. width, span 애트리뷰트를아래와같이선택적으로선언한다. 50 NHN Coding Convention

51 4. HTML 요소작성규칙 <col span="2" style="width:100px"> <col style="width:100px"><col style="width:100px"> <col style="width:100px"><col> <col style="width:50%"><col style="width:50%"> E. <thead> 표머리글을그루핑할때선언한다. <thead> <tr> <th> 구분 </th> <th scope="col" abbr=" 가격 "> 가격 (won)</th> <th scope="col" abbr=" 열량 "> 열량 (kcal)</th> </tr> </thead> F. <tfoot> 표바닥글을그루핑할때선택적으로선언한다. tfoot 요소는 thead 와 tbody 요소사이에위치해야한다. <thead> </thead> <tfoot> <tr> <th> 계 </th> <td>6,500</td> <td>650</td> </tr> </tfoot> <tbody> </tbody> G. <th> scope, abbr, id 애트리뷰트를선언한다. abbr과 id애트리뷰느는선택적으로선언한다. 표에셀제목이명시되지않은경우에도 <th> 요소를선언하여의미에맞는제목을명시한다 ( 화면에표시되지않도록 CSS로숨김처리 ). scope 애트리뷰트는반드시선언해야한다.(id, Headers 사용시필요없음 ) <th scope="col" abbr=" 가격 "> 음식의가격 (won)</th> 참고 scope 애트리뷰트 : <th> 요소에동반되는애트리뷰트로서현재의셀이어느셀의제목인지범위를명시한다. scope 애트리뷰트의값으로는 col, colgroup, row, rowgroup 이있다. abbr 애트리뷰트 : <th> 요소에동반되는애트리뷰트로서포함하고있는콘텐츠를축약하여표기할수있을때약어를표기하는데사용한다. 헤딩셀의내용을반복해서음성으로출력하는도구들은 abbr 애트리뷰트에표기된약어를읽는다. H. <tbody> 표본문을그루핑하기위해선언한다. 테이블의본문 (body) 이하나이고 <thead> 나 <tfoot> 이없을경우 생략할수있다. <tbody> <tr> <th scope="row"> 자장면 </th> <td>3,000</td>

52 4. HTML 요소작성규칙 <td>300</td> </tr> </tbody> 52 NHN Coding Convention

53 4. HTML 요소작성규칙 4.5 기타요소 A. <a> href, target, title 애트리뷰트를선택적으로선언한다. 새창으로페이지를표시해야할때 target 애트리뷰트를선택적으로사용한다. title 애트리뷰트는예고없이새창을표시해야하거나이동경로를정확히알수없을때, 또는브라우저에독립적으로툴팁을표현하기위해사용한다. <a href="print.nhn" target="_blank" title=" 새창 "> 인쇄하기 </a> 참고 HTML5 에서의 <a> HTML5 에서의 <a> 요소안에블록속성의요소를포함할수있다. B. <iframe> <iframe> 은페이지성능에영향을주기때문에가급적사용하지않는다. 부득이하게사용해야할경우 src, width, height, title, frameborder, marginwidth, marginheight, scrolling 애트리뷰트를선언한다. 스크린리더사용자를위해 title 애트리뷰트에제목을표기한다. 상단에 iframe 의 heading 요소가있는 경우더라도반드시 title 을선언한다. Iframe 의내용이빈경우더라도빈아이프레임라는것을사용자에게알려주도록한다. <iframe src="nbox.html" width="410" height="800" title=" 공지사항게시판 " frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 참고 iframe 사용시다음과같은문제점이있다. iframe 을포함하는페이지의도메인과 iframe 에서불러오는페이지의도메인이다르면, 크로스도메인설정을위해별도의소스코드가추가되어성능에영향을줄수있다. iframe 의높이값이콘텐츠에따라유동적이어야한다면별도의자바스크립트코드가추가되어성능에영향을줄수있다. 검색엔진에서 iframe 의내용만추출하여표시하면전체페이지의레이아웃이비정상적으로보일수있으며, 주변맥락 ( 머리글, 바닥글, 메뉴 ) 이노출되지않아검색엔진최적화 (SEO) 관점에서적합하지않다. iframe 은가장마지막으로로딩되기때문에페이지로딩초기에는화면이비어보일수있다. 모바일에서는 iframe 스크롤에대한렌더링이브라우저별로다르며, CSS 말줄임이동작하지않는브라우저가있다. 접근성보장을위해유관부서와협의가능여부를판단하여아래안중하나를선택할수있다. <iframe>iframe 미지원장치에서는내용을확인할수없습니다.</iframe> <iframe><a href=" 아이프레임링크 "></a></iframe>

54 4. HTML 요소작성규칙 C. <img> src, width, height, title, alt, usemap 애트리뷰트를선택적으로선언한다. 이미지내용과동일한값을 alt 애트리뷰트에표기하여, 이미지를볼수없는환경 ( 스크린리더, 이미지 서버장애, 이미지표시하지않음설정 ) 에서도내용을확인할수있게한다. title 애트리뷰트를선언한경우에도 alt 애트리뷰트를함께선언한다. title 애트리뷰트는브라우저에독립적으로툴팁을표현하기위해사용한다. <img src="logo.gif" width="30" height="10" title=" 고객센터 " alt=" 고객센터, 모든궁금증이해결되는곳 " usemap="#help"> D. <map> <map> 요소의 name 애트리뷰트를선언하여 <img> 요소의 usemap 애트리뷰트와같은이름으로 커플링한다. <img src="img_main.gif" width="696" height="196" title=" 한글날이벤트 " alt=" 한글날이벤트, 한글을글꼴로나눕니다 " usemap="#help"> <map name="help"> <area shape="rect" coords="506,48,608,139" href="#" target="_blank" title=" 고객센터 " alt=" 고객센터, 모든궁금증이해결되는곳 "> </map> E. <area> shape, coords, href, target, title, alt 애트리뷰트를선택적으로선언한다. title 애트리뷰트를선언한경우에도 alt 애트리뷰트를함께선언한다. target 애트리뷰트는새창으로페이지를표시해야할때사용한다. title 애트리뷰트는예고없이새창을표시해야하거나이동경로를정확히알수없을때, alt 애트리뷰트값을축약하거나, 브라우저에독립적으로툴팁을표현하기위해사용한다. <area shape="rect" coords="506,48,608,139" href="#" target="_blank" title=" 새창 " alt=" 고객센터, 모든궁금증이해결되는곳 "> 54 NHN Coding Convention

55 5. CSS 코드작성규칙 이장에서는 CSS 코드의기본작성규칙과인코딩, 선택자, 속성등의작성규칙을설명한다.

56 5. CSS 코드작성규칙 5.1 기본규칙 A. W3C Validation CSS 는사용가능한 Hack 과 CSS3 속성을제외하고 W3C Validation 을통과해야한다. B. 영문소문자사용 모든속성은영문소문자로만작성한다. 표 5-1 소문자작성예 잘못된예.class{Font-Family:AppleGothic} 올바른예.class{font-family:AppleGothic} C. 따옴표사용범위 공백이포함된폰트명, 한글폰트명, 문자열데이터타입, filter 속성의파라미터값은작은따옴표 (' ') 선언시에는속성값을큰따옴표 (" ") 로감싼다. 그외의경우에는따옴표를사용하지않는다. filter 속성의파라미터값에따옴표를사용하는것은선택사항이다. url 데이터타입에는작은따옴표를사용하지않는다. 예 ) font-family:' 돋움 ' filter:progid:dximagetransform.microsoft.alphaimageloader(src='bg.png', sizingmethod='scale') background:url(bg.gif) no-repeat content:'chapter:' charset "utf-8"; 표 5-2 따옴표사용예 잘못된예 font-family: 돋움 올바른예 font-family: ' 돋움 ' filter:progid:dximagetransform.microsoft.alphaima filter:progid:dximagetransform.microsoft.alphaima geloader(src="bg.png", sizingmethod="scale") geloader(src='bg.png', sizingmethod='scale') background:url('bg.gif') no-repeat content: "Chapter: 'utf-8'; background:url(bg.gif) no-repeat content: 'Chapter: "utf-8"; D. 마지막세미콜론사용지양 마지막속성의세미콜론 (;) 은삭제한다. 표 5-3 마지막세미콜론예 잘못된예.class{font-size:12px;color:#000;} 올바른예.class{font-size:12px;color:#000} 56 NHN Coding Convention

57 5. CSS 코드작성규칙 5.2 들여쓰기 CSS 코드를작성할때는들여쓰기를하지않는다. 단, 중괄호 {} 가중첩되는경우예외 표 5-4 들여쓰기사용예 잘못된예 #content{border:1px solid #000} all and (minwidth:480px){.vod_wrp2{height:278px}} 올바른예 #content{border:1px solid #000} all and (min-width:480px){.vod_wrp2{height:278px} }

58 5. CSS 코드작성규칙 5.3 공백 A. 선택자간공백제거 쉼표로구분되는선택자간공백은제거한다. 표 5-5 선택자간공백제거예 잘못된예 a:hover,^a:active,^a:focus{textdecoration:underline} 올바른예 a:hover,a:active,a:focus{text-decoration:underline} B. 속성간공백제거 속성간공백및속성값사이공백은제거한다. 표 5-6 속성간공백제거예 잘못된예.class p{color:#000;^line-height:18px} 올바른예.class p{color:#000;line-height:18px}.class p{color:#000^ ;line-height:18px} font-family:' 돋움 ',^dotum; font-family:' 돋움 ',dotum; C. 중괄호좌우공백제거 중괄호좌, 우공백은제거한다. 표 5-7 중괄호좌, 우공백제거예 잘못된예.class p^{color:#000}.class p{^color:#000; line-height:18px^} 올바른예.class p{color:#000}.class p{color:#000;line-height:18px} 58 NHN Coding Convention

59 5. CSS 코드작성규칙 5.4 빈줄 의미있는객체를구분하기위하여코드그룹간 1 줄씩빈줄을넣을수있다. 단, 빈줄의간격은 1 줄을 초과하지않게한다. 표 5-8 빈줄사용예 잘못된예 /* 의미있는그룹 1 */.class1{border:1px solid #000}.class1 img{border:1px solid #000} 빈줄빈줄 /* 의미있는그룹 2 */.class2{border:1px solid #000}.class2 img{border:1px solid #000} 올바른예 /* 의미있는그룹 1 */.class1{border:1px solid #000}.class1 img{border:1px solid #000} 빈줄 /* 의미있는그룹 2 */.class2{border:1px solid #000}.class2 img{border:1px solid #000}

60 5. CSS 코드작성규칙 5.5 줄바꿈 속성, 속성값사이줄바꿈은허용하지않는다. 단, 선택자와중괄호 {} 가중첩되는경우예외 표 5-9 줄바꿈사용예 잘못된예.class1,.class2,.class3{ width: color: } 100px; #000 print{ } #header{display:none} 60 NHN Coding Convention

61 5. CSS 코드작성규칙 5.6 인코딩 폰트이름이영문이아닐때이를브라우저에서바르게표현하고, HTML에서불러온스타일을제대로렌더링하려면반드시 CSS 인코딩을선언해야한다. HTML과동일한인코딩을문서첫줄에공백없이선언한다. "utf-8"; 파일을저장할때는반드시선언한인코딩과동일한인코딩을선택한다.

62 5. CSS 코드작성규칙 5.7 선택자 A. 공통선택자사용지양 최상위공통선택자 '*' 는웹페이지의성능을떨어뜨리고, Internet Explorer 에서는주석까지영향을받을 수있으므로사용하지않는다. B. id 선택자범위 id 선택자는 2.2 id 및 class 네이밍규칙에서정의한레이아웃 (wrap, header, container, content, footer) 에만사용한다. C. 다중선택자사용 대응범위에인터넷익스플로러 6.0 브라우저환경이포함될경우다중선택자오류가발생하므로 id 와 class, class 와 class 간의다중선택자를사용하지않는다. 표 5-10 다중선택자사용예 잘못된예.class{width:980px}.class.bg{background:yellow}.class.bg_v1{background:green} 올바른예.class{width:980px}.bg{background:yellow}.bg_v1{background:green} 참고 다중선택자란두선택자의조합에의해속성이부여되는경우를의미한다. 아래예에서 background:yellow 속성은.class 와.bg 가동시에선언될때만의미가있으며, background:green 속성은.class 와.bg_v1 이동시에선언될때만의미가있다. <style>.class{width:980px}.bg{background:yellow}.bg_v1{background:green} </style> <p class= class bg > 다중선택자 </p> <p class= class bg_v1 > 다중선택자 </p> 인터넷익스플로러 6.0 에서는 id 와 class 간다중선택자를사용할경우두번째선언된다중선택자를무시하는버그가있으며, class 와 class 간의다중선택자를잘못해석하는버그가있다. 이와같은버그를방지하기위해다중선택자를사용하지않도록한다. 62 NHN Coding Convention

63 5. CSS 코드작성규칙 5.8 속성 속성선언순서속성을선언할때는그쓰임새가레이아웃과관련이큰것에서시작하여레이아웃과무관한것순서로선언한다. 관련속성은대표되는속성다음으로선언하며, 표 5-11에표기된의미순서대로선언한다. 표 5-11 속성선언순서 순서의미대표되는속성 1 레이아웃 display, visibility, overflow, float, clear, position, top, right, bottom, left, z- index, 2 BOX width, height, margin, padding, border 3 배경 background 4 폰트 font,color, letter-spacing, text-align, text-decoration, text-indent, verticalalign, white-space 5 기타위에언급되지않은나머지속성들로폰트의관련속성이후에선언하며, 기타 속성내의선언순서는무관함 밴더속성과핵속성은해당속성뒤에선언한다. * [ 속성선언순서기준 : 1: 레이아웃, 2: BOX, 3: 배경, 4: 폰트, 5: 기타 ] 속성값축약 CSS 최적화를위해다음과같이속성값을축약한다. 표 5-12 속성값축약예 축약전축약후설명 # # 진수컬러코드값 #ff4400 #f40 동일한값으로이루어진 16 진수컬러코드값은세자릿수로축약하여사용한다. 단인터넷익스플로러전용속성인 CSS filter 를사용했을경우축약속성을인식하지못하는오류가있기때문에속성값을축약하지않는다..btn{border:1px solid #f60;*border:2px solid #f60;border-radius:2px;-webkit-boderradius:2px} backgroundposition:left center background-position:0 50% 위치값 문자로표현한위치값은숫자로변경한다. top:0px top:0 0 의단위 속성값이 0 일경우단위를표시하지않는다.

64 5. CSS 코드작성규칙 축약전축약후설명 padding:20px 20px 20px 20px margin:0 auto 0 auto padding:20px 30px 50px 30px padding:20px margin:0 auto padding:20px 30px 50px 동일한속성값 상, 우, 하, 좌의속성값이동일하면축약한다. border-color:#ccc #eee border-color:#ccc #eee #ccc #eee 참고문자로표현된위치값을숫자로변환할때다음과같이한다. top, left 0 right, bottom 100% 약식속성사용범위 border 와 background 는약식속성을우선적으로사용하며, font 약식속성은사용하지않는다. A. border 속성값은 border-width, border-style, border-color 순서로선언한다. 테두리스타일속성을초기선언할때는반드시 border 단일속성을사용하고, 이후테두리의부분적인 속성이변경될경우 border 관련속성 (border-width, border-style, border-color) 을선언한다. 작성예는다음과같다..class{border:1px solid #ccc}.class_v1{border-color:#666}.class_v2{border-style:dotted}.class2 {border-top:1px solid #ccc}.class2_v1{border-top-color:#666}.class2_v2{border-top-style:dotted} 테두리의상, 우, 하, 좌스타일이 2 개이상다르면, 공통스타일을약식속성으로선언한후다른부분은 관련속성으로선언한다. 표 5-13 테두리스타일이 2 개이상다를경우약식속성선언의예 잘못된예.class{border:1px solid #ddd;border-bottom:1px solid #eee;border-left:1px solid #eee} 올바른예.class{border:1px solid;border-color:#ddd #ddd #eee #eee}.class{border-top:1px solid #ddd;border-right:1px.class{border:1px;border-style:solid dotted;bordercolor:#ddd #ddd #eee #eee} dotted #ddd;border-bottom:1px solid #eee;borderleft:1px dotted #eee} 64 NHN Coding Convention

65 5. CSS 코드작성규칙 B. background 속성값은 background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-origin, background-clip 순서로선언한다. 배경스타일속성을초기선언할때는반드시 background 단일속성을사용하며, 이후배경의부분적인 속성이변경될경우 background 관련속성 (background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-origin, backgroundclip) 을선언한다. 작성예는다음과같다..class{background:#ccc url(bg.gif) no-repeat}.class_v1{background-position:0-50px}.class_v2{background-position:0-100px} C. font 폰트스타일은약식속성으로선언하지않는다. 폰트스타일을약식속성으로선언하면다음과같은문제가발생한다. 아래와같이선언하면, font-weight:bold 는상속되지않고 font 속성의디폴트값인 font-weight:normal 로 변경되기때문에불필요한속성값을선언해야하는문제가발생한다..class{font-weight:bold;font-size:12px;font-family:dotum}.class p{font:15px gulim} 결국, class p 의폰트스타일은아래와같아진다..class p{font-family:gulim;font-style:normal;font-variant:normal;font-weight:normal;fontsize:15px;line-height:normal} 한글폰트선언영문폰트만선언할경우특정브라우저에서폰트를올바르게출력하지못하는경우가있으므로한글폰트선언시한글, 영문폰트를모두선언한다. 표 5-14 폰트선언예 잘못된예 font-family:' 돋움 ' 올바른예 font-family:' 돋움 ',dotum

66 5. CSS 코드작성규칙 5.9 z-index z-index 속성의속성값의범위는최소 10, 최고 1000 이며, 10 단위로증감한다. 단, 10 단위사이의예외 변수가발생하면 1 단위값을지정할수있다. 다음은기본가이드로, 각서비스의 z-index 값은상황에맞게선택적으로선언한다. 그림 5-1 z-index 권장선언값 66 NHN Coding Convention

67 5. CSS 코드작성규칙 5.10 핵 (hack) 핵 (hack) 은가능한한사용하지않는다. 불가피하게사용해야할때는표 5-15 에제시된핵만사용하는것을 원칙으로한다. 표 5-15 사용가능한핵 브라우저표준 DTD Quirks Mode IE6 S{*P:V} S{_P:V} S{_P:V} IE7 S,x:-moz-any-link, *+html S{P:V} x:default {P:V} S,x:-moz-any-link, x:default{p:v} IE8 S{P:V\0} IE9 Firefox Safari/ Chrome Opera :root :root S{P:V} S{P:V\0!importa nt} S,x:-moz-any-link, x:default{p:v} :root S{P:V} [ 약어표기 S(Selector): 선택자, P(Property): 속성, V(Value): 속성값 ]

68 5. CSS 코드작성규칙 5.11 미디어타입 미디어타입선언을위한명령문 ( 중괄호포함 ) 은다음과같이세부스타일을지정하는명령문과줄로 구분한다. 인쇄를위한미디어타입은기본 CSS 파일의가장아랫부분에선언한다. /* For Print print{ #header,.snb,.aside{display:none} } 참고 미디어타입은각종미디어 ( 프린터, 모바일, 보조공학기기등 ) 에대응하는별도의 CSS 코드를작성할수있게한다. CSS 2.1 Specification 에따라대응가능한미디어타입은아래와같으며, 가장범용적으로사용하는타입은 print 타입이다. - all ( 모든출력장치 ) - aural ( 음성출력 ) - braille ( 점자출력 ) - handheld ( 포켓, 모바일 ) - print ( 인쇄 ) - projection ( 투사장치 ) - screen( 컴퓨터회면 ) - tty( 고정폭글자를사용하기위한미디어타입 ) - tv( 텔레비전타입 ) 68 NHN Coding Convention

69 5. CSS 코드작성규칙 5.12 CSS 선언타입 CSS 선언타입은크게세가지로분류하며, 용도에맞게사용한다. A. External type CSS를선언하는가장기본적인방식으로, CSS 파일이별도로존재하는형태이다. link 요소를통해 HTML과 CSS 파일을연결한다. 작성예는다음과같다. <link rel="stylesheet" type="text/css" href="../css/service_name.css"> B. Internaltype HTML 파일의 head 안에스타일을선언하는방식으로, 단발성페이지의 CSS 분량이작을경우사용한다. 작성예는다음과같다. <head> <style type="text/css"> </style> </head> C. Inline type HTML 의개별요소에 style 속성을이용하여스타일을선언하는방식으로, 속성값이동적으로변경되어야 하는경우사용한다. 속성값에사용되는 % 와같은특수기호는 Character entity references 로변환하지 않는다. 작성예는다음과같다. <div style="top:0;left:50%"> </div>

70 5. CSS 코드작성규칙 5.13 주석 기본형식 CSS 주석은아래와같이표기하며, 기본형식에맞게작성한다. /* 주석내용 */ 주석기호와주석내용사이에는반드시공백한칸이있어야한다. 주석기호와주석내용사이의줄바꿈은허용하지않는다. 단, 주석내용간줄바꿈은허용한다. 종료주석은사용하지않는다 주의 마크업과개발의편의를위해작성한주석은실제서비스를적용할때반드시삭제한다. 단, 작성자정보와그룹영역의주석표기는삭제하지않는다 작성자정보표기 작성자표기는 css 인코딩선언다음줄에 1 회만작성하며, 작성자정보에는소속부서, 영문이름이니셜, CSS 파일생성날짜 (YYMMDD 형식 ) 를작성한다. 유지보수만담당하는경우라도모두기입한다. 작성자정보 밑에는빈줄 ( 한줄 ) 을두어스타일을선언하는문장과구분되도록한다. 동일파일을유지보수하는경우, "utf-8"; /* NHN WSD1Team JJS , NHN WSD2Team JJJ */ /* NHN WSD1Team KDW */ 빈줄 의미있는그룹영역의주석표기 의미있는객체를구분하기위한주석은영역의윗부분에표기한다. 초기화와레이아웃스타일그룹을제외한 의미있는그룹영역의주석표기는선택사항이다. 작성예는다음과같다. /* 마이지식 SNB */.my_snb{width:182px}.my_snb li.num{padding-left:4px;color:#919190;font-size:11px;letter-spacing:0}.my_snb li.on a,.my_snb li.on.num{color:#259e0b}.my_snb li a{color:#424242} A. 초기화스타일그룹 CSS 초기파일에따라초기화속성은 /* Common */ 으로그루핑한다. /* Common */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textare a,button,select{margin:0;padding:0} body,input,textarea,select,table{font-family: 돋움,Dotum,AppleGothic,sans-serif;fontsize:12px} B. 레이아웃스타일그룹 레이아웃을위한스타일선언시 /* Layout */ 으로그루핑한다. /* Layout */ 70 NHN Coding Convention

71 #wrap{ } #header{ } #container{ } #footer{ } 5. CSS 코드작성규칙

72 5. CSS 코드작성규칙 5.14 파일분기 파일은독립된한서비스내에하나의파일을생성하며, 분기를허용하는경우는다음과같다. 한서비스가사용자화면 / 어드민으로구성되어전체레이아웃이다를경우 나눔글꼴을적용할경우 (ex. 서비스명 _nanum.css) 개편시개발상의이슈로이전에분리되어있던 CSS를합칠수없는경우 한서비스내에단발성페이지로존재하나 CSS를임베드하기어려운경우 태블릿 PC를대응할경우 72 NHN Coding Convention

73 5. CSS 코드작성규칙 5.15 초기파일 CSS 를새로작성할때는아래파일을기본으로한다. 초기파일에는스타일속성초기화문장이포함되어 있으며, "utf-8"; /* NHN Web Standard 1Team JJS , JJJ */ /* Common */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textare a,button,select{margin:0;padding:0} body,input,textarea,select,button,table{font-family:' 돋움 ',Dotum, Helvetica,sansserif;font-size:12px} img,fieldset{border:0} ul,ol{list-style:none} em,address{font-style:normal} a{text-decoration:none} a:hover,a:active,a:focus{text-decoration:underline}.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height: 1px;font-size:0;line-height:0} 모바일에서초기파일은브라우저에따라서비스영문이름.css, 서비스영문이름 _e.css 파일을작성한다. "utf-8"; /* NHN Web Standard 2Team MJA */ /* Common */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textare a,button,select{margin:0;padding:0} body,input,textarea,select,button,table{font-size:14px;line-height:1.25em} body.s,.s input,.s textarea,.s select,.s button,.s table{font-family:helvetica} body{position:relative;-webkit-text-size-adjust:none} img,fieldset{border:0} ul,ol{list-style:none} em,address{font-style:normal} a{text-decoration:none} table{border-collapse:collapse} hr{display:none!important}.blind,#u_skip{visibility:hidden;overflow:hidden;position:absolute;left:- 999em;width:0;height:0;font-size:0;line-height:0} #content{clear:both;width:100%;} #content::after{display:block;clear:both;height:1px;margin-top:-1px;content:''}

74

75 부록 A. 코딩시참고사항 부록 A 에서는웹표준기반의마크업, 크로스브라우징범위, 폴더생성방법, 플래시사용시유의점을설명한다.

76 부록 A. 코딩시참고사항 A.1 웹표준기반의마크업 A.1.1 웹표준기반의마크업 W3C 표준에근거한마크업표준에근거한 HTML과 CSS 마크업은향후웹브라우저호환성을보장받을수있다. 의미에맞는 HTML 요소를사용하여문서구조마크업웹문서의내용을 HTML 요소의의미만으로구조화, 선형화하여정보를전달할수있다. 따라서다양한웹브라우저와장치에서읽을수있으며, 화면크기등에따라디자인정보를가진 CSS 파일만수정하면 One- Source Multi Use가가능하다. 또한웹접근성이높아져어떤디바이스, 어떤응용프로그램을이용하더라도동일한콘텐츠를제공받을수있다. 구조와표현을분리기존에는구조와표현이분리되어있지않아서디자인정보만수정하고싶을때도전체를수정해야했다. 하지만웹표준기반의마크업에서는 HTML은문서의메타데이터정보를, CSS는문서의디자인정보를포함하도록분리되어있다. 디자인정보를수정할때는 CSS 파일만수정하면되므로유지보수가한결쉬워졌다. 또한, HTML 문서의 table 중첩사용이없어져용량이현저히줄어들기때문에, 로딩시간을단축할수있고 HTML 소스코드의재사용성이높아진다. A.1.2 웹표준기반의마크업프로세스 웹표준기반의마크업은다음그림과같은프로세스로진행한다. 그림 A-1 웹표준기반의마크업프로세스 A.1.3 웹접근성보장방법 웹접근성보장하는방법으로아래링크를참고한다 NHN Coding Convention

77 부록 A. 코딩시참고사항 A.2 크로스브라우징범위 크로스브라우징지원은다음과같이 3단계로분류된다. 마크업개발범위 : 마크업개발단계에반드시적용해야하는범위이다. QA 결함대응범위 : QA에서결함이발생할때대응하는범위로마크업스펙질의 / 확정단계에서가감이가능하다. 마크업개발범위를포함한다. 서비스예외범위 : 서비스특성상좀더확장된사용자층을고려해야하는경우적용해야하는범위이다. 네이버메인과고객센터가이에해당되며, 마크업개발범위, QA 결함대응범위를모두포합한다. 다음표는크로스브라우징의범위를나타낸것이다. 인터넷익스플로러를제외한나머지브라우저는최신버전을기준으로한다. 표 A-1 크로스브라우징범위 운영체제브라우저해당범위 윈도우 7 인터넷익스플로러 8.x~9.x 파이어폭스 사파리 크롬 마크업개발 범위 OS X(Mac) 파이어폭스 사파리 윈도우 XP 인터넷익스플로러 7.x QA 결함대응범위 윈도우 8 인터넷익스플로러 10.x 서비스예외범위 윈도우비스타 윈도우 XP 윈도우비스타 인터넷익스플로러 7.x~9.x 파이어폭스 사파리 크롬 ios Safari 인터넷익스플로러 6.0 이하 오페라

78 부록 A. 코딩시참고사항 A.3 폴더생성 A.3.1 마크업폴더구조 마크업을위한폴더를생성할때폴더구조는다음그림과같다. 필요에따라 js( 자바스크립트 ), flash( 플래시 ) 폴더도생성할수있다. 그림 A-2 마크업폴더구조 A.3.2 폴더생성시고려사항 작업폴더를생성할때는아래와같은사항을고려한다. 서비스폴더확인 서비스폴더 ( 그림 A-1 웹표준기반의마크업프로세스의 1 에해당 ) 는서비스이름으로된폴더이다. SVN 최상위폴더 ( 예 : blog/m.blog) 가이에해당 branches/ trunk 폴더확인모든작업폴더는 branches 폴더의하위폴더가된다 ( 신규프로젝트, 서스테이닝, 프로모션일반 ). 프로젝트, 서스테이닝업무가종료되면기존에있는 trunk 폴더를백업 (trunk_yymmdd) 하고작업폴더를 2에복제하고폴더명을 trunk 로변경한다. 작업폴더생성작업폴더 ( 그림 A-1 웹표준기반의마크업프로세스의 3에해당 ) 는업무유형에따라프로젝트형, 서스테이닝형으로구분한다. 네이밍규칙 ( 오류! 참조원본을찾을수없습니다. 오류! 참조원본을찾을수없습니다. 참조 ) 에맞는폴더이름을정하여서비스폴더아래에작업폴더를생성한다. 78 NHN Coding Convention

79 부록 A. 코딩시참고사항 작업폴더내구성이미지폴더와 CSS 폴더는기본으로생성한다. HTML 파일의개수가많거나, 별도의폴더로그루핑하여관리하는것이편리할경우, HTML을위한하위폴더 ( 그림 A-1 웹표준기반의마크업프로세스의 4에해당 ) 를생성할수있다.

80 부록 A. 코딩시참고사항 A.4 플래시사용시유의점 웹페이지에플래시가삽입될때다른콘텐츠가영향을받지않도록플래시의 wmode 를확인한다. 표 A-2 wmode 별특징 wmode window 설명 모든 HTML 객체보다우선순위가높다. swf 배경을표현하며, wmode 중애니메이션성 능이가장뛰어나다. opaque HTML 객체와의 z-index 를조절할수있고, swf 배경을표현한다. transparent HTML 객체와의 z-index 를조절할수있고, swf 배경을투명하게표현한다. wmode가 'window' 로설정되어있을때는다른 HTML 객체들보다항상위에존재하기때문에플래시화면위에서동작하는 HTML 객체가있는지확인해야한다. 80 NHN Coding Convention

81 부록 A. 코딩시참고사항 A.5 CSS Sprites 사용방법 화면이확대, 축소될때 CSS 스프라이트의배경이미지간여백이없으면사방에위치한이미지가보이는경우가 있다. 웹페이지의구성요소가모두일정한비율로변경되기때문에, 이과정에서화면에오류가발생한다. 따라서이미지간사방간격을최소 1px 띄우도록한다. 그림 A-3 CSS 스프라이트배경이미지배치의잘못된예 그림 A-4 CSS 스프라이트배경이미지배치의예

82 부록 A. 코딩시참고사항 A.6 단위변환 표 A-3 단위변환 px em px em 1px 0.07em 21px 1.5em 2px 0.14em 22px 1.57em 3px 0.21em 23px 1.64em 4px 0.29em 24px 1.71em 5px 0.36em 25px 1.79em 6px 0.43em 26px 1.86em 7px 0.5em 27px 1.93em 8px 0.57em 28px 2em 9px 0.64em 29px 2.07em 10px 0.71em 30px 2.14em 11px 0.79em 31px 2.21em 12px 0.86em 32px 2.29em 13px 0.93em 33px 2.36em 14px 1em 34px 2.43em 15px 1.07em 35px 2.5em 16px 1.14em 36px 2.57em 17px 1.21em 37px 2.46em 18px 1.29em 38px 2.71em 19px 1.36em 39px 2.79em 20px 1.43em 40px 2.86em 참고웹사이트 : 82 NHN Coding Convention

83 부록 B. 약속어목록 부록 B 에서는네이밍약속어를설명한다.

84 부록 B. 약속어목록 B.1 네이밍약속어 표 B-1 객체약속어 분류약속어영역 / 객체 공통.gnb 최상위전역내비게이션영역.sta 서비스이름, 연관서비스, 검색영역. lnb_ 현재서비스의지역내비게이션영역.snb_.aside_.spot_.path_.nav_.ad_.paginate.ly #u_skip.blind.u_ 측면내비게이션영역문서의주요부분을표시하고남은콘텐츠영역강조하는상위콘텐츠영역현재페이지의경로내비게이션요소광고요소페이지목록요소레이아웃요소스킵네비게이션숨김영역공통요소 그루핑.section_ heading 태그 (h1~h6) 를포함한요소들의그루핑.group_ section 보다낮은단계의 heading 태그를포함한요소들의그루핑. _area 위치에제한이없는특정기능을수행하는요소들의그루핑 [ 조합기호 : "_"] 공통요소약속어 (.u_) 는공통업무담당자에한에서만사용한다. 표 B-2 이미지약속어 약속어 h_ p_ gnb_, lnb_, snb_ tab_ btn_ bu_ ico_ 분류제목문장내비게이션탭버튼불릿아이콘 84 NHN Coding Convention

85 부록 B. 약속어목록 약속어 line_ bg_ img off, _over, _on ad_ tmp_ sp_ 분류선배경, 박스이미지상태변화광고임시스프라이트이미지 [ 조합기호 : "_"]