NHN 코딩 컨벤션

Size: px

Start display at page:

Download "NHN 코딩 컨벤션"

고영재 금
5 years ago
Views:

1 NHN Coding Convention for Markup Languages (HTML/CSS) 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 코드의기본작성규칙과읶코딩, 선택자, 속성등의작성규칙을설명핚다. 6장. 웹접근성보장방법웹접근성을보장하도록맀크업하는방법을설명핚다. 부록 A. 코딩시참고사항웹표준기반의맀크업, 크로스브라우징범위, 폯더생성방법, 플래시사용시유의점, PNG 이미지사용방법을설명핚다. 부록 B. 예약어목록네이밍예약어와대체텍스트예약어목록을설명핚다. 독자 이묷서는맀크업언어를다루는개발자를대상으로핚다.

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

5 목차 1. 개요 코딩컨벤션필요성 코딩컨벤션요소 네이밍규칙 HTML 코드작성규칙 HTML 엘리먼트작성규칙 CSS 코드작성규칙 웹접근성보장방법 코딩컨벤션용어 네이밍규칙 기본규칙 id 및 class 네이밍규칙 이미지네이밍규칙 파일및폴더네이밍규칙 HTML 코드작성규칙 기본규칙 들여쓰기규칙 빈줄 DTD 및인코딩 DTD 선언 인코딩선언 Viewport 주석 초기파일 HTML 엘리먼트작성규칙 기본규칙 젂역구조화엘리먼트 39

6 4.3 폼엘리먼트 표엘리먼트 기타엘리먼트 CSS 코드작성규칙 기본규칙 들여쓰기 공백 빈줄 줄바꿈 인코딩 선택자 속성 속성선언순서 속성값축약 약식속성사용범위 한글폰트선언 z-index 핵 (hack) 미디어타입 CSS 선언타입 주석 기본형식 작성자정보표기 의미있는그룹영역의주석표기 파일분기 초기파일 웹접근성보장방법 웹접근성정의 의미에맞는마크업 적젃한헤딩엘리먼트사용 적젃한목록엘리먼트사용 논리적인순서보장 대체텍스트제공 이미지대체텍스트제공 원문그대로의대체텍스트제공 텍스트가없는정보성이미지의대체텍스트제공 텍스트가많은이미지의대체텍스트제공 추가정보필요시 title 애트리뷰트사용 표의구성 81

7 6.5.1 <caption> <thead>, <tfoot>, <tbody> 엘리먼트사용 <th> 엘리먼트사용 scope 애트리뷰트사용 id, headers 애트리뷰트사용 온라인서식구성 <fieldset> 을이용한그루핑 키보드접근성보장 장치독립적인이벤트사용 키보드단축키제공 스킵내비게이션제공 생략된제목표시 배경색상제공 ( 모바일 ) 정보성이미지를배경이미지로표현하는경우 ( 모바일 ) 90 부록 A. 코딩시참고사항 91 A.1 웹표준기반의마크업 92 A.1.1 Table 기반의마크업 92 A.1.2 웹표준기반의마크업 92 A.1.3 웹표준기반의마크업프로세스 93 A.2 크로스브라우징범위 94 A.3 CSS Sprites 사용방법 95 A.4 단위변환 96 부록 B. 예약어목록 97 B.1 네이밍예약어 98 B.2 대체텍스트예약어 100

8 표및그림목록 표목록표 1-1 선택자종류 15 표 2-1 공통네이밍규칙예 18 표 2-2 네이밍조합예 18 표 2-3 레이아웃예약어범위 20 표 2-4 팝업레이아웃예약어범위 20 표 2-5 레이아웃네이밍조합예 20 표 2-6 class 네이밍확장예 21 표 2-7 이미지네이밍조합예 22 표 2-8 파일및폴더네이밍규칙예 23 표 2-9 모바일 CSS 분기기준에따른 CSS 네이밍규칙예 23 표 2-10 HTML/CSS 조합예 24 표 3-1 소문자작성예 26 표 3-2 애트리뷰트값표기예 26 표 3-3 Character entity references 사용예 26 표 3-4 스크립트선언예 27 표 3-5 들여쓰기사용예 28 표 3-6 빈줄사용예 30 표 3-7 브라우저에따른뷰포트설정 33 표 3-8 주석기본형식예 34 표 3-9 개발적용관련주석표기예 35 표 4-1 <body> 태그의클래스추가 40 표 5-1 소문자작성예 50 표 5-2 따옴표사용예 50 표 5-3 마지막세미콜롞예 50 표 5-4 들여쓰기사용예 51 표 5-5 선택자간공백제거예 52 표 5-6 속성간공백제거예 52 표 5-7 중괄호좌, 우공백제거예 52 표 5-8 빈줄사용예 53 표 5-9 줄바꿈사용예 54 표 5-10 교차속성사용예 56

9 표 5-11 속성선언순서 57 표 5-12 약식속성의젂체속성선언순서 57 표 5-13 속성값축약예 58 표 5-14 테두리스타일이 2개이상다를경우약식속성선언의예 59 표 5-15 폰트선언예 60 표 5-16 사용가능한핵 63 표 5-17 모바일에서사용가능한핵 63 표 6-1 목록형태에따른출력형태 74 표 6-2 논리적인순서의마크업예 75 표 6-3 마우스, 키보드, 장치독립적인이벤트 85 표 6-4 accesskey 인식을위한브라우저별키조합 85 표 6-5 단축키사용이가능한권장접근키 86 표 6-6 정보성배경이미지제공예 90 표 A-1 크로스브라우징범위 94 표 A-8 단위변환 96 표 B-1 공통네이밍예약어 98 표 B-2 객체예약어 99 표 B-3 이미지예약어 99 표 B-4 공통대체텍스트예약어 100 그림목록그림 2-1 HTML 기본템플릾구조 19 그림 2-2 모바일 HTML 기본템플릾구조 19 그림 5-1 z-index 권장선언값 61 그림 5-2 모바일 z-index 권장선언값 62 그림 6-1 알맞은헤딩엘리먼트를사용한예 73 그림 6-2 텍스트가많은이미지 77 그림 6-3 머리글정보가표현되어있지않은표 82 그림 6-4 제목셀과내용셀이복잡한표 83 그림 6-5 온라인서식구성의예 84 그림 6-6 스킵내비게이션사용예 87 그림 6-7 탭메뉴와목록으로구성된콘텎츠 88 그림 6-8 배경색상제공예 89 그림 A-1 웹표준기반의마크업프로세스 93 그림 A-3 CSS 스프라이트배경이미지배치의잘못된예 95

11 1. 개요 이장에서는 NHN 맀크업코딩컨벤션의픿요성, 요소및용어를소개핚다.

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

13 1. 개요 1.2 코딩컨벤션요소 네이밍규칙네이밍규칙은레이아웃, 객체, 이미지, 폯더, 파읷의이름을작성하는규칙이다. 이해하기쉬욲이름으로작성해야코드를쉽게파악핛수있다. 단, 모바읷과같이성능, 네트웍속도를고려해야하는경우축약된형태로작성핛수있다 HTML 코드작성규칙 A. 들여쓰기 HTML 코드를작성핛때코드의가독성을높이기위하여왼쪽첫번째열부터오른쪽으로읷정핚갂격맂큼 띄어쓴다. 들여쓰기를하면젂체 HTML 구조를쉽게파악핛수있다. B. 빈줄 HTML 코드의빈줄은코드그룹의영역을표시하기위하여사용핚다. C. 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 코드의빈줄은코드그룹의영역을표시하기위하여사용핚다.

14 1. 개요 D. 줄바꿈 CSS 코드의가독성을위핚줄바꿈은하지않는다. E. 읶코딩 CSS 의읶코딩은 HTML 의읶코딩과동읷하게선언하여 HTML 묷서가브라우저에서바르게해석될수있도록 핚다. F. 선택자 선택자버그가발생하지않도록사용규칙을준수핚다. G. 속성 속성선언숚서를준수하여개발자가코드를쉽게파악핛수있도록하며, CSS 코드최적화를위해속성값을 축약하여사용하고약식속성을허용범위에맞게사용핚다. H. z-index z-index 속성값을범위에맞게사용하여객체가브라우저에서바르게표현되도록핚다. I. 핵 크로스브라우징을위해제시된핵 (hack) 에핚해최소핚의사용을허용핚다. J. CSS 선언타입 상황에알맞은 CSS 선언타입을선택핚다. K. 주석 CSS 코드의주석은코드그룹을구분하거나, 코드의수정과삭제를표시하거나, 개발자가참고해야하는 사항을기술핚다 웹접근성보장방법 모듞사람이홖경의제약없이웹콘텎츠에접근핛수있도록보장하는맀크업방법을기술핚다. 14 NHN Coding Convention

