본문 내용 바로가기


기본가이드

1. 해상도 및 크로스브라우징/웹접근성(WHA) 범위

■ 해상도

1024*768을 기준으로 하되, 해상도 100% CENTER 정렬

■ 크로스브라우징

  • ie8을 기준으로 하되, ie7/ie9/ie10, Chrome, Firefox 크로스브라우징, 사라피 화면유지
  • 작업후 validator 필수체크
  • 크로스브라우징 IE 호환성보기로 인한 오류방지를 위해 항상 최신브라우저 렌더링이 되도록 META TAG 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge">

■ 웹접근성(WHA)

  • 한국형 웹 콘텐츠 접근성 지침 2.0을 기준으로 하되, 준수가이드 범위는 WHA 가이드라인 참고
  • 작업후 웹접근성 준수확인 OpenWAX 사용하여 정성적 평가(파이어폭스/구글설치 추천)
  • 접근성 준수를 위해 IR 적용시 display:none; 또는 visibility::hidden; 사용 금지

2. DTD / language TYPE / Encoding

■ DOCTYPE : DTD 선언시 앞에 공백이 오지 않도록 해야하며, 문서 최상단에 선언되어야 함.

HTML5
<!DOCTYPE html>
<html lang="ko">
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

로컬 언어는 ISO 639 국가코드 및 언어코드에서 확인후 반영

■ ENCODING TYPE

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

@charset "utf-8"; - 문서인코딩 utf-8 필수

3. META TAG

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta name="Author" content="www.adcapsule.co.kr">
<meta name="title" content="ADCAPSULE | 애드캡슐">
<meta name="keywords" content="adcapsule, publishing, 애드캡슐, 퍼블리싱 가이드">
<meta name="description" content="애드캡슐 퍼블리싱 가이드">
<meta name="viewport" content="user-scalable=yes, maximum-scale=1.0, width=1004"> /* 모바일일 경우 */

상세내용 기획과 협의필요

4. 들여쓰기규칙

* 마크업의 중첩이 깊어질때마다 자식 엘리먼트는 1탭씩 들여쓰고, 1탭의 공백은 4칸임.

드림위버와 에디터 플러스에서 Tab Size 설정하는 법

  • 드림위버 : Preferences > Category > Code Format > Indent & Tab Size > [Indent width 1 Tabs, Tab Size 4]
  • 에디터플러스 : Tools > Preferences > Categories > Files > Settings and syntax > [Tab/Indent]