HTML&CSS 본문

HTML Convention

DOCTYPE

문서타입에 (X)HTML의 버전과 문서형을 지정하는데, 다양한 플랫폼 지원을 위해 XHTML 1.0 , 하위 브라우져 호환성을 위해 Transitional 모드를 권장하고 있다. (Transition 모드를 사용하더라도, 웹표준 준수율의 향상을 위해 가급적 Strict 모드의 문법을 사용하는 것을 권장함) 시스템 식별자를 명시하여 Standards 모드 방식으로 지원해야 하나 예외적으로 메일, 개별카페, 개별블로그 등의 UCC영역에 해당하는 서비스는 과거 비표준 태그 허용을 위해 Quirks 모드로 지원할 수 있다.

XHTML 권장
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 일반
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!doctype html>

문서 제목

각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 (<title> 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔진에 대한 최적화를 꾀한다. 또한 문서 제목에 컨텐츠 제목을 포함시킴으로써, 외부 검색서비스에서 해당 컨텐츠의 노출이 더 잘될 수 있도록 한다.

기본 규칙

컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명

문서제목 기본 요소

문서 제목에 포함되는 기본 요소를 정의한다.

서비스명
  • 'Daum 영화', 'Daum 미디어다음'
컨텐츠 제목
  • 서비스에서 제공하는 컨텐츠의 제목 - 뉴스 기사 제목, 영화 정보 페이지의 영화 이름
  • 사용자가 제작한 컨텐츠(UCC)의 제목 - 미즈넷, 아고라, 카페의 글 제목
  • 개인/그룹의 Identity를 갖는 공간의 이름 (카페명, 블로그명)
하위 섹션명
  • 하나의 서비스내 하위 섹션명. 보통 서비스별 GNB에서 TAB으로 표현되는 구분.
  • '영화정보' (Daum 영화), '뮤직비디오' (Daum 뮤직)
각 요소별 상세규칙
서비스 명
  • Daum의 모든 서비스는 문서 제목에 서비스명을 표기하는 것을 원칙으로 한다.
  • 서비스명은 문서 제목에서 가장 뒷부분에 위치한다.
<title>Daum 미디어다음</title>
<title>Daum 영화</title>
<title>Daum 미즈쿡</title>
컨텐츠 제목
  • 하나의 컨텐츠를 대표하는 페이지의 경우, 반드시 해당 컨텐츠 제목을 문서 제목에 표기한다.
  • 컨텐츠 제목은 문서 제목에서 가장 앞부분에 위치한다.
  • 컨텐츠 제목과 서비스명 간의 구분자는 반드시 ' – ' (&ndash;) 기호를 사용한다.
    왜 minus 기호가 아닌 – 기호를 사용해야 하나요?

    사내 검색 엔진 크롤링시 문서 제목에서 컨텐츠 제목을 보다 정확하게 뽑아내기 위함. 구분자로서 minus 기호를 사용할 경우, 검색 엔진 크롤링시 minus 기호가 들어간 컨텐츠 제목을 정확히 뽑아내기 어렵다고 함

  • 컨텐츠 제목이 HTML validation 을 깨지 않도록 반드시 HTML escape 되어야 한다.
    <title>딸 예니 운동회 참석한 "딸바보" 차승원 – Daum 텔존</title>
하위 섹션명
  • 하위섹션명은 서비스명 앞에 표기한다.
  • 하위섹션명의 구분자는 ' | ' (vertical bar / pipe 기호) 를 사용한다.
  • 하위섹션명은 필수 요소는 아니다.
    <title>경제 | Daum 미디어다음</title>
    <title>IT/과학 | Daum 미디어다음</title>
    <title>스타존 | Daum 영화</title>
Meta title 요소
  • 검색 엔진 최적화를 위하여 meta 요소를 이용하여 문서 제목을 추가 명시한다.
  • 컨텐츠 상세 페이지에서는 컨텐츠 제목 만을 표기한다.
  • 서비스홈에서는 서비스명 만을 표기, 서브 섹션홈에서는 하위섹션명 | 서비스명 을 표기한다.
  • 컨텐츠 제목이 HTML validation 을 깨지 않도록 반드시 HTML escape 되어야 한다.
    <meta name="title" content="딸 예니 운동회 참석한 "딸바보" 차승원" />
    <meta name="title" content="리뷰 | Daum 영화" />
    <meta name="title" content="Daum 영화" />

Layout Guide

HTML4.01/XHTML 1.0 기본 레이아웃
  • 큰 레이아웃은 전체를 daumWrap으로 싸고 daumHead, daumContent, daumFoot으로 쪼갠다.
    위 사항은 모바일도 해당.(layout name은 Daum의 HTML 문서임을 알 수 있게하는 기능도 같이함)
  • daumWrap을 relative로 하여 daumMinidaum을 상단으로 올리는 형태
  • 'daum'을 prefix로 하여 공통 UI는 id로 묶어내고, 기타 레이아웃은 class 처리
  • 웹접근성용 바로가기(목차) 위치는 가장 상단에 위치시킨다.
  • h1 (Daum 서비스명), h2 (메인메뉴,본문,이용약관...), h3 (세부컨텐츠, 핵심컨텐츠), h4 (서브컨텐츠) , h5,h6 (될 수 있으면 안쓴다.)
  • 페이지 내 팝업, 레이어는 STRONG 요소로 제목을 구현한다.(단, 별도의 팝업 페이지는 제목을 헤딩으로 구조화 할 수 있다.)

본문 바로가기 : #daumBody 로 통일함 (페이지 별로 본문요소에 반드시 적용해야 한다.)

<div id="daumIndex"> <!-- 웹 접근성용 바로가기 링크 모음 -->
	<a href="#daumBody"> 본문 바로가기 </a>
	<a href="#daumGnb"> 메뉴 바로가기 </a>
</div>
<div id="daumWrap" class="서비스명_type1" > <!--  position:relative 적용 / 레이아웃 관련 클래스 적용 -->
	<div id="daumHead">
		<h1>
			<a id="daumLogo"> Daum </a>
			<a id="daumServiceLogo"> 서비스명 </a>
		</h1>
		<ul id="daumRelServices"> 관련서비스들 </ul>
		<ul id="daumGnb"> GNB </ul>
	</div>
	<div id="daumContent" class="cont_폴더명" > <!--  대메뉴별(폴더명) 관련 클래스 적용 -->
		<div id="cSub"> #cSub or #cFeature 페이지내 의미에 따라 구분하여 사용 </div>
		<!-- 컨텐츠의 기본 영역(body Main) -->
		<div id="cMain" > 
			<div id="mNav" > #mNav </div>
			<div id="mSub" > #mSub or #mFeature </div>
			<div id="mArticle" >
				<h2 id="daumBody">서비스명 본문</h2>
				<!-- daumBody 본문바로가기 링크임 - 페이지별 위치 및 element 명은 서비스에 맞게 변경하여 사용 -->
			</div>
			<div id="mAside" > #mAside </div>
			<div id="mEtc" > #mEtc </div>
		</div>
		<!-- 기타 하단 Etc 영역 (body Etc) -->
		<div id="cEtc" > #cEtc </div>
	</div>
	<div id="daumFoot">
		copyright
	</div>
	<div id="DaumUI__minidaum"></div><!-- position:absolute로 상단 위치 -->
</div>
	
HTML5 기본 레이아웃
  • HTML5 용 레이아웃 가이드
  • daumWrap을 relative로 하여 daumMinidaum을 상단으로 올리는 형태
  • article : 태그 자체로 완전한 하나의 개별 컨텐츠 article은 그 안에 section을 가질 수 있음
  • section : 제목 태그(Heading Tag)를 지닌 영역 구분
<div id="daumIndex"> <!-- 웹접근성용 바로가기 링크 모음 -->
    <a href="#daumBody">본문 바로가기</a>
    <a href="#daumGnb">메뉴 바로가기</a>
</div>
<article id="daumWrap" class="서비스명_type1"><!-- position:relative 적용 / 레이아웃 관련 클래스 적용 -->
    <header id="daumHead">
        <h1>
            <a id="daumLogo">Daum(text)</a>
            <a id="daumServiceLogo">서비스명(text)</a>
        </h1>
        <ul id="daumRelServices">관련서비스들</ul>
        <nav id="daumGnb">GNB</nav>
    </header>
    <article id="daumContent"  class="cont_폴더명"><!-- 대메뉴별(폴더명) 관련 클래스 적용 -->
        <!-- 알아서 구성 -->
        <div id="cSub">#cSub or #cFeature 페이지내 의미에 따라 구분하여 사용</div>
        <!-- 컨텐츠의 기본 영역(body Main) -->
        <div id="cMain">
            <nav id="mNav">#mNav</nav>
            <div id="mSub">#mSub or #mFeature</div>
            <article id="mArticle">
                <h2 id="daumBody">서비스명 본문</h2>
                <!-- daumBody 본문바로가기 링크임 - 페이지별 위치 및 element 명은 서비스에 맞게 변경하여 사용-->
            </article>
            <aside id="mAside">#mAside</aside>
            <div id="mEtc">#mEtc</div>
        </div>
        <!-- 기타 하단 Etc 영역(body Etc) -->
        <div id="cEtc">#cEtc</div>
    </article>
    <footer id="daumFoot">
        copyright
    </footer>
    <div id="DaumUI__minidaum"></div><!-- //position:absolute로 상단 위치. cgi 수정작업 전까지는 기존 id를 유지 -->
</article>
	

색인

일반 문서를 HTML로 다음과 같은 규칙에 맞게 색인화 한다.

  • H1 : Daum 서비스명
  • H2 : 메인메뉴, 본문, 이용약관 등
  • H3 : 세부 컨텐츠, 핵심 컨텐츠 등
  • H4 : 서브 컨텐츠
  • H5, H6 : 헤딩요소의 파편화를 불러일으킬 여지가 있으므로 가급적 사용하지 않는다.
headingmap

주석표기

수정작업 시 주석처리

마크업 수정 시, 수정부분을 표기하는 주석은 다음과 날짜를 기입하여 사용한다. (에디트플러스에서 Ctrl+D를 누르면 0000-00-00 형식으로 자동 입력됨)

<!-- 2012-12-25 주석내용 -->
<div>
...
</div>
<!-- // 2012-12-25 주석내용 -->
script 엘리먼트 주석처리
XHTML
<script type="text/javascript">
<![CDATA[
document.write("<\/P>");
]]>
</script>
HTML
<script type="text/javascript">
<!--
document.write("<\/P>");
-->
</script>
주의사항
  • 공통 : 너무 많은 주석은 유령문자버그를 생성하므로 되도록 자제 한다.
    <!-- comments (0) -->
  • XHTML : 주석으로 감싼 내용 안에 "--"가 오거나, 파라미터 엔터티 참조가 인식되서는 안된다.
    <!-- co--ents (X) -->
    <!-- %Text; (X) -->
    <!-- co--ents (X) -->
    <!-- comments (X) -->
  • HTML : 시작하는 구분자("<!")와 주석을 시작하는 구분자("--") 사이에는 공백 문자(white space)가 올 수 없다.
    <! -- comments (X) -->
    <!-- comments (△) -- > 내용을 종료하는 "--"와 코멘트을 종료하는 ">" 사이에는 공백 문자(white space)가 올 수 있다.
    <!--- comments (X) ---> 코멘트 내용에서 두개 이상의 하이픈('-')을 연속해서 사용하면 안된다.

들여쓰기

기본규칙

코드의 가독성을 높이기 위하여 들여쓰기를 사용하며 탭 1개의 크기는 공백 4칸으로 설정한다. 또한 마크업의 깊이가 깊어질 때마다 탭 1개만큼 들여쓰지만 다음의 경우 들여쓰지 않을 수 있다.

  • HTML Element의 자식 Element인 head, body
  • thead Element의 자식 Element인 tr

Attribute 우선순위

Attribute 작성

Attribute 값은 큰따옴표("")로 묶는다

Attribute 우선순위

Attribute의 우선 순위는 다음 순위를 따른다

Attribute의 우선 순위
순서 속성
1 rel
2 type
3 href, src
4 width, height
5 target
6 id
7 name
8 class
9 style
10 title, alt
11 기타 attribute
<a href="#" target="_blank" id="linkId" class="link" style="display:block;" title="링크가기">링크</a>
<img src="../img.gif" width="100" height="100" id="imgId" class="img" style="display:block;" alt="이미지내용" title="이미지툴팁" />
<input type="text" id="tfId" name="tfname" class="tf" style="width:100px;" title="입력창" size="10" maxlength="5" />

Link target

<a>태그의 속성 중 target에 대하여 다음의 규칙을 따른다.

현재창 → 현재창
  • 다음 내 모든 서비스 페이지 내 링크 요소는 기본적으로 현재창이 바뀌는 것을 원칙으로 한다. 단, 외부 서비스 및 개별 컨텐츠 링크 시에는 새창을 허용한다.
  • target 속성을 따로 주지 않는다.
  • Daum로고와 관련서비스 링크는 target="_top" 처리한다.
현재창 → 각각 새 창
  • 각 서비스에서 블로그 및 카페글 또는 외부 서비스로 컨텐츠가 링크 되는 경우
  • 코딩가이드 : target="_blank"
현재창 → 단독 새 창
  • 각 서비스에서 Daum 내부 타 서비스의 컨텐츠로 링크되는 경우
  • 코딩가이드 : 새창 이름을 통일. ex. target="stockitem"
현재창 → 팝업
  • 코딩가이드 : javascript - window.open()
현재창 → 로그인페이지
  • 다음 내 모든 서비스의 로그인 페이지 정책은 기본적으로 현재창이 로그인 페이지로 바뀌는 것을 원칙으로 한다. 단, 팝업창으로 연결될 경우는 로그인 팝업을 띄운다.

Table

caption
캡션은 자신의 부모인 table과 같은 너비를 가짐. caption의 align (bottom,center,left,right,top(기본값))은 마크업흐름상 table의 최상위에 위치 해야함.
summary
Techniques of WCAG 2.0의 H73에서는 테이블의 행, 열을 2단계, 3단계로 정의하는 경우 summary에서 그 구조에 관한 것을 언급해 주어야 한다고함.
scope
읽어야 하는 방향을 지정해주면됨. scope="col"의뜻은 세로(column)로 읽어라. row는 가로(row)로 읽어라.
참고 URL : http://trio.co.kr/webrefer/html40/struct/tables.html#non-visual-rendering
id와 headers
scope와 같은 효과를 볼수 있지만, 마크업이 다소 늘어나게 됨.
summary, caption, scope, header 등을 사용할 경우 이를 스크린리더가 참조할 수는 있지만, 이러한 속성과 요소가 스크린리더만을 위한 것이 아니므로 HTML의 의미를 이해하고 이에 맞게 사용해야지 특정 브라우저나 사용자 기기만을 염두에 두고 HTML을 구성해서는 안됨. table내에 dl, ul, ol 등의 중복구조에 scope등을 쓰게 되는 마크업은 피해야함.
thead,tbody,tfoot
thead만 있으면 벨리데이터 오류. tfoot과 같은 경우 테이블의 가장 아래에 위치하며, 마크업의 흐름상 thead 다음 tfoot 다음 tbody 순으로 코딩해야함
colgroup
  • 세로열전체를 그룹화 함. 사용하는것을 권장함.(가변적인 데이터가 들어오더라도, 사이즈를 유지시켜줌)
    속성으로는 span,width,bgcolor 가 있으며, width 나 class하여 사용하는것을 권장.
    ie6버그로 table에 bg를 깔게되면, 세로열을 기준으로 각col당 repeat를 하게 되므로, bg:none 시켜주면 해결 됨.
    모바일에서 CSS로 %를 사용시에 대응이 안되므로, <col width="%" /> 로 사용해야함.
  • 테이블 내에 보더가 없는 경우에는 <col width="" />사용을 하며, 보더가 있는 경우에는 크로스브라우징시 1px 밀리는 이슈가 발생하여, <col class="" /> 를 사용하여 CSS에서 width를 핸들링함.
  • 제목이 세로형일 시 <col class="넘버링"> 사용
summary,caption 적용 방식
[ 권장 ]
<table summary="표의 타이틀,타이틀,타이틀,...정보제공">
<caption>표의 제목</caption>
</table>
// 추후 HTML5에서 summary가 이슈가 된다면 summary만 삭제가능
[ 잘못된 예 ]
1.
<table>
    <caption>
        <strong>표의 제목</strong>
        <p>표의 타이틀,타이틀,타이틀,...정보제공</p>
    </caption>
</table>
 
2.
<table>
    <caption>표의 제목</caption>
</table>

기타 참고사항

중첩 리스트 적용 지양

단, GNB 및 서브메뉴 등에서는 키보드 사용성 확보를 위해 2depth까지는 제한적 허용함

dl 요소 안에는 여러개의 dt,dd 구조 적용 가능 title 속성 적용 범위

IR기법을 사용한 링크에서는 title 미적용 : 내용이 중복 제공되는 현상 방지 (단, 중요한 내용인 경우에는 OK!)

단, GNB 및 서브메뉴 등에서는 키보드 사용성 확보를 위해 2depth까지는 제한적 허용함 label로 적용하기 어려운 input 요소에 적용 가능

layer 페이지 제목요소

페이지내 레이어는 STRONG 요소로 제목 구현함 (단, 레이어가 아닌 별도의 팝업 페이지는 제목을 헤딩으로 구조화 한다.)

a & strong의 중첩관계

페이지내 레이어는 STRONG 요소로 제목 구현함 (단, 레이어가 아닌 별도의 팝업 페이지는 제목을 헤딩으로 구조화 한다.)

// 권장사항 (단일 중첩관계일경우)
<strong>
    <a href="#">썸네일 타이틀</a>
</strong>
 
// 예외처리 (앵커 안에 많은 요소들을 포함할 때)
<a href="#">
    <strong>썸네일 타이틀</strong>
</a>
role 속성 적용

HTML5 DTD 적용 서비스에서는 role 속성을 적용함

이외 문서타입에서는 적용하지 않음 (사용시 validation 오류 발생)