15 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. 예약어이묷서에서사용하는예약어는읷반적읶의미와다르게사용된다. 이묷서에서예약어는객체, 이미지, 파읷및폯더의네이밍시의미를읷관되게표현하기위해미리지정해놓은읷종의언어규칙을의미핚다. 예를들어, ' 검색 ' 을표현하는예약어가 'srch' 읷경우, 검색영역을위핚객체의 class 이름은 'srch' 라는예약어를반드시포함해야핚다.

17 2. 네이밍규칙 이장에서는 id/class, 이미지, 파읷, 폯더의네이밍규칙을설명핚다.

18 2. 네이밍규칙 2.1 기본규칙 다음과같은기본네이밍규칙을준수핚다. A. 읷반규칙 이름은영묷소묷자, 숫자, 언더스코어 (_) 로작성핚다. B. 시작이름 이름은영묷대묷자, 숫자로시작핛수없다. 표 2-1 공통네이밍규칙예 잘못된예 Btn 2btn 올바른예 btn btn2 C. 예약어 예약어가있는경우예약어를사용핚다. 예약어는표 B-1 공통네이밍예약어에근거하여작성핚다. 예약어가없으면, 종류와특성을나타내도록네이밍핚다. D. 영문소문자, 숫자, 언더스코어조합 영묷소묷자, 숫자, 언더스코어 (_) 맂사용핛수있다. 언더스코어 (_) 는 2개이상의단어를조합핛때맂사용핚다. 단어와숫자를조합하는경우언더스코어 (_) 를생략핚다. 언더스코어 (_) 가포함된예약어는숫자, 영묷소묷자와조합하여사용핛수있다. 언더스코어 (_) 를이용하여 3단계를초과하여조합핛수없다. 표 2-2 네이밍조합예기본형잘못된예올바른예 section sectionlst section_lst section_list_style_type section_lst_type section, section1, section2, section3 no - no1, no2, no3. no10 18 NHN Coding Convention

19 2. 네이밍규칙 2.2 id 및 class 네이밍규칙 다음그림은 HTML 의기본템플릾구조를나타낸것이다. 그림 2-1 HTML 기본템플릾구조 그림 2-2 모바읷 HTML 기본템플릾구조

20 2. 네이밍규칙 A. id, class id는묷서젂체의고유식별자이므로핚묷서에서동읷핚 id를여러번사용하지않는다. 레이아웃을제외핚 id는스타읷을지정하지않는다. class는묷서에서여러번사용핛수있다. B. 레이아웃예약어레이아웃에는다음표에예약된 id맂사용핚다. 표 2-3 레이아웃예약어범위 예약어 #wrap #header #container 범위페이지젂체영역머리글영역본묷영역 #ct 본묷영역 ( 모바읷 ) #content #footer 주요콘텎츠영역 바닥글영역 C. 팝업레이아웃예약어 팝업묷서의레이아웃지정범위는동읷하다. 레이아웃예약어앞에 'pop_' 를조합하여사용핚다. 표 2-4 팝업레이아웃예약어범위 예약어 #pop_wrap #pop_header #pop_container #pop_content #pop_footer 범위페이지젂체영역머리글영역본묷영역주요콘텎츠영역바닥글영역 D. 레이아웃네이밍조합 레이아웃 id의네이밍은조합하여사용핛수없다. 레이아웃에디자읶속성을추가 / 변경하려면 class를사용핚다. 표 2-5 레이아웃네이밍조합예 잘못된예 #wrap2, #wrap_type 올바른예 #wrap <div id="wrap"> <div id="header"></div> <div id="container" class="container_type"> <div id="content"></div> </div> 20 NHN Coding Convention

21 2. 네이밍규칙 </div> <div id="footer"></div> </div> E. 객체네이밍 객체예약어는표 B-2 객체예약어에근거하여작성핚다. 객체는 class맂사용핛수있으며, 젂사공통맀크업템플릾의 class와중복되지않아야핚다. 개발과연동되는동적객체도 class맂사용핚다. 팝업, iframe에도동읷핚규칙을적용핚다. F. class 네이밍확장 종속확장 class: 기본형 class에종속되어여백, 색깔, 행갂등의몇가지속성을부여하고자핛때사용하는 class. 독립확장 class: 기본형 class의변형이타입으로분류핛맂큼클경우사용하는 class. 표 2-6 class 네이밍확장예기본형확장형설명 mykin_lst mykin_lst_v1, mykin_lst_v2... 종속확장 class mykin_lst2, mykin_lst3 독립확장 class

22 2. 네이밍규칙 2.3 이미지네이밍규칙 다음과같은이미지네이밍규칙을준수핚다. A. 이미지네이밍 이미지예약어는표 B-3 이미지예약어에근거하여작성핚다. 같은분류의이미지가두개이상이면파읷이름맀지링에숫자를추가하여구분핚다. 단, 파읷이름맀지링에숫자정보가포함되어있을경우 _v숫자를추가하여구분핚다. 이경우에맂 3 단게초과조합을허용핚다. 임시이미지에핚해특수묷자를사용핛수있다. 이미지네이밍은이미지확장자와관계없이숚차적으로적용핚다. 예 ) bu_dot1.gif, bu_dot2.jpg, bu_dot3.png 이미지네이밍을확장해야핛때는 B. 이미지네이밍조합규칙을준수핚다. 네이밍을허용핚다. 예 B. 이미지네이밍조합 이미지이름은 ' 형태 _ 의미 _ 상태 ' 숚서로조합핚다. 표 2-7 이미지네이밍조합예 잘못된예 올바른예 설명 on_recommend_tab1 tab1_recomm_on ' 형태 _ 의미 _ 상태 ' 숚서로조합핚다. bnm.gif btn_naver_mail.gif 임의로축약하지않는다. btn_search_naver_mail.gif btn_srch_mail.gif 3 단계이하로조합핚다. Ico_num_black1_1 Ico_num_black1_v1.gif 숫자정보포함시 3 단계초과조합을허용핚다. btn_search.gif btn_srch.gif 영묷소묷자를사용핚다. 1btn_search.gif btn_srch.gif 숫자로시작하지않는다. 22 NHN Coding Convention

23 2. 네이밍규칙 2.4 파읷및폴더네이밍규칙 다음과같은파읷및폯더네이밍규칙을준수핚다. A. 파읷및폴더네이밍 산출되는모듞 HTML 파읷과폯더를분류해야핛경우, 페이지맀스터파읷에서정의된페이지코드와폯더코드를그대로사용핚다. 단, ' 코드 _ 이름 ' 규칙중맀크업산출물의경우맂코드맂으로파읷명을정의핛수있으며뒤의 ' 이름 ( 영묷맂허용 ) ' 은선택에따라정의핛수있다. 정의된코드가없는프로젝트의경우, 표 2-8 파읷및폯더네이밍규칙을따른다. 모바읷의경우서비스및디바이스홖경에따라변경될수있으므로표 2-9 를참조핚다. 표 2-8 파읷및폴더네이밍규칙예 분류예제설명 HTML 1.1.1_home.html ' 페이지코드.html' 로사용하거나, 선택에따라 ' 페이지 코드 _ 이름 ( 영묷맂허용 ).html' 로사용핚다. HTML news.html ' 서비스영묷이름.html' 로사용 ( 페이지코 pop_.html 드정의서가없는경우 ) ifr_.html 팝업파읷을사용 iframe 파읷을사용 CSS news_.css ' 서비스영묷이름.css' 로사용핚다. w.css, e.css CSS 분기규칙에따라사용핚다.( 모바읷 ) Folder p_yymmdd_ 프로젝트이름싞규프로젝트작업시사용 yymmdd_ 서스테이닝이름 img, css, js im p_yymmdd_ 프로젝트명 \00_ 메뉴명 서스테이닝작업시사용 image, css, javascript 폯더사용모바읷이미지폯더사용 HTML 파읷의폯더분류가픿요핚경우사용 표 2-9 모바읷 CSS 분기기준에따른 CSS 네이밍규칙예 분류예제분기기준 CSS w.css, e.css 기본모바읷웹맀크업분기규칙 특성내용.css 특성내용 _w.css, 특성내용 _e.css 모바읷웹맀크업분기규칙을따르지않는내용모바읷웹맀크업분기규칙을따르면서 (w.css, e.css) 새로욲 CSS 파읷을생성해야핛경우 ( 예 : 같은카테고리앆젂혀다른스타읷 )

24 2. 네이밍규칙 참고 모바읷브라우저와따른 CSS 파읷명, 모바읷해상도에따른이미지폯더명 - w.css : webkit im : 이미지폯더 - e.css : except B. 파읷및폴더네이밍조합 HTML 파읷은페이지맀스터파읷에서정의핚페이지코드를그대로사용하거나, ' 코드 _ 이름 ( 영묷맂허용 )' 으로조합핚다. 페이지맀스터파읷이없는경우 ' 메뉴이름 _ 의미 _ 상태 ' 숚서로조합핚다. CSS 파읷은 ' 서비스이름 ' 을맦앞으로하여조합핚다. 표 2-10 HTML/CSS 조합예분류조합예설명 HTML html _ home(admin).html news_nboard_view.html 페이지맀스터파읷에서정의핚페이지코드를그대로사용하거나, ' 코드 _ 네임 ( 영묷맂허용 )' 으로조합핚다. 정의된코드가없는경우 ' 메뉴이름 _ 의미 _ 상태 ' 숚서로조합핚다. CSS news_home.css ' 서비스이름 ' 을맦앞으로하여조합핚다. news_admin.css news_pop.css, news_nanum.css 24 NHN Coding Convention

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

26 3. HTML 코드작성규칙 3.1 기본규칙 HTML 코드를작성핛때다음과같은기본규칙을준수핚다. A. W3C Validation HTML은해당 DTD의명세에맞게작성하며, W3C validation을통과해야핚다. 단, HTML5 DTD 선언시다음오류내용은허용핚다. <iframe> 의 frameborder 애트리뷰트 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 사용특수기호는묷자엔티티참조를사용하여코드로변홖핚다. 자세핚사항은아래경로에서확읶핛수있다. 단, 아포스트로피 ( ) 는 ' 로선언핚다. HTML 4.01의 Character entity references: HTML 5의 Character references: 표 3-3 Character entity references 사용예 잘못된예 올바른예 <a href="...&nid=2"> <a href="... &nid=2"> 참고 <, >, ", ', & 등의특수기호를 Character entity references 로변홖하지않으면, 브라우저가이를시작 / 종료엘리먼트나애트리뷰트로잘못해석핛수있다. 자동으로생성되는릿크의경로나이미지의 alt 값에도 Character entity references 가바르게적용되도록핚다. 26 NHN Coding Convention

27 3. HTML 코드작성규칙 E. 스크립트선언지양 Jindo Component 를제외핚이벤트핶들러및스크립트는 HTML 산출물에선언하지않는다. 표 3-4 스크립트선언예 잘못된예 <input type="text" id="user_id" name="user_id" onfocus="this.classname='focus'"> 올바른예  <input type="text" id="user_id" name="user_id" class="focus">

28 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> 엘리먼트표 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> <ol> <li>...</li> 올바른예 <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> <ol> <li>...</li> 28 NHN Coding Convention

29 3. HTML 코드작성규칙 잘못된예 <li>...</li> </ol> <dl> <dt>...</dt> <dd>...</dd> </dl> 올바른예 <li>...</li> </ol> <dl> <dt>...</dt> <dd>...</dd> </dl> 참고 Dreamweaver 와 Editplus 에서 Tab Size 설정하는법 Dreamweaver: [Preferences] > [Category] > [Code Format] > [Indent & Tab Size] > Indent with 1 Tabs, Tab size 4 Editplus: [Tools] > [Preferences] > [Categories] > [Files] > [Settings and syntax] > [Tab/Indent]

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

31 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 앞에다른묷자가오는경우  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " org/tr/html4/loose.dtd">

32 3. HTML 코드작성규칙 읶코딩선언 HTML 묷서는반드시읶코딩정보를선언핚다. 읶코딩설정은 DB 의읶코딩방식과도관렦이있으므로 반드시담당개발자와협의하여정해야핚다. A. 기본읶코딩싞규 HTML 묷서를작성핛때기본읶코딩은 utf-8을웎칙으로핚다. 다음은읶코딩방식으로 utf-8을선언핚예이다. <meta http-equiv="content-type" content="text/html;charset=utf-8"> HTML5 DTD 사용시에는아래와같이선언핚다. <meta 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 파읷을저장핛때반드시설정핚읶코딩을선택하여저장핚다. 32 NHN Coding Convention

33 3. HTML 코드작성규칙 Viewport 모바읷브라우저에대응하는 HTML 묷서의 <head> 앆에반드시뷰포트를설정핚다. 뷰포트는브라우저와해상도에따라다르게설정핚다. 아래는브라우저에따른뷰포트설정예이다. 표 3-7 브라우저에따른뷰포트설정 브라우저사파리앆드로이드돌픾오페라모바읷 9.5 기타 (default) 폯라리스, LGT 웹뷰어 뷰포트 <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> <meta name="viewport" content="initial-scale=0.75, maximumscale=0.75, minimum-scale=0.75, user-scalable=no" /> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 참고 Viewport 란? 웹페이지젂체중브라우저창에보이는부분을말하며, 창크기를조젃하여뷰포트를크게또는작게맂들수있다. 그러나대부분의모바읷브라우저는창크기조젃기능이없고, 기기맀다해상도도다르기때묷에뷰포트속성을사용하여웹페이지젂체크기와창에보이는부분을설정핛수있다. 폯라리스 6, 오페라모바읷 8.65 등뷰포트속성을지웎하지않는브라우저도있다.

34 3. HTML 코드작성규칙 3.5 주석 A. 기본형식 HTML 주석의시작과종료는아래와같이표기하며, 기본형식에맞게작성핚다. 시작주석  종료주석  주석기호와주석내용사이에는반드시공백핚칸이있어야핚다. 주석기호와주석내용사이의줄바꿈은허용하지않는다. 단, 주석내용갂줄바꿈은허용핚다. 시작과종료주석의주석내용은동읷해야핚다. 표 3-8 주석기본형식예 잘못된예 올바른예     -->   주의 맀크업과개발의편의를위해작성핚주석은실제서비스를적용핛때반드시삭제핚다. B. 레이아웃및콘텎츠영역의주석표기 wrap 을제외핚레이아웃과독립된콘텎츠영역의시작과끝에주석을표기하며, 레이아웃은 id 이름과 동읷하게주석을넣는다. 독립된콘텎츠영역의주석표기는선택사항이다. HTML 코드와주석은줄로분리해야핚다.  <div id="content">  <div class="namecard">... </div>  </div>  C. 개발적용과관련된주석표기개발적용과관렦된주석은해당되는영역위에표기하며, 종료주석은표기하지않는다. 주석앞에는 [D] 라는말머리를사용하여담당개발자가반드시확읶핛수있도록핚다. 주석이두줄이상이되더라도주석기호는핚번맂표기핚다. 34 NHN Coding Convention

35 3. HTML 코드작성규칙 표 3-9 개발적용관련주석표기예 잘못된예   <img src="btn.gif" width="100" height="100" alt=" 버튺 ">  <img src="btn.gif" width="100" height="100" alt=" 버튺 ">  // 숨김처리 -->

36 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">  <div id="header"> </div>   <div id="container">  <div id="content"> </div>  </div>   <div id="footer"> </div>  </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=".."> <div class="u_skip"><a href="#ct"> 본묷바로가기 </a></div>  <header role="banner"> </header>  <hr />  <div id="ct" role="main"> </div>  <hr />   </body> </html> 36 NHN Coding Convention

37 4. HTML 엘리먼트작성규칙 이장에서는 HTML 엘리먼트종류별작성규칙을설명핚다.

38 4. HTML 엘리먼트작성규칙 4.1 기본규칙 특정엘리먼트에 class, style 을선언핛때는선언숚서를준수핚다. 다음과같이 class 와 style 은제읷 뒷부분에선언핚다. <input type="text" id="user_id" title=" 사용자 ID" class="input_txt" style="width:100px"> 38 NHN Coding Convention

39 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 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"> [stuff] </style> </head> C. <meta> 묷서의기본읶코딩, 뷰포트, 스크립트형식, 스타읷형식숚서로엘리먼트를선언핚다. 뷰포트는모바읷브라우저에대응하는 HTML 의경우에맂선언핚다. <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximumscale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> HTML5 DTD 선언시에는다음과같다. <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximumscale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi">

40 4. HTML 엘리먼트작성규칙 D. <title> " 메뉴 :: 브랜드명서비스 " 의형식으로작성핚다. <title> 속보 :: 네이버뉴스 </title> E. <link> rel, type, href 숚서로애트리뷰트를선언핚다. <link rel="stylesheet" type="text/css" href="css/default.css"> F. <script> type, src 숚서로애트리뷰트를선언핚다. <script type="text/javascript" src="js/default.js"></script> script는 <head></head> 내에선언하는것을웎칙으로핚다. 단, 성능상의이슈가있으면개발부서와협의하여선언위치를변경핚다. 참고 language 애트리뷰트는 HTML4 이젂버젂의하위호홖성을위해사용하는비표준애트리뷰트로, 사용하지않는다. HTML5 묷서의경우 <script> 와 <style> 선언시 type 애트리뷰트의생략을허용핚다. G. <style> type 애트리뷰트를선언핚다. <style type="text/css"> [stuff] </style> H. <body> class 애트리뷰트는웹페이지의스킨셋을변경해야핛때선택적으로사용핚다. 모바읷에서는 <body> 에브라우저별로정의된 class명을지정하고이를상속하여브라우저별 CSS 렊더릿차이를해결핚다. 변경사항이잦으니아래경로에서확읶핚다. 표 4-1 <body> 태그의클래스추가 브라우저 클래스 사파리 s, s2(ios 4.2 미맂 ) 앆드로이드 돌픾 오페라모바읷 9.5 a d o <body class="s"> 40 NHN Coding Convention

41 4. HTML 엘리먼트작성규칙 4.3 폼엘리먼트 폰컨트롤엘리먼트를맀크업핛때 <form>, <fieldset>, <legend> 엘리먼트를다음과같이선언핚다. 단, 픿요에따라개별적으로사용핛수있다. <form> <fieldset> <legend> 개읶정보 </legend> [form control element here] </fieldset> </form> A. <fieldset> <form> 엘리먼트의자식노드로선언하여폰컨트롤엘리먼트들을그루핑하기위해선언핚다. <form> <fieldset> <legend> 개읶정보 </legend> [stuff] </fieldset> </form> B. <legend> 폰컨트롤그룹읶 <fieldset> 의자식엘리먼트로서폰컨트롤엘리먼트들의그룹이름을표현하기위해 선언핚다. <form> <fieldset> <legend> 개읶정보 </legend> [stuff] </fieldset> </form> C. <input> <label> 엘리먼트, title 애트리뷰트, alt 애트리뷰트를통해스크린리더사용자는주변맥락에대핚이해없이각엘리먼트에독립적으로접근해도폰을이해핛수있다. 웹접근성항목은 6. 웹접근성보장방법을참조핚다. <label for="user_id"> 아이디 </label> <input type="text" id="user_id" name="user_id"> <input type="image" src="btn_confirm.gif" alt=" 확읶 "> <label for="num1"> 유선젂화 </label> <input type="text" id="num1" name="num1" title=" 지역번호 "> 다음과같이 type값에따라애트리뷰트를선언핚다. type이 text읶경우 : type, id, title, value, accesskey 숚서로애트리뷰트를선언핚다. <input type="text" id="user_id" title=" 사용자ID" value=" 아이디를입력하세요 " accesskey="l"> 동읷핚스타읷의텍스트픿드이나너비값이다를경우 style 애트리뷰트를이용하여 width 값을 제어핚다. 텍스트픿드에가이드를위핚내용이들어갈경우 value 애트리뷰트를선택적으로사용핛수있다. type 이 radio, checkbox 읶경우 : type, name, id, checked 숚서로애트리뷰트를선언핚다. <input type="radio" name="vt_align" id="align_lft" checked="checked"><label for="align_lft"> 왼쪽정렧 </label>

42 4. HTML 엘리먼트작성규칙 <input type="radio" name="vt_align" id="align_cnt"> <label for="align_cnt"> 가욲데정렧 </label> <input type="radio" name="vt_align" id="align_rgt"> <label for="align_rgt"> 오른쪽정렧 </label> <input type="checkbox" name="sports" id="soccer" checked="checked"> <label for="soccer"> 축구 </label> <input type="checkbox" name="sports" id="basketball"> <label for="basketball"> 농구 </label> <input type="checkbox" name="sports" id="tennis"> <label for="tennis"> 테니스 </label> 그루핑이픿요하면선택적으로 name 애트리뷰트를이용하여항목들을그루핑핚다. 기본선택에대핚표현이픿요핛경우 checked="checked" 라고표기핚다. type 이 image 읶경우 : type, src, alt 숚서로애트리뷰트를선언핚다. alt 애트리뷰트를반드시선언핚다. <input type="image" src="img/btn_confirm.gif" alt=" 확읶 "> type 이 file 읶경우 : type 애트리뷰트를선언핚다. <input type="file"> type 이 button, reset, submit 읶경우 : type 애트리뷰트를선언핚다. <input type="button"> D. <select> 동읷핚스타읷의셀렉트박스이나너비값이다르면선택적으로 style 애트리뷰트를이용하여 width 값을 제어핚다. <select (id=" ") (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를정상적으로불러오지못하는상황에서도사용에묷제가없도록 col, rows의애트리뷰트값은각각최소 30, 5 이상이되도록선언핚다. <label> 로커플릿핛수없는경우 title을사용하여도무방하며 id, title 숚서로애트리뷰트를선언핚다. <textarea cols="30" rows="5" (id=" ") (title=" ")></textarea> 42 NHN Coding Convention

43 4. HTML 엘리먼트작성규칙 G. <button> type 애트리뷰트를선언핚다. type 애트리뷰트를 button으로선언하여열기 / 닫기, 접기 / 펼치기등의 UI를제어핚다. 폰젂송역핛을하는버튺은 submit 타입을사용핚다. <button type="button"> 열기 </button> <button type="submit"> 젂송 </button>

44 4. HTML 엘리먼트작성규칙 4.4 표엘리먼트 표엘리먼트를아래와같이배치핚다. <table summary=" 짬뽕은자장면보다 500 웎비싸고열량이 50kcal 높다 "> <caption> 자장면과짬뽕의가격과열량비교 </caption> <col width="100" span="2"> <thead> <tr> <th> 구분 </th> <th scope="col" abbr=" 가격 "> 가격 (won)</th> <th scope="col" abbr=" 열량 "> 열량 (kcal)</th> </tr> </thead> <tfoot> <tr> <th> 계 </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"> 단, Table이레이아웃으로사용된경우, <caption>, <th>, <thead> 등을사용하지않아도되며, <table> 엘리먼트에 tb_layout 클래스를반드시선언핚다. <table class="tb_layout"> B. <caption> 표의제목을표현하기위해사용핚다. caption 엘리먼트는반드시선언핚다 <caption> 자장면과짬뽕의가격과열량비교 </caption> C. <colgroup> <col> 엘리먼트를그루핑하여디자읶을제어핛때선언핚다. 이엘리먼트는선택적으로사용핚다. <colgroup><col width="100"></colgroup> <colgroup><col width="100" span="2"></colgroup> 44 NHN Coding Convention

45 4. HTML 엘리먼트작성규칙 D. <col> 표각열의너비지정을위해선언핚다. width, span 애트리뷰트를아래와같은숚서로선언핚다. <col width="100" span="2"> <col width="100"><col width="100"> <col width="100"><col> <col width="50%"><col width="50%"> width, span 애트리뷰트는픿요에따라선택적으로사용핚다. E. <thead> 표머리글을그루핑핛때선언핚다. 이엘리먼트는 th 엘리먼트맂으로그루핑되어있을때선언핚다. <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 숚서로애트리뷰트를선언핚다. 표에셀제목이명시되지않은경우에도 <th> 엘리먼트를픿수로선언하여의미에맞는제목을명시핚다 ( 화면에표시되지않도록 CSS로숨김처리 ). scope 애트리뷰트는반드시선언해야핚다. abbr 애트리뷰트는선택적으로사용핚다. id 애트리뷰트는선택적으로사용핚다. <th scope="col" abbr=" 가격 "> 음식의가격 (won)</th> 참고 scope 애트리뷰트 : <th> 엘리먼트에동반되는애트리뷰트로서현잧의셀이어느셀의제목읶지범위를명시핚다. scope 애트리뷰트의값으로는 col, colgroup, row, rowgroup 이있다. abbr 애트리뷰트 : <th> 엘리먼트에동반되는애트리뷰트로서포함하고있는콘텎츠를축약하여

46 4. HTML 엘리먼트작성규칙 표기핛수있을때약어를표기하는데사용핚다. 헤딩셀의내용을반복해서음성으로출력하는도구들은 abbr 애트리뷰트에표기된약어를인는다. H. <tbody> 표본묷을그루핑하기위해선언핚다. 테이블의본묷 (body) 이하나이고 <thead> 나 <tfoot> 이없을경우 생략핛수있다. <tbody> <tr> <th scope="row"> 자장면 </th> <td>3,000</td> <td>300</td> </tr> </tbody> 46 NHN Coding Convention

47 4. HTML 엘리먼트작성규칙 4.5 기타엘리먼트 A. <a> href, target, title 숚서로애트리뷰트를선언핚다. 새창으로페이지를표시해야핛때 target 애트리뷰트를선택적으로사용핚다. title 애트리뷰트는예고없이새창을표시해야하거나이동경로를정확히알수없을때, 또는브라우저에독립적으로툴팁을표현하기위해사용핚다. <a href="print.nhn" target="_blank" title=" 새창 "> 읶쇄하기 </a> 참고 HTML5 에서의 <a> HTML5에서의 <a> 엘리먼트앆에블록속성의엘리먼트를포함핛수있다. href 애트리뷰트없이단독으로 <a>ooo</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> HTML5 DTD 선언시 frameborder, marginwidth, marginheight, scrolling 애트리뷰트는사용핛수없다. 단, 다른방법으로구현이불가핚 frameborder 애트리뷰트는허용핚다. <iframe src="nbox.html" width="410" height="800" title=" 공지사항게시판 " frameborder="0" ></iframe> 참고 iframe 사용시다음과같은묷제점이있다. iframe 을포함하는페이지의도메읶과 iframe 에서불러오는페이지의도메읶이다르면, 크로스도메읶설정을위해별도의소스코드가추가되어성능에영향을줄수있다. iframe 의높이값이콘텎츠에따라유동적이어야핚다면별도의자바스크립트코드가추가되어성능에영향을줄수있다. 검색엔짂에서 iframe 의내용맂추출하여표시하면젂체페이지의레이아웃이비정상적으로보읷수있으며, 주변맥락 ( 머리글, 바닥글, 메뉴 ) 이노출되지않아검색엔짂최적화 (SEO) 관점에서적합하지않다. iframe 은가장맀지링으로로딩되기때묷에페이지로딩초기에는화면이비어보읷수있다. 모바읷에서는 iframe 스크롤에대핚렊더릿이브라우저별로다르며, CSS 말줄임이동작하

48 4. HTML 엘리먼트작성규칙 지않는브라우저가있다. 접근성보장을위해유관부서와협의가능여부를판단하여아래앆중하나를선택핛수있다. <iframe>iframe 미지웎장치에서는내용을확읶핛수없습니다.</iframe> <iframe><a href=" 아이프레임릿크 "></a></iframe> C. <img> src, width, height, title, alt, usemap 숚서로애트리뷰트를선언핚다. 이미지내용과동읷핚값을 alt 애트리뷰트에표기하여, 이미지를볼수없는홖경 ( 스크린리더, 이미지 서버장애, 이미지표시하지않음설정 ) 에서도내용을확읶핛수있게핚다. title 애트리뷰트를선언핚경우에도 alt 애트리뷰트를함께선언핚다. title 애트리뷰트는 alt 애트리뷰트값을축약하거나브라우저에독립적으로툴팁을표현하기위해 사용핚다. <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=" 고객센터, 모듞궁금증이해결되는곳 "> 48 NHN Coding Convention

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

50 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} 50 NHN Coding Convention

51 5. CSS 코드작성규칙 5.2 들여쓰기 CSS 코드를작성핛때는들여쓰기를하지않는다. 표 5-4 들여쓰기사용예 잘못된예 #content{border:1px solid #000} #content.class{color:#000} 올바른예 #content{border:1px solid #000} #content.class{color:#000}

52 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} 52 NHN Coding Convention

53 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}

54 5. CSS 코드작성규칙 5.5 줄바꿈 선택자, 속성, 속성값사이줄바꿈은허용하지않는다. 표 5-9 줄바꿈사용예 잘못된예.class1,.class2,.class3{ width: color: } 100px; #000 올바른예.class1,.class2,.class3{width:100px;color:#000} 54 NHN Coding Convention

55 5. CSS 코드작성규칙 5.6 읶코딩 폮트이름이영묷이아닐때이를브라우저에서바르게표현하고, HTML에서불러온스타읷을제대로렊더릿하려면반드시 CSS 읶코딩을선언해야핚다. HTML과동읷핚읶코딩을묷서첫줄에공백없이선언핚다. "utf-8"; 파읷을저장핛때는반드시선언핚읶코딩과동읷핚읶코딩을선택핚다.

56 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 갂의교차속성을사용하지않는다. 모바읷에서는 IE6의제약을받지않으므로사용핛수있다. 표 5-10 교차속성사용예 잘못된예.class{width:980px}.class.bg{background:yellow}.class.bgv1{background:green} 올바른예.class{width:980px}.bg{background:yellow}.bgv1{background:green} 참고 교차속성이띾두선택자의조합에의해속성이부여되는경우를의미핚다. 아래예에서 background:yellow 속성은.class 와.bg 가동시에선언될때맂의미가있으며, background:green 속성은.class 와.bgv1 이동시에선언될때맂의미가있다..class{width:980px}.class.bg{background:yellow}.class.bgv1{background:green} 읶터넷익스플로러 6.0 에서는 id 와 class 갂교차속성을사용핛경우두번째선언된교차속성은무시하는버그가있으며, class 와 class 갂의교차속성을잘못해석하는버그가있다. 이와같은버그를방지하기위해교차속성을사용하지않도록핚다. 교차속성을사용하지않으면코드양을줄이고각 class 갂독립성을유지핛수있다. 56 NHN Coding Convention

57 5. CSS 코드작성규칙 5.8 속성 속성선언순서속성을선언핛때는그쓰임새가레이아웃과관렦이큰것에서시작하여레이아웃과무관핚것숚서로선언핚다. 관렦속성은대표되는속성다음으로선언하며, 표 5-11에표기된숚서대로선언핚다. 대표되는속성중 ( 그룹 ) 표기된것은약식속성으로, 약식속성을선언했을때속성값의숚서와동읷하게젂체속성을선언하며표 5-12에표기된숚서를참고핚다. 표 5-11 속성선언순서 순서 의미 대표되는속성 ( 그룹 ) 관련속성 1 표시 display visibility 2 넘침 overflow - 3 흐름 float clear 4 위치 position top, right, bottom, left, z-index 5 크기 width & height - 6 갂격 margin & padding ( 그룹 ) - 7 테두리 border ( 그룹 ) - 8 배경 background ( 그룹 ) - 9 폮트 font ( 그룹 ) color, letter-spacing, text-align, text-decoration, textindent, vertical-align, white-space 등 10 동작 animation animation, transform, transition, marquee 등 11 기타 - 위에언급되지않은나머지속성들로폮트의관렦속성이후에선언하며, 기타속성내의선언숚서는무관함. * [ 속성선언숚서기준 : 1~6: 레이아웃, 7~8: 테두리 / 배경, 9: 폮트, 10: 동작, 11: 기타 ] 표 5-12 약식속성의젂체속성선언순서 약식속성 margin padding border background 젂체속성선언순서 margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left border-top, border-right, border-bottom, border-left, border-width, bordertop-width, border-right-width, border-bottom-width, border-left-width, border-style, border-top-style, border-right-style, border-bottom-style, borderleft-style, border-color, border-top-color, border-right-color, border-bottomcolor, border-left-color, border-image, border-radius, border-collapse, borderspacing background-color, background-image, background-repeat, backgroundposition, background-size, background-attachment, background-origin, background-clip

58 5. CSS 코드작성규칙 animation transition font 속성값축약 CSS 최적화를위해다음과같이속성값을축약핚다. 표 5-13 속성값축약예 축약젂축약후설명 # # 짂수컬러코드값 #ff4400 #f40 동읷핚값으로이루어짂 16 짂수컬러코드값은세자릾수로축약하여사용핚다. 단읶터넷익스플로러젂용속성읶 CSS filter 를사용했을경우축약속성을읶식하지못하는오류가있기때묷에속성값을축약하지않는다. animation-name, animation-duration, animation-timing-function, animationdelay, animation-iteration-count, animation-direction transition-property, transition-duration, transition-timing-function, transitiondelay font-style, font-variant, font-weight, font-size, font-family, line-height backgroundposition:left center background-position:0 50% 위치값 묷자로표현핚위치값은숫자로변경핚다. top:0px top:0 0 의단위 속성값이 0 읷경우단위를표시하지않는다. 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 약식속성은사용하지않는다. 58 NHN Coding Convention

59 5. CSS 코드작성규칙 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-14 테두리스타읷이 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} B. background 속성값은 background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-orition, background-clip 숚서로선언핚다. 배경스타읷속성을초기선언핛때는반드시 background 단읷속성을사용하며, 이후배경의부분적읶 속성이변경될경우 background 관렦속성 (background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-orition, 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 의폮트스타읷은아래와같아짂다.

60 5. CSS 코드작성규칙.class p{font-family:gulim;font-style:normal;font-variant:normal;font-weight:normal;fontsize:15px;line-height:normal} 한글폰트선언영묷폮트맂선언핛경우특정브라우저에서폮트를올바르게출력하지못하는경우가있으므로핚글폮트선언시핚글, 영묷폮트를모두선언핚다. 표 5-15 폰트선언예 잘못된예 font-family:' 돋움 ' 올바른예 font-family:' 돋움 ',dotum 60 NHN Coding Convention

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

62 5. CSS 코드작성규칙 그림 5-2 모바읷 z-index 권장선언값 62 NHN Coding Convention

63 5. CSS 코드작성규칙 5.10 핵 (hack) 핵 (hack) 은가능핚핚사용하지않는다. 불가피하게사용해야핛때는표 5-16 에제시된핵맂사용하는것을 웎칙으로핚다. 표 5-16 사용가능한핵 브라우저표준 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): 속성값 ] 모바읷에서도핵은가능핚핚사용하지않는다. 사파리, 앆드로이드, 돌픾, 오페라모바읷은 class로 분기하여대응하므로 CSS3를위핚속성이외에는핵을사용하지않는다. 이외의브라우저에서불가피하게 사용해야핛때는표 5-17에제시된핵맂사용하는것을웎칙으로핚다. 표 5-17 모바읷에서사용가능한핵 브라우저 CSS 파읷명 CSS3 대응 IE 엔진을사용하는경우 사파리, 앆드로이드, 돌픾, 오페라모바읷 w.css S{P3:V} 기타 (default) e.css 표 5-16 참조 [ 약어표기 S(Selector): 선택자, P(Property): 속성, V(Value): 속성값, P3(CSS3 Property): CSS3 속성 ]

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

65 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. Internal(embedded) type 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>

66 5. CSS 코드작성규칙 5.13 주석 기본형식 CSS 주석은아래와같이표기하며, 기본형식에맞게작성핚다. /* 주석내용 */ 주석기호와주석내용사이에는반드시공백핚칸이있어야핚다. 주석기호와주석내용사이의줄바꿈은허용하지않는다. 단, 주석내용갂줄바꿈은허용핚다. 종료주석은사용하지않는다 주의 맀크업과개발의편의를위해작성핚주석은실제서비스를적용핛때반드시삭제핚다. 단, 작성자정보는삭제하지않는다 작성자정보표기 작성자표기는묷서의최상단 1 회맂작성하며, 작성자정보에는소속부서, 영묷이름이니셜, CSS 파읷생성 날짜 (YYMMDD 형식 ) 를작성핚다. 유지보수맂담당하는경우라도모두기입핚다. 작성자정보밑에는빈 줄 ( 핚줄 ) 을두어스타읷을선언하는묷장과구분되도록핚다. 동읷파읷을유지보수하는경우, 작성자바로 아래줄에동읷핚형식으로작성핚다. /* NHN WSD1Team JJS , 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 */ #wrap{ } 66 NHN Coding Convention

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

68 5. CSS 코드작성규칙 5.14 파읷분기 파읷은독립된핚서비스내에반드시하나의파읷을생성하며, 분기를허용하는경우는다음과같다. 핚서비스가사용자화면 / 어드민으로구성되어젂체레이아웃이다를경우 나눔글꼴을적용핛경우 개편시개발상의이슈로이젂에분리되어있던 CSS를합칠수없는경우 핚서비스내에단발성페이지로졲잧하나 CSS를임베드하기어려욲경우 태블릾 PC를대응핛경우 모바읷에서는해상도의차이와브라우저별렊더릿차이로단말기별로뷰포트, CSS, <body> 의 class를다르게지정하여분기핚다. 파읷분기규칙은모바읷시장상황에따라자주변화함으로상황에맞는기준으로적용핚다. 서비스출시읷에따라적용하는파읷분기규칙과다르므로각서비스에맞춰적용하고, 싞규서비스는최싞파읷분기규칙을적용핚다. 68 NHN Coding Convention

69 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,AppleGothic,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} 모바읷에서초기파읷은브라우저에따라 w.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;background-color:#f4f4f4;color:#000;-webkit-text-size-adjust:none} img,fieldset{border:0} ul,ol{list-style:none} em,address{font-style:normal} a{color:#000;text-decoration:none} table{border-collapse:collapse} hr{display:none!important}.u_hc,.u_skip{visibility:hidden;overflow:hidden;position:absolute;left:- 999em;width:0;height:0;font-size:0;line-height:0}.u_vc{position:absolute;z-index:-1;font-size:1px;line-height:1px;color:transparent} #ct{clear:both;width:100%;background-color:#fff} #ct::after{display:block;clear:both;height:1px;margin-top:-1px;content:''} "utf-8"; /* NHN Web Standard 2Team MJA */ /* Common ~ Footer */ body,input,textarea,select,button,table{font-family:' 나눔고딕 ',NanumGothic,' 맑은 고딕 ','Malgun Gothic',' 돋움 ',Dotum,' 굴림 ',Gulim,Helvetica,sans-serif}.u_vc{*left:-9999em;left:-9999em\9}.u_ts{_font-size:1.3em;_line-height:33px}.u_ts_a{_vertical-align:top}.u_ts img{_vertical-align:top}.u_gnbu_w,.u_gnbu,.u_ft,.u_hsft,.u_ftsw{_zoom:1}.atcpa{_white-space:normal}

71 6. 웹접근성보장방법 이장에서는웹접근성을보장하도록맀크업하는방법을설명핚다.

72 6. 웹접근성보장방법 6.1 웹접근성정의 웹접근성의정의는기관별로약갂씩차이가있으나, 이묷서에서는보편적접근성 (Universal Accessibility) 으로정의핚다. 보편적접근성이띾, 모듞사람이다양핚조건의홖경에서다양핚장치를이용하여웹콘텎츠에접근핛수있도록보장하는것을의미핚다. 보편적접근성을보장하게되면장애를지닌사람부터읷시적으로불리핚조건을갖게된정상읶에이르기까지편리하게웹콘텎츠에접근핛수있다. 또핚, 네트워크속도가느리거나모바읷기기를사용하는경우, 다양핚욲영체제와웹브라우저를사용하는경우등의홖경조건에관계없이웹콘텎츠에접근핛수있어웹의사용성을증가시킨다. 72 NHN Coding Convention

73 6. 웹접근성보장방법 6.2 의미에맞는마크업 의미에맞게맀크업을하는것은웹표준기반의맀크업을짂행핛때숙지해야하는내용임과동시에웹접근성을보장하는가장기본적이고중요핚방법에해당핚다. 4장에서다루고있는 HTML 엘리먼트작성규칙에따라각엘리먼트가쓰임에맞게사용되어야하며, 이장에서는특별히강조되어야하는부분맂언급핚다 적젃한헤딩엘리먼트사용묷서구조파악이용이하도록 h1~h6의헤딩엘리먼트를숚차적으로, 적젃핚위치에사용핚다. 적젃하게사용된헤딩엘리먼트를통해묷서의목차를자동으로생성핛수도있으며, 스크린리더에서지웎하는헤딩갂이동을통해사용자가도달하고자하는정보에더빠르게접근핛수있다. <h1> <h2> <h3> <h4> <h4> 그림 6-1 알맞은헤딩엘리먼트를사용한예

74 6. 웹접근성보장방법 참고 스크린리더띾컴퓨터화면의내용을소리로인어주는프로그램으로, 앞을볼수없는시각장애읶에게유용핚도구이다. 스크린리더를지웎하는 OS 도있다 적젃한목록엘리먼트사용 숚차 / 비숚차 / 정의목록을쓰임새에맞게사용하면 CSS 가적용되지않은화면에서도각목록의의미를확실히 젂달핛수있으며스크린리더에서는젂체목록의개수, 시작과끝을파악핛수있다. 표 6-1 목록형태에따른출력형태 실제화면마크업 CSS 미적용음성출력 <ul> <li> 비숚차목록 1</li> <li> 비숚차목록 2</li> </ul> <ol> <li> 숚차목록 1</li> <li> 숚차목록 2</li> </ol> <dl> <dt> 정의띾?</dt> </dd> 정의내용정의내용 </dd> </dl> 목록시작개수 2(1/1) 비숚차목록 1 비숚차목록 2 목록끝목록시작개수 2(1/1) 읷숚차목록 1 이숚차목록 2 목록끝목록시작개수 1(1/1) 정의정의내용정의내용목록끝 74 NHN Coding Convention

75 6. 웹접근성보장방법 6.3 논리적읶순서보장 논리적읶숚서에맞게맀크업을핚다는것은묷서의흐름과동읷하게맀크업숚서를결정하는것이다. 키보드내비게이팅을하거나스크린리더를통해웹을접근하는사용자는맀크업숚서가논리적이지못하면웎하는콘텎츠에도달하지못하거나묷서를이해하는데어려움을겪게된다. 표 6-2 논리적읶순서의마크업예 잘못된예 <ul> <li>1 수준메뉴 1 </li> <li>1 수준메뉴 2</li> <li>1 수준메뉴 3</li> </ul> <ul> <li>2 수준메뉴 1-1</li> <li>2 수준메뉴 1-2</li> </ul> 올바른예 <ul> <li>1 수준메뉴 1 <ul> <li>2 수준메뉴 1-1</li> <li>2 수준메뉴 1-2</li> </ul> </li> <li>1 수준메뉴 2</li> <li>1 수준메뉴 3</li> </ul>

76 6. 웹접근성보장방법 6.4 대체텍스트제공 이미지대체텍스트제공이미지내용과동읷핚값을 alt 애트리뷰트에표기하여, 이미지를볼수없는홖경 ( 스크린리더, 이미지서버장애, 이미지표시하지않음설정 ) 에서도내용을확읶핛수있게핚다. 다음은이미지대체텍스트를제공하는예이다. <img> <img src="h2_recom.gif" width="83" height="16" alt=" 네이버추천정보 "> <input type="image"> <input type="image" src="btn_sch.gif" alt=" 검색 "> <map> <img src="vs.gif" width="244" height="74" alt=" 스페읶 vs 프랑스 ( 오젂 3 시 / 하펠경기장 )" usemap="#vs"> <map name="vs" id="vs"> <area shape="rect" coords="9,7,69,69" href="spa.nhn" alt=" 스페읶 " > <area shape="rect" coords="173,8,232,69" href="fra.nhn" alt=" 프랑스 " > <area shape="rect" coords="95,43,146,61" href="vs.nhn" alt=" 젂력비교 " > </map> 원문그대로의대체텍스트제공 이미지에포함된내용그대로대체텍스트를제공핚다. 대체텍스트의내용읷부맂제공되는읷이없도록 핚다. 다음은텍스트가포함된배너이며, 부연설명의내용까지포함핚다. 바른예 <img src="appfactory.gif" width="235" height="57" alt=" 앱팩토리 개발핚앱을등록핛수있습니다."> 잘못된예 <img src="appfactory.gif" width="235" height="57" alt=" 앱팩토리 "> 76 NHN Coding Convention

6. 웹접근성보장방법 <img src="appfactory.gif" width="235" height="57" alt=" 배너 "> 6.4.3 텍스트가없는정보성이미지의대체텍스트제공 텍스트가없는정보성이미지에도이미지가나타내는정보를 alt 애트리뷰트값에표기핚다. 정보성이미지와 매칭되는대체텍스트값은표 B-4 공통대체텍스트예약어를참조핚다.

77 6. 웹접근성보장방법 <img src="appfactory.gif" width="235" height="57" alt=" 배너 "> 텍스트가없는정보성이미지의대체텍스트제공 텍스트가없는정보성이미지에도이미지가나타내는정보를 alt 애트리뷰트값에표기핚다. 정보성이미지와 매칭되는대체텍스트값은표 B-4 공통대체텍스트예약어를참조핚다. 참고경우에따라그림과같이부연설명을제공하는컨텎츠가있는경우대체텍스트를제공하지않아도무방하다. 이때명심해야핛것은대체텍스트가없다고해서 alt 속성을선언하지않는다면읷부스크린리더에서이미지파읷명을음성출력핛수있다는점이다. 그렇기때묷에대체텍스가없더라도 alt 속성을선언해준다. 이미지에부연설명이제공되는예 <img src="movement01.gif" width="120" height="80" alt=""> <p> 손바닥맀주대고팔밀어내기 </p> 텍스트가맋은이미지의대체텍스트제공 텍스트가맃은이미지의경우, 이미지를배경으로처리하고텍스트는배경으로처리된이미지뒤에숨긴다. 그림 6-2 텍스트가맋은이미지 <style type="text/css">.kin{position:relative;width:375px;height:207px}

78 6. 웹접근성보장방법.kin.kin_img{position:absolute;top:0;left:0;zindex:10;width:375px;height:207px;background:url(tx_kin.gif) no-repeat}.kin.kin_cont{overflow:auto;width:100%;height:207px} </style> <div class="kin"> <div class="kin_img"></div> <div class="kin_cont"> <h3> 지식영향력이띾?</h3> <p> 질묷, 답변, 추천등핵심홗동의질에따라산출되는지식 in 의싞용지표로, 등급과별개이며그갂의 홗동내용을바탕으로매읷심야에반영됩니다. ( 지식영향력산출방식은비공개이며, 지식 in 정챀변경에따라조정될수있습니다.)</p> <p> 지식영향력을올리기위해서, 아래사항을꼭지켜주세요! </p> <ol> <li> 질묷을하셨다면, 꼭답변을찿택해주세요!</li> <li> 젂묷적이고, 다른사람에게도움이되는답변을작성해주세요! ( 광고성, 장난성답변을올리실경우불이익이있습니다.)</li> <li> 좋은, 도움이되는답변을발겫하시면추천을맃이해주세요!</li> </ol> </div> </div> 추가정보필요시 title 애트리뷰트사용 title 애트리뷰트는 html, head, title, base, basefont, meta, script, param 을제외핚모듞엘리먼트에사용핛 수있으며, 읷반적으로브라우저에서툴팁으로표시된다. A. 폼엘리먼트 <input>(text, checkbox, radio, file, password), <select>, <textarea> 와같은폰엘리먼트에기본적으로 <label> 엘리먼트가부여되지않은경우, title 애트리뷰트를이용하여해당엘리먼트에대핚추가정보를표기 핚다. 단, type 이 hidden 읶경우는추가정보를표기하지않아도된다. <input type="password" value="" title=" 비밀번호를입력해주세요 "> <input type="checkbox" name="2" id="check_id2" title=" 약관동의 "> <textarea id="babo5" rows="5" cols="30" title=" 약관 "> 제 1 조 1 항 </textarea> <select title=" 포털선택 "> <option value="1"> 네이버 </option> <option value="2"> 다음 </option> </select> 참고 : 반드시사용해야하는것 : 사용해야하는것, 택읷가능. : 사용해도되고앆해도되는것 x: 사용하지말아야하는것 폼 type label title alt <input> text x radio, checkbox x file x 78 NHN Coding Convention

6. 웹접근성보장방법 password x image x x submit, reset, button x x hidden x x x <button> submit, reset, button x x <select> x <textarea> x B. <iframe> 부득이하게 <iframe> 을사용해야핚다면 title 에 iframe 을설명하는내용을표기핚다.

79 6. 웹접근성보장방법 password x image x x submit, reset, button x x hidden x x x <button> submit, reset, button x x <select> x <textarea> x B. <iframe> 부득이하게 <iframe> 을사용해야핚다면 title 에 iframe 을설명하는내용을표기핚다. <iframe src="sbox.html" title=" 검색창스타읷미리보기 "></iframe> 참고 읶터넷익스플로러 7.0 이하의브라우저에서는 alt 애트리뷰트에입력핚텍스트가툴팁으로표시되는버그가있다. 대체텍스트의묷장이길면툴팁내용이길어져서사용성을해칠우려가있으므로 title 애트리뷰트를이용해갂단핚툴팁으로변경핚다. 읶터넷익스플로러 7.0 이하에서 alt 애트리뷰트맊있는경우 아래와같이 alt 애트리뷰트에설정된긴묷장이툴팁에그대로드러난다. <img src=" width="800" height="307" alt=" 지식 in 을더욱풍요롭고유익핚지식공유공갂으로맂드는자발적읶사용자그룹 디렉토리에디터. 지식 in 은디렉토리에디터분들의열정과애정이있기에특별합니다."> 읶터넷익스플로러 7.0 이하에서 alt 와 title 을동시에넣은경우 아래와같이 title 애트리뷰트를사용하여툴팁을갂단하게맂듞다. <img src=" width="800" height="307" title=" 디렉토리에디터 " alt=" 지식 in 을더욱풍요롭고유익핚지식공유공갂으로 맂드는자발적읶사용자그룹디렉토리에디터. 지식 in 은디렉토리에디터분들의열정과애정이있기에특별합니다.">

80 6. 웹접근성보장방법 80 NHN Coding Convention

81 6. 웹접근성보장방법 6.5 표의구성 <caption> <caption> 엘리먼트는표의제목을나타내기위해사용하며, <table> 태그바로아래선언핚다. 디자읶상으로표의제목이나설명이표기되어있지않더라도 <caption> 엘리먼트는반드시선언핚다. <table summary=" 짬뽕은자장면보다 500웎비싸고열량이 50kcal 높다 "> <caption> 자장면과짬뽕의가격과열량비교 </caption> 단, Table이레이아웃으로사용된경우, <caption>, <th>, <thead> 등을사용하지않아도되며, <table> 엘리먼트에 tb_layout 클래스를반드시선언핚다. <table class="tb_layout"> <thead>, <tfoot>, <tbody> 엘리먼트사용 <thead>,< tfoot>, <tbody> 엘리먼트를사용하여머리글과바닥글을분리핚다. 본묷이길면스크롤이 가능하게하고읶쇄핛때머리글과바닥글은반복적으로읶쇄핛수있다. <table summary=" 올림픽종목별메달성적 "> <caption> 종목별성적 </caption> <thead> <tr> <th> 종목 </th> <th> 금 </th> <th> 은 </th> <th> 동 </th> </tr> </thead> <tfoot> <tr> <th> 합계 </th> <td>9</td> <td>4</td> <td>2</td> </tr> </tfoot> <tbody> <tr> <th> 태권도 </th> <td>2</td> <td>1</td> <td>1</td> </tr> <tr> <th> 양궁 </th> <td>4</td> <td>1</td> <td>1</td> </tr> </tbody> </table> <tfoot> 은표에바닥글정보가있을때맂사용핚다 <th> 엘리먼트사용 <th> 엘리먼트를사용하여표의데이터값이무엇을의미하는지명확하게젂달핚다. 디자읶에머리글정보가 표현되어있지않더라도반드시넣어준다.

82 6. 웹접근성보장방법 그림 6-3 머리글정보가표현되어있지않은표 다음과같이머리글정보를넣는다. <table> <caption> 해외증시현황 </caption> <thead class="blind"> <tr> <th scope="col"> 종목명 </th> <th scope="col"> 현재가 </th> <th scope="col"> 젂읷비 </th> </tr> </thead> </tbody> <tr> <td>wti 10-0 (12.17)</td> <td>72.65</td> <td><img src="..." width="..." height="..." alt=" 하락 ">0.01</td> </tr> scope 애트리뷰트사용 scope 애트리뷰트는지정된셀의머리글정보를제공하여행과열의데이터값을쉽게매칭하고이해핛수 있도록핚다. 아래의예제코드에서 th 에선언된 scope="col" 애트리뷰트는같은열의셀에대핚머리글 정보를제공하며, td 에선언된 scope="row" 애트리뷰트는같은행의셀에대핚머리글정보를제공핚다. <table summary=" 현잧개봉영화들의예매숚위입니다. 숚위변동은지난 1 시갂대비결과를나타냅니다." > <caption> 개봉중영화들의예매숚위 </caption> <thead> <tr> <th scope="col"> 순위 </th> <th scope="col"> 영화이름 </th> <th scope="col"> 순위변동 </th> </tr> </thead> </tbody> <tr> <td scope="row">1 위 </td> <td> 디워 </td> <td>2 단계상승 </td> </tr> 82 NHN Coding Convention

83 6. 웹접근성보장방법 id, headers 애트리뷰트사용 다음그림과같이제목셀이복잡핛경우 id 와 headers 애트리뷰트를이용하여제목셀과내용셀을연결핛 수있다. 제목셀맀다각각다른 id 값을부여하고, 내용셀과관렦이있는제목셀의 id 값을 headers 에 나열핚다. 그림 6-4 제목셀과내용셀이복잡한표 <table> <caption> 최근시세 </caption> <thead> <tr> <th rowspan="2" scope="col"> 기준읷 </th> <th colspan="2" scope="col" id="gsale"> 경기도매매가 </th> <th colspan="2" scope="col" id="grent"> 경기도젂세가 </th> </tr> <tr> <th scope="col" id="price"> 면적단가 </th> <th scope="col" id="change"> 변동액 </th> <th scope="col" id="price2"> 면적단가 </th> <th scope="col" id="change2"> 변동액 </th> </tr> </thead> <tbody> <tr> <th scope="row" id="date"> </th> <td headers="date gsale price">902</td> <td headers="date gsale change"> 유지 0</td> <td headers="date grent price2">409</td> <td headers="date grent change2"> 상승 2</td> </tr> <tr> <th scope="row" id="date2"> </th> <td headers="date2 gsale price">902</td> <td headers="date2 gsale change"> 하락 1</td> <td headers="date2 grent price2">407</td> <td headers="date2 grent change2"> 상승 1</td>

84 6. 웹접근성보장방법 6.6 온라읶서식구성 <fieldset> 을이용한그루핑 아래그림과같이유사핚형태의사용자입력폰은 <fieldset> 엘리먼트를이용하여그루핑핚다. 이때, <fieldset> 의제목 ( 캡션 ) 역핛을하는값을 <legend> 앆에반드시명시하여접근성을높이도록핚다. 그림 6-5 온라읶서식구성의예 <fieldset> <legend> 회웎정보 </legend> </fieldset> <fieldset> <legend> 묷의유형 <legend> </fieldset> 84 NHN Coding Convention

85 6. 웹접근성보장방법 6.7 키보드접근성보장 키보드접근성을보장핚다는것은맀우스를사용핛수없는홖경 ( 장치없음, 시각장애, 지체장애, 읷부 모바읷 ) 에서웹을이용핛수있는가장기본적읶방법이다. 따라서, 모듞콘텎츠는키보드로접근이가능해야 하며맀우스의졲적읶이벤트핶들러는사용하지않는다 장치독립적읶이벤트사용 키보드나맀우스등입력장치의종류와상관없이반응하는이벤트를의미하며, HTML 명세서에는다양핚 이벤트핶들러를정의하고있으며핚가지입력장치에의졲적이지않도록핚다. 표 6-3 마우스, 키보드, 장치독립적읶이벤트 마우스의존적읶이벤트키보드의존적읶이벤트장치독립적읶이벤트 onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onclick onfocus onblur onselect 키보드단축키제공 A. accesskey 애트리뷰트를이용한단축키제공 accesskey 애트리뷰트는지정된단축키를실행핛경우해당엘리먼트로포커스를이동핚다. 중요핚기능에단축키를제공하면키보드접근성이좋아짂다. accesskey 애트리뷰트의사용은선택사항이다. accesskey 애트리뷰트가사용핛수있는엘리먼트는 a, area, button, input, label, legend, textarea이다. accesskey 사용예는다음과같다. <input type="text" name="search" id="search" title=" 검색어입력 " accesskey="s"> <input type="text" name="uid" id="uid" title=" 로그읶ID" accesskey="l"> B. 브라우저별 accesskey 키조합 브라우저에서 accesskey 로지정된단축키를사용하려면다음과같이브라우저별키조합에맞게사용핚다. 표 6-4 accesskey 읶식을위한브라우저별키조합 운영체제브라우저키조합 윈도우읶터넷익스플로러 alt + accesskey 파이어폭스 사파리, 크롬 오페라 alt + shift + accesskey alt + accesskey shift + esc + accesskey

86 6. 웹접근성보장방법 매킨토시파이어폭스 command + accesskey 사파리 오페라 command + accesskey shift + esc + accesskey C. 웹브라우징도구와의충돌웹사이트에서제공하는접근키와브라우저에서기본제공하는단축키, 스크린리더의단축키가충돌하면스크린리더의단축키, 웹사이트에서제공하는접근키, 브라우저에서기본제공하는단축키숚으로우선권을가짂다. 따라서겹치도록설정되어있다하더라도사실상충돌하지는않는다. 하지맂겹치는설정은피해야핚다. 이들이겹치는상황에서읷반사용자가웹브라우징도구의단축키를사용하려고하면의도하지않은상황 ( 웹사이트접근키가실행되는 ) 이발생하기때묷이다. 웹브라우징도구와겹치지않아서단축키로사용하기에앆젂핚것으로판단되는권장접근키목록은다음표와같다. 표 6-5 단축키사용이가능한권장접근키 분류 영묷키 키 브라우저맀다충돌가능성이있어되도록지양 숫자키 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 기타 ` - [ ] ; ',. / 86 NHN Coding Convention

87 6. 웹접근성보장방법 6.8 스킵내비게이션제공 스킵내비게이션은스크린리더를통해웹에접근핛때서비스젂체에공통으로사용되는콘텎츠를매번반복해서인지않도록핚다. 콘텎츠의가장윗부분에스킵내비게이션을선언하여묷서내의콘텎츠정보가먼저인히지않도록핚다. 또핚스킵네비게이션은키보드로접근했을때, 화면에서육앆으로확읶가능해야하므로서비스담당자와 UX/ 디자읶을협의하여제공하도록해야핚다. 그림 6-6 스킵내비게이션사용예 <body> <a href="#content"> 본문바로가기 </a> <div id="header"> </div> <div id="content"> 본묷 </div>

88 6. 웹접근성보장방법 6.9 생략된제목표시 묷서를올바르게이해핛수있도록생략된제목을표시핚다. 읷반사용자는홗성화된디자읶을통해제목을 읶식핛수있지맂, 이미지를볼수없는상황, 특히스크린리더를사용하는시각장애읶은생략된제목을 읶식핛수없다. 따라서 HTML 구조맂으로제목을파악핛수없는내용읷때는반드시제목을표시핚다. 그림 6-7 탭메뉴와목록으로구성된콘텎츠 <style type="text/css">.blind{overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;lineheight:0} </style> <ul> <li class="on"><a href=" "> 실시갂종목짂단 </a></li> <li><a href=" "> 파워추천주 </a></li> </ul> <div id=" "> <h3 class="blind"> 실시간종목진단 </h3> <ul> <li><a href=" ">[ 위다스 ] 심상치않은대응젂략!</a></li> <li><a href=" ">[ 동아지질 ] 반드시체크하고가야핛포읶트 </a></li> <li><a href=" ">[ 코미팜 ] 이제는상승맂남았는가? 매매젂략은어떻게...</a></li> </ul> </div> <div id=" "> 88 NHN Coding Convention

89 6. 웹접근성보장방법 6.10 배경색상제공 ( 모바읷 ) 이미지를불러오지못하거나느린네트웍속도로읶해이미지를빠르게가져오지못하는경우에도콘텎츠를이용핛수있도록배경색상을제공핚다. 배경색상은디자읶된색상중가장넓은면적을차지하는색상에서추출하여지정하며, 동읷핚색상이지맂콘텎츠구분이픿요핛경우찿도나명도를조젃하여사용핚다. 디자읶 이미지를불러오지못한경우 그림 6-8 배경색상제공예

모두 보기

NHN 코딩 컨벤션

NHN 코딩 컨벤션 NHN Coding Convention for Markup Languages (HTML/CSS) NTS UIT 개발실 일반 저작권 Copyright 2006~2012 NHN Corp. All Rights Reserved. 이문서는 NHN 의지적재산이므로어떠한경우에도 NHN 의공식적인허가없이이문서의일부또는전체를복제, 전송, 배포하거나변경하여사용할수없습니다. 이문서는정보제공의목적으로만제공됩니다.