다운로드 - 한국방송통신대학교
Download
Report
Transcript 다운로드 - 한국방송통신대학교
차세대 학사정보시스템 구축
홈페이지 스타일 가이드
단계명 : 설계
시스템명 : 학생정보서비스(홈페이지)
문서번호 : nKNOU-DEHP-05
목차
가. 웹 디자인 가이드라인 …………………………………………………………………… 2
A. Basic ………………………………………………………………………………… 3
B. HTML ……………………………………………………………………………… 29
C. CSS………………………………………………………………………………… 50
D. IMAGE……………………………………………………………………………… 60
E. Naming……………………………………………………………………………… 66
F. UI개발(Pattern) …………………………………………………………… 72
1
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
2
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
1. 디자인 지침
웹디자인 가이드 라인을 참조하여 전체 사이트의 느낌과 레이아웃을 해치지 않도록 주의하여 이미지를 만들고
버튼, 텍스트, 폰트등은 정해져 있는 CSS가이드를 따라 작성을 한다.
2. 디자인 컨셉
웹디자인 가이드 라인을 참조하여 전체 사이트의 느낌과 레이아웃을 해치지 않도록 주의하여
이미지 및 코드작성을 한다.
3
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
3. Layout
Layout은 전체 Page 구성의 표준을 만들어 주고 컨텐츠 운영의 효율성 극대와 사용자 중심의 인터페이스를 구축하
는데 목적이 있다.
1) 화면기본설정
①
모니터 해상도 : 1024X768(Pixel)
②
모니터 컬러 : 256칼라 이상
③ 화면정렬 : Center 정렬
④
메인 : 고정폭 3단컬럼
⑤
서브 : 가변폭 3단컬럼
4
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
3. Layout
1) 메인레이아웃
①
Header
장애인 screen_control,
CI, 검색, tool MENU
GNB 1Depth, 2Depth
메뉴전체보기
②
Contents A
이벤트 바로가기, 로그인,
사이트 비쥬얼영역
③
Contents B
이벤트 배너, 통합검색,
공지사항,
유형별 맞춤서비스
④
Contents C
로그인,
주요 서비스 바로가기,
주요 홈페이지 바로가기
⑤
Footer
주소, 카피라이터 ,
부메뉴 (nav_sub)
5
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
3. Layout
1) 메인레이아웃
①
Header
장애인 screen_control,
CI, 검색, tool MENU
GNB 1Depth, 2Depth
메뉴전체보기
②
Contents A
이벤트 바로가기, 로그인,
사이트 비쥬얼영역
③
Contents B
프로모션용 페이지
④
Footer
주소, 카피라이터 ,
부메뉴 (nav_sub)
6
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
3. Layout
7
차세대 학사정보시스템 구축
홈페지이 표준 정의서
가. 웹 디자인 가이드라인
A. Basic
3 Layout
2) 서브레이아웃
①
Header
장애인 screen_control,
CI, 검색, tool MENU
GNB 1Depth, 2Depth
메뉴전체보기
②
LNB
보조메뉴 2Depth, 3Depth
③
Contents
타이틀, 현재위치, 본문
④
Contents
3번 컨텐츠의 양에 따른
가변폭 영역으로
3,4번 모두 컨텐츠 영역으
로 쓰거나,
3번 컨텐츠 4번 커그텀 이
미지 두가지 방식으로 사용
⑤
Footer
주소, 카피라이터 ,
부메뉴 (nav_sub)
페이지관리자, 갱신일
8
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
3. Layout
9
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
4. Navigation
1) GNB (Global Navigation Bar)
2) Menu Text
①
1 depth (default) : Yoon YGO 550_TT 13px, anti-aliasing : smooth, (장평 : 100%, 자간 : 0, 색상:# 003d71)
②
1 depth (current) : Yoon YGO 550_TT 13px, anti-aliasing : smooth, (장평 : 100%, 자간 : 0, 색상:#FFFFFF)
③
2 depth (default) : 돋움(dotum) 12px, system-font, (장평 : 100%, 자간 : -1px, 색상:# e2e2e2)
④
2 depth (current) : 돋움(dotum) 12px, bold, system-font, (장평 : 100%, 자간 : -1px, 색상:#FFFFFF)
10
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
4. Navigation
3) SNB (Sub Navigation Bar)
①
Title Text
YDIYGO350 22px, anti-aliasing : smooth,
(장평 : 95%, 자간 : -50px, 색상:#FFFFFF)
YDIYGO350 11px, anti-aliasing : crisp,
(장평 : 95%, 자간 : -50px, 색상:#FFFFFF)
②
2 depth (default) :
굴림(Gulim) 13px, bold, system-font,
(장평 : 100%, 자간 : -1px, 색상:#737373)
③
2 depth (current ) :
굴림(Gulim) / 13px, bold, system-font,
(장평 : 100%, 자간 : -1px, 색상:#333333)
④
3 depth (default) :
돋움(Dotum) 12px, system-font,
(장평 : 100%, 자간 : -1px, 색상:# 737373)
⑤
3 depth (current ) :
돋움(Dotum) 12px, system-font,
(장평 : 100%, 자간 : -1px, 색상:# 737373)
11
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
5. Color
1) 디자인 칼라 선정 및 적용
컨셉과 키워드를 적절히 표현할 수 있는 컬러를 도출함으로써 방송통신대학교의 CI칼라와 적절한 조화를 이룰 수 있도록
한다.
2) 컬러 시스템 : 많은 수의 컬러는 눈에 피로를 줄 수 있다. 또한 사이트에 통일감을 잃어 버릴 수 있다
Main Color는 #529CE3
Sub Color는 Default로 #195D9C를 선택하고, 추가로 블루계열 안에서 적절히 variations하여 쓴다.
Point Color를 #879750, #9463b5, #f97b00 을 사용하여 블렛이나 메뉴 타이틀, 테이블헤더, 탭메뉴 등에 사용하여
강조한다.
12
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
6. Font
Font는 Page상에 글자 사이의 조화와 상호 작용에 관한 것으로, 쉽게 형식을 이해하고 내용을 파악할 수 있고, 사이트 상의 글을
입체적으로, 시각적인 계층구조를 만들도록 한다. 국문과 영문의 font 체계를 달리 두며, 특정 시스템이나 브라우저와 무관하게
동일한 형태로 하며 미적인 효과를 위해 Graphic Tool을 이용한다. Contents Area에 사용 시 그 중요도에 따라 Size 나 Bold로
조정 가능하며, Color는 Color Concept에 맞추어 자율로 한다.
1) 이미지폰트
①
해당 페이지의 메뉴컬러와 전반적인 분위기에 반하지 않는 범위 내에서 활용한다.
②
한글 : 서체:윤고딕500번대, 윤고딕300번대, 윤명조500번대, YDIWebYGO100번대 계열,
장평 : 100~90%, 자간 : -30~-100px
③ 영문 : 서체: Futura Hv BT, ITC Avant Garde Gothic Demi, 장평 : 100~90%, 자간 : -30~-100px
2) 시스템폰트
①
특수한 예를 제외하고는 시스템폰트를 사용한다.
모든 페이지에 걸쳐 일관성을 유지하기 위하여 폰트 타입, 서체크기, 글줄 간격, 칼라 등의 성격을 규정하는
CSS Style sheet가 적용되어 있다.
②
한글 : 서체:돋움, 색상 : #666666, 크기 : 12px, 자간 : -1px
③
영문 : 서체:돋움, 색상 : #666666, 크기 : 12px, 자간 : -1px
13
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
6. Font
3) 메인화면 타이틀 폰트
한글 : 서체:윤고딕500계열, 색상 : #00386c #999999, 크기 : 12px, 장평 : 100%, 자간 : 0
영문 : 서체: ITC Avant Garde Gothic Demi, 색상 : #00386c #999999, 크기 : 12px, 장평 : 100%, 자간 : 0
위를 기본으로 하되 분위기에 따라 칼라는 포인트 칼라내에서 적절히 사용한다.
메인의 이미지폰트는 배너들은 윤고딕 300계열, 그외 이미지 폰트 종류는 윤고딕 500계열을 사용한다.
4) 메인화면 본문 폰트
한글 : 서체:돋움, 색상 : #666666, 크기 : 12px 11px, 자간 : -1px
영문 : 서체:돋움, 색상 : #666666, 크기 : 12px, 자간 : -1px
14
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
6. Font
5) 서브화면 타이틀 폰트
Yoon YGO 540_TT, #333333, 크기 : 18px, 장평 : 100%,
자간 : -10, (anti : smooth) / Dotum, 12px, #999999
6) 서브화면 현재위치 폰트
Dotum, #999999, 11px, 자간 : -1px,
강조 : bold, #6699cc
7) 서브화면 카피 폰트
Yoon YGO 540_TT, #538AA6, 크기 : 30px,
장평 : 100%~90%, 자간 : -10 ~ -70, (anti : smooth)
8) 서브화면 타이틀 폰트 ( h5)
Gulim, #333333, 14px, bold, 자간 : -1px
9) 서브화면 타이틀 폰트 ( h6)
Dotum, #598527, 12px, bold , 자간 : -1px
10) 서브화면 타이틀 폰트 ( h7)
Dotum, #666666, 12px, bold , 자간 : -1px
11) 서브화면 본문 폰트
Dotum, #666666, 12px , 자간 : -1px, 행간 : 18 px
강조 : bold, 외부링크 : #598527, underline
15
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
7. Table
1) Table색상
①
테이블 헤더 배경과 라인 : bg-color : #f8fcff, border-bottom : 1px #689ac4, border-top : 3px #689ac4
②
Base Border : #cccccc
2) 게시판 색상
① 테이블 헤더 배경과 라인 : bg-color : #f8fcff, border-bottom : 1px #689ac4, border-top : 3px #689ac4
②
Base Border : #cccccc
16
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
7. Table
3) 데이터 테이블 색상
①
테이블 헤더 배경과 라인 : bg-color : #f8fcff, border-bottom : 1px #689ac4, border-top : 3px #689ac4
②
Base Border : #cccccc
17
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
8. Icon&Bullet
1) Icon
①
아이콘은 사이트의 특성에 맞는 아이콘을 개발하여
첨부파일
사용하되 너무 현란하거나 타 사이트와 스타일의 차
캘린더
이가 현저한 아이콘사용은 제안한다.
인쇄
메인의 아이콘 예
메인의 아이콘 예
메인의 아이콘 예
메인의 아이콘 예
메인의 아이콘 예
메인의 아이콘 예
이전글 아이콘
다음글 아이콘
댓글 연결 아이콘
18
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
8. Icon&Bullet
2) Bullet
①
기본적으로 제공되는 블릿을 기본으로 하여 디자인한다.
H5 ( 입학안내에서는 H4 )
②
모든 페이지에 걸쳐 일관성을 유지하기 위하여 폰트 타입,
H6 ( 입학안내에서는 H5 )
서체크기, 글줄 간격, 칼라 등의 성격을 규정하는
H7 ( 입학안내에서는 H6 )
CSS Style sheet가 적용되어 있다.
ul
ul > li
ul > li > ul
ul > li > ul > li
dl>dt
확장되는 li
팁, 가이드 에 대한 블릿
Alert, Attention, Error, Exclamation
팝업용_Alert, Attention, Error,
Exclamation
*important
H5 > P
H6 > P
H7 > P
19
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
1) 메인버튼
①
메인페이지에 특이한 사항으로 적용되는 버튼이 있고 그 외에는 버튼이 필요시 제일 기본이 되는 버튼을 사용한다.
②
기본버튼은 모든 페이지에 걸쳐 일관성을 유지하기 위하여 폰트 타입, 서체크기, 글줄 간격, 칼라 등의 성격을 규정하는
CSS Style sheet가 적용되어 있다.
③
기본적으로 시스템 폰트는 자간 -1px 이다. 이미지 폰트는 가이드에 있는 자간을 따른다.
검색버튼
H 19 * W free / Dotum / 12px / bold / 장평 : 100% /
#FFFFFF #999999 / bg : image
메인을 위한 바로가기 이미지 버튼 (추가생성은 없음)
메인을 위한 바로가기 이미지 버튼 (추가생성은 없음)
메인에만 노출되는 로그인 이미지 버튼 (추가생성은 없음)
20
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
메인페이지 탭버튼 2
H 22 * W 85 /
YDIWebYGO140 / 11px / 자간 : 0/
장평 : 95% / anti : sharp
Default : #888888 / bg #e6e6e6
Over : #333333 / bg #ffffff
Solid 1px #dedede
메인페이지 탭버튼 2
H 27 * W 92 /
YDIWebYGO140 / 11px / 자간 : 0/
장평 : 95% / anti : sharp
Default : #888888 / bg #ffffff
Over : #ffffff / bg #689ac4
Solid 1px #dedede
메인페이지 탭버튼 3
H 28 * W 60 /
YDIWebYGO140 / 11px / 자간 : 0/
장평 : 95% / anti : sharp
Default : #888888 / bg #e6e6e6
Over : #404040 / bg #ffffff
Solid 1px #dedede
21
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
2) 게시판 버튼
①
해당 페이지의 메뉴컬러와 전반적인 분위기에 반하지 않는 범위 내에서 활용한다.
②
모든 페이지에 걸쳐 일관성을 유지하기 위하여 폰트 타입, 서체크기, 글줄 간격, 칼라 등의 성격을 규정하는
CSS Style sheet가 적용되어 있다.
③
기본적으로 시스템 폰트는 자간 -1px 이다. 이미지 폰트는 가이드에 있는 자간을 따른다.
목록 버튼
H 19 * W 65 (free) /
Dotum/ 12px / 장평 : 100% / #134671
강조 버튼 (강조해야 할 버튼에 쓰임)
H 19 * W 65 (free) /
Dotum/ 12px / 장평 : 100% / #4f2500
일반 버튼
H 19 * W 65 (free) /
Dotum/ 12px / 장평 : 100% / #333333
덧글 입력버튼
H 45 * W 60 (free) /
Dotum/ 11px / bold / 장평 : 100% / #666666
덧글 보기/ 닫기버튼
H 18 * W 72 (free) /
Dotum/ 11px / 장평 : 100% / #7e7e7e
덧글에 덧글 입력버튼
H 16 * W 40 (free) /
Dotum/ 11px / 장평 : 100% / #666666
22
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
처음으로, 이전, 다음, 마지막으로 페이지 이동버튼
H 19 * W 19
페이지 이동버튼 (마우스오버, 현재페이지 표시)
H 17 * W 17 (free) /
Tahoma/ 11px / 장평 : 100% / #ffffff / bg : #ff8610
페이지 이동버튼 (마우스오버, 현재페이지 표시)
H 17 * W 17 (free) /
Tahoma/ 11px / 장평 : 100% / #666666
리스트 안에 버튼
H 19 * W 65 (free) /
Dotum/ 12px / 장평 : 100% / #666666
23
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
3) 기능성 버튼
①
해당 페이지의 메뉴컬러와 전반적인 분위기에 반하지 않는 범위 내에서 활용한다.
②
모든 페이지에 걸쳐 일관성을 유지하기 위하여 폰트 타입, 서체크기, 글줄 간격, 칼라 등의 성격을 규정하는
CSS Style sheet가 적용되어 있다.
③
기본적으로 시스템 폰트는 자간 -1px 이다. 이미지 폰트는 가이드에 있는 자간을 따른다.
접근성 버튼
검색버튼
푸터에 있는 서브메뉴 1 강조버튼 A
푸터에 있는 서브메뉴 1 강조버튼 B
검색버튼
H 19 * W free / Dotum / 12px / bold / 장평 : 100% /
#FFFFFF / bg : image
페이지 내 이동 버튼
H 18 * W 122 (free) / Dotum / 11px / 장평 : 100% /
#FFFFFF / bg : image
컨텐츠페이지 탭버튼
H 30 * W free /
Dotum / 12px / bold / 장평 : 100% /
Default : #666666
Over : #6b8317
Bg : 고정 image
24
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
컨텐츠페이지 강조 탭버튼
H 30 * W free /
Dotum / 12px / bold / 장평 : 100% /
Default : #666666
Over : #6b8317
Bg : 고정 image 변경
25
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
9. Button
4) 기타 버튼
하이퍼 링크를 대체하는 이미지 텍스트 버튼과 프로모션용 버튼 등이 있다.
기본적으로 시스템 폰트는 자간 -1px 이다. 이미지 폰트는 가이드에 있는 자간을 따른다.
헤더에 있는 유틸메뉴
YDIWebYGO140 / 10px / 자간 : -50/ 장평 : 95% /
#555555 / anti : smooth
푸터에 있는 서브메뉴 1
YDIWebYGO140 / 11px / 자간 : -25/ 장평 : 95% /
#545454 / anti : smooth
푸터에 있는 서브메뉴 2
YDIYGO350 / 10px / 자간 : -40/ 장평 : 95% /
#333333 / anti : smooth
프로모션 내부 링크버튼
H 63 * W free /
Yoon YGO 550_TT / 22px / 자간 : -80/ 장평 : 100% /
#FFFFFF / anti : sharp
프로모션 리스트항목 버튼
H 63 * W free /
YDIWebYGO140 / 13px / 자간 : -60/ 장평 : 100% /
#529ce2 #1a5d9c / anti : smooth
26
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
10. Etc
1) Footer
본문 하단에 위치하며 Copyright부분과 함께 사용한다.
함께 있는 서브메뉴는 기본형을 원칙으로 하되 강조형은 해당디자인과 포인트칼라를 선택하여 사용하도록 규정한다.
칼라의 밝기에 대한 조절을 금한다
개인보호정책 및 웹 마스터 이메일 주소, 회원을 필요로 하는 사이트에서는 회원 정보 등의 별도의 항목들을 추가하거나 삭
제할 수 있다. 단, 위의 1가지 항목은 필수로 넣어야 함을 규정한다.
2) 담당부서 표기
모든 컨텐츠 페이지에 공통으로 적용되는 부분이다.
부서, 전화번호, 이메일
icon size : 9px * 9px, Dotum / 12px / #666666
(text style) padding-left : 14px (아이콘과 텍스트의 간격 5px) / padding-right : 25px / left :15px
수정일
Dotum / 11px / #999999
27
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
A. Basic
10. Etc
3) 본문규칙
본문의 텍스트는 기본적으로 <br/> 태그를 사용하지 않는다.
문장이 끝날때 <br/>태그를 사용하며
문단이 끝날때는 <P>로 구분한다.
단, 텍스트의 흐름상 바끼지 말아야 할 줄바꿈이 생길때만 <br/>를 사용한다.
28
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
1. DTD 선언
1) DTD(Document Type Definition) 선언
모든 웹 문서는 적절한 문서타입을 명시해야 한다.
① 준수사항
모든 웹 문서는 올바르게 DOCTYPE(DTD)를 선언하여 문서의 Type을 반드시 명시해야 한다.
웹 문서는 선언된 DOCTYPE의 형식에 따라 문법을 준수하여 작성되기 때문에 DOCTYPE을 반드시 선언해야 하며, W3C
에서 제시하는 기본적인 웹 표준 필수 요소를 포함해야 한다.
DTD는 문서의 정보 모델을 구체적으로 서술한 것으로 엘리먼트 타입 선언, 어트리뷰트 리스트 선언, 엔티티 선언, 표기선
언 등 4개의 부류로 구성되어 있다.
DTD를 기준으로 하여 W3C에서 제공하는 문법 검사기(Validator)로 문서가 제대로 작성되어있는지를 확인할 수 있고, 이
를 사용하여 문법 검사 및 유지보수가 가능하다.
②
사용의 예
XHTML 1.0 Transitional
③
XHTML DTD를 선언의 특징 및 유의사항
문법적으로 엄격하게 구성되어야 한다.
XHTML은 잘못된 중첩을 허용하지 않으며, 잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 한다.
요소와 속성은 소문자로 표기되어야 한다.
XHTML의 마크업 ’요소’와 ’속성’들은 반드시 소문자로 표기
모든 태그는 종료태그를 갖는다.
속성 "값"들은 항상 따옴표로 감싸주어야 한다.
속성과 값의 단축표기를 허용하지 않는다.
비어있는 태그(콘텐츠를 담지 않는 태그)도 종료 되어야 한다.
a, applet, frame, iframe, img, map 요소의 name 속성은 폐기되었으며 다음 버전부터는 지원하지 않는다.
상기 마크업의 name 속성은 모두 id 속성으로 교체되어야 한다.
29
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
1. DTD 선언
2) 설명
① DTD의 선언으로 웹 브라우저에 DTD 정보를 알려주고, 브라우저 형식에 따라 콘텐츠를 적절하게 나타낼 수 있다. DTD로 선
언하는 HTML, XHTML 버전은 브라우저마다 해석하는데 차이가 있기 때문에 반드시 DTD를 선언해야 한다.
② DTD는 최상위 엘리먼트() 이전에 W3C에서 제공한 Doctype으로 선언되어야 하며 이를 이용하여 웹 문서를 구성해야 한다.
③ IE의 경우에는 표준 랜더링 방식과 다른 랜더링 모드를 유지해왔으며 하위버전의 브라우저 지원을 위해 IE는 호환 랜더링과
표준 랜더링 두 개의 랜더링 모드를 지원하고 있다. 호환 랜더링 모드는 IE 하위 버전을 위한 이전 IE 랜더링 방식을 유지하
는 모드이고, 표준 랜더링은 W3C CSS 스펙에 의거한 랜더링 모드를 의미한다. 새로 구축하는 사이트는 앞으로 표준 랜더링
방식을 사용하는 것이 좋다.
3) 기대효과
① DTD는 XML의 정보 모델링을 기술한 것으로 메타데이터 기술에 사용이 가능하다.
②
웹 문서의 DTD를 명확하게 명시할 경우, 브라우저는 이 DTD를 확인하여 웹 문서를 적절하게 표현할 수 있다. 브라우저마
다 랜더링 방식에 차이가 있기 때문에 DTD를 정확하게 명시하지 않을 경우, 브라우저의 콘텐츠나 기능이 정상적으로 나타
나지 않거나, 작동하지 않을 수 있다.
③
웹 문서의 유효성을 검사하는 Validator는 전적으로 DTD 선언에 의지하여 문서를 판별하게 되고, DTD 선언 및 명확한 문법
을 준수한 웹 문서는 모든 브라우저의 호환성을 보장받고 웹 개발이 용이하다.
④
명확한 DTD 선언은 문서의 템플릿 역할을 하여 구조화된 문서 작성이 용이하다.
⑤
명확한 DTD 선언은 웹 문서 표준 형식을 정의하는 기준이며, W3C에서 제공한 표준 문법을 준수하여 표준과 접근성을 보
장할 수 있다.
30
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
1. DTD 선언
4) 용어정의
① DTD : Document Type Definition (브라우저에 어떤 문서형 정의를 적용할 것인가를 선언)
② 웹 표준 : 표준 스펙을 잘 지키는 것뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어
(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식
③ 접근성 : 사용자의 신체적 특성이나, 지역, 지식의 정도, 기술, 기술적 환경, 체험 등과 같은 사항에 제한되지 않고 가능한 많
은 사용자가 불편함 없이 접근하고, 이용할 수 있는 제품 혹은 서비스를 만들고 이를 평가할 때 쓰이는 말이다. 즉, 어떠한
사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영 체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이
접근, 이용할 수 있는 것을 접근성이라 함.
31
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
2. 문법준수
1) 문법준수
명시한 문서타입에 맞는 문법을 준수해야 한다.
① 준수사항
웹 문서는 선언된 DTD에 따라 문법을 준수하여 문서를 구성해야 하며, 하위 브라우저의 호환성을 고려하여 의미 있는 마
크업으로 구성해야만 호환성 및 접근성을 보장받을 수 있다. 표준문법은 W3C 규격문 마다 조금씩 다른 구조의 태그들을
가지고 있으므로 웹 개발자들은 해당 상황에 맞는 표준 문법을 적용해야 한다.
웹 문서는 표준을 준수하여 향후 신기술의 접목과 통신상의 장점을 최대화시켜 정보를 제공한다.
② 사용의 예
정확한 문서 구조 준수
모든 요소는 완벽하게 중첩되어야 한다.
모든 속성 값은 인용 부호(' -or- ")로 묶어야 한다.
모든 요소와 속성은 소문자여야 한다.
모든 요소는 닫아야 한다.
모든 속성 값은 속성이 함께 선언되어야 한다.
모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
모든 script 내의 태그는 Escape 시켜야 한다.
모든 문서의 URL 정보 표기는 특수문자를 사용하지 않는다.
(예 : URL에서 '&'대신 '&'를 사용한다.)
32
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
2. 문법준수
③ Heading 사용의 준수 사항
머리글(HEAD) 엘레멘트
제목(TITLE) 엘레멘트
H1, H2, H3, H4, H5, H6 엘레멘트 : 순서를 건너뛰지 않도록 한다.
XHTML의 마크업 '요소'와 '속성'들은 반드시 소문자로 표기
DL, DT, DD 엘레멘트 : 정의 목록
CAPTION 엘레멘트 : 표의 제목 요소. table요소 바로 뒤에만 허용되며 한 번만 표시할 수 있다.
THEAD, TFOOT, TBODY 엘레멘트 : 열(row) 그룹
TH, TD 엘레멘트 : 표(Table)의 셀(cell)
FIELDSET와 LEGEND 엘레멘트 : 폼에 구조 추가
④ 기대효과
웹 표준 문법을 준수하면 접근성과 호환성이 보장된다. 표준 문법이 준수된 웹 문서를 구성할 경우, 문서 구조의 분리가 이
루어지고, 해당 페이지는 어떠한 접근기기(웹 브라우저 포함)에서 접근해도 일관성 있는 정보전달이 가능하다. 따라서 기
타 보조프로그램을 이용하여 접속하는 정보소외계층(장애인, 노약자)들도 해당 페이지의 정보를 이해하기 쉬워진다. 표준
문법을 준수한 웹 문서는 보조기기의 호환성을 보장받을 수 있다는 것을 의미한다.
표준 문법을 준수하여 웹 사이트를 제작할 경우, 사용자의 검색이나 기계적인 서치엔진에 대한 대응력이 좋아지기 때문에
필요한 정보를 찾아내어 서비스할 수 있다.
문서의 호환성을 확보할 경우, 다양한 기기에 대한 대응력을 상승 시킬 수 있으므로 자동화된 웹 시스템(시맨틱 웹)을 구
현할 수 있다. 이는 표준 준수를 통해서만 이루어질 수 있는 부분이며 W3C의 표준에 맞추어 설계할 경우 시맨틱 웹의 각
종 기술 및 앞으로의 지원될 향후 기술을 적용하는데 무리가 없다. 웹 표준을 준수하지 않은 비표준 사이트는 자동화 처리
를 하지 못하고 수작업으로 처리 해야만 하는 인력과 비용의 낭비가 발생된다.
33
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
2. 문법준수
⑤ 용어정의
HTML : Hypertext Markup Language (SGML에서 비롯된 하이퍼텍스트를 표기하는 언어)
XHTML : Extensible HyperText Markup Language (HTML과 동등한 표현 능력을 지닌 마크업 언어로,HTML보다 엄격한
문법)
XML : Extensible Markup Language (W3C에서 다른 특수 목적의 마크업 언어를 만드는 용도로 권고하는 다목적 마크업
언어)
Validator : 웹 문서가 표준안에 따라 만들어졌는지, 접근성에 대한 고려가 이루어졌는지의 유효성 검사기.
(검사 도구는 여러 가지 종류가 현재 서비스 중이다.)
메타데이터 : 데이터를 위한 데이터이다. 어떤 데이터 즉 구조화된 정보를 분석, 분류하고 부가적 정보를 추가하기 위해 그
데이터 이후에 함께 따라가는 정보
34
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
3. 문자셋 선언
1) 문자셋(charset) 선언 및 자연어 명시
모든 페이지는 사용할 인코딩방식을 표기해야 한다.
현재 문서의 주된 자연어를 명시한다.
① 준수사항
웹 페이지의 모든 문서는 적절한 인코딩 방식을 지정해야 한다. 인코딩방식을 표현하지 않아도 일부 웹 브라우저는 스스로
인코딩 방식을 판별하는 기능을 포함하고 있기 때문에 정상적으로 보이는 것처럼 판단하고 지나칠 수 있으나, 표준적인 방
식으로 인코딩을 명시해주는 것이 좋다.
② 사용의 예
문자셋(charset) 선언
XHTML 문서에서는 문자 인코딩은 meta http-equiv문에 반드시 명시되어야 한다. 만약 XML 문서에 인코딩이 기술되어
있지 않다면, 상위 프로토콜에서 미리 지정되지 않는 한, XML 해석기는 UTF-8이나 UTF-16으로 간주한다.)
UTF-8
• 권장하는 하는 인코딩
• 반드시 협업부서와 협의과정을 거쳐야 한다.
• 데이터 베이스의 형식을 고려하여 사용한다.
euc-kr utf-8
인코딩 사용이 불가한 것으로 판정되는 경우 사용한다.
35
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
3. 문자셋 선언
③ 자연어 명시
XHTML
• 한국어
• 영어
• 일본어
• 중국어
HTML
• 한국어
• 영어
• 일본어
• 중국어
④ 기대효과
글로벌 웹서비스를 위해서는 다양한 언어로 웹 페이지를 구성해야 하는데, 이 때 UTF-8 같은 웹 페이지 인코딩방식을
사용해서 한다면 한 페이지에서 여러 가지 언어를 서비스 할 수 있다.
⑤ 용어정의
인코딩 : Encoding (문자들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화하는 방법)
캐릭터셋 : Character set (문자셋은 정보를 표현하기 위한 글자들의 집합을 정의)
시멘틱 웹 : Semantic Web (컴퓨터가 정보자원들(웹 문서, 파일,서비스) 사이에 연결되어 있는 의미를 컴퓨터가 이해하고
논리적 추론까지 할 수 있는 차세대 지능형 웹)
UTF-8 : Unicode Transformation Format (유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나이다.)
36
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
4. 구조와 표현의 분리
1) 구조와표현의분리
논리적인 마크업을 구성하여 구조적인 페이지를 만들어야 한다.
① 기대효과
웹 표준을 준수한 문서의 파일용량은 표준을 준수하지 않은 파일의 용량보다 파일용량을 절감할 수 있다. 웹 페이지 관리
자에게는 서버부하를 절감시켜 유지보수 비용과 웹 문서 개발비용을 줄일 수는 방법을 제시해주며, 재생산성의 확대 그리
고, 사용자에게는 보다 빠른 페이지의 접속으로 접근성이 보장된다.
XHTML 기반으로 웹 문서를 구조적으로 표현하게 되면 XML 포맷으로의 확장이 용이하다. 이는, XHTML이 HTML보다 좀
더 명확하고 구조적인 특징을 가지고 있기 때문이다.
페이지의 경량화에 따른 가독성이 높아지며, 기계적인 접근이 용이해지며, 이는 XHTML 표준문법을 준수하면 자동적으로
구조화된 문서를 생성할 수 있다.
② 용어정의
• 마크업 : Markup Language (태그 등을 이용하여 데이터의 구조를 명기하는 언어)
• DOM : Document Object Model (객체 지향 모델로써 구조화된 문서를 표현하는 형식)
• 스크립트의 비표준 확장 사용은 배제되어야 한다.
• 스크립트 비 사용자를 위한 대체텍스트나 정보를 제공해야 한다.
37
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
4. 구조와 표현의 분리
③ 준수사항
• 웹 서비스에 사용된 클라이언트 사이드의 스크립트 언어는 ECMAScript 3rd(ECMA-262)를 사용하며, 사용 시 비표준 문
법으로의 확장사용을 유의한다.
• 비표준 스크립트는 특정 브라우저에서 정상적으로 작동하지 않기 때문에 표준 스크립트(ECMAscript)를 사용하여 브라우
저 호환성을 보장할 수 있다.
• Firefox에 확장기능인 Firebug를 이용하여 보여 지는 스크립트오류 알림 화면. 표준 규격에 맞지 않거나 정상적인 동작이
불가능한 스크립트의 내역이 표시 되는 것을 볼 수 있다. 이는 브라우저마다의 동작하거나 그렇지 않은 스크립트의 사용으
로 웹 접근성의 기능을 떨어뜨린다.
• 일부 사용자는 브라우저에서 스크립트가 지원되지 않는 환경이거나 스크립트를 사용하지 않는 경우가 있으므로, 스크립트
가 정상적으로 작동하지 않을 경우에도 동등한 정보를 제공할 수 있거나 스크립트 비 사용자를 위한 대체정보 또는 링크를
제공해야한다
38
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
5. 동작의 기술 중립성 보장
1) 동작의 기술 중립성 보장
① 사용의 예
<input>
input 요소는 label 요소 또는 title 속성을 이용하여 설명한다.
스크린리더 사용자는 주변 맥락에 대한 이해 없이 각 요소에 독립적으로 접근해도 폼을 이해할 수 있게 된다.
전화번호
<input type="text" id="num1" name="num1" title="지역번호" />
<input type="text" id="num2" name="num2" title="국번" />
<input type="text" id="num3" name="num3" title="가입자번호" />
통합검색
<select id="category" name="category">
<optgroup label="검색">
<option value="num1">통합검색</option>
<option value="num2">관련사이트</option>
<option value="num3">웹문서</option>
<option value="num4">새소식</option>
</optgroup>
</select>
<input type="text" id="query" name="query" title="검색어 입력" size="20" accesskey="s" />
<input type="image" src="/portal/images/btn/btn_search_01.gif" alt="검색" />
39
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
5. 동작의 기술 중립성 보장
② 기대효과
• 생성된 기능에 대한 품질관리를 위하여 Mozilla Firefox에 탑재된 스크립트 디버거를 이용할 수 있다.
• 생성된 기능에 대한 품질관리는 다양한 디버거 툴들을 이용하여 테스트 및 스크립트 디버거로 활용할 수 있다.
• 표준 웹 개발 방식이 숙련되면 여러 가지 브라우저를 고려하지 않아도 되므로 생산성이 제고 된다.
• 스크립트 비 지원 브라우저의 사용자, 비 PC 단말기에서 웹 서비스를 사용하는 경우 등 다양한 사용자에게 정보제공 가능
• 웹 사이트에서 스크립트를 사용하고 있을 경우, 스크립트를 지원하지 않는 브라우저나 스크립트를 해제한 상태에서도 동
등하게 정보를 전달할 수 있도록 한다.
• <noscript>를 사용하여 스크립트가 정상적으로 작동하지 않을 경우, 스크립트에 대한 대체 정보를 제공할 수 있음
③
용어정의
• ECMAScript : ECMA international의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어
• 스크립트 : 사용자 액션에 따른 반응 및 동적인 문서 구조 변경 등 스크립팅(Scripting)이라고 불리우는 클라이언트 프로그
램
• 일반적으로 자바 스크립트(JavaScript) 또는 VBScript 등으로 불리는 이러한 스크립팅을 통한 제어를 동작(Behavior) 이
라고 통칭
40
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
6. 브라우저 호환
1) 브라우저의 호환
① 브라우저 호환은 첫째, 동일한 콘텐츠를 제공하는 것을 의미하며 둘째, 가급적 동일한 화면 뷰를 얻는 것이다.
② 플러그인은 다양한 웹 브라우저를 고려해야 한다.
③ 제공되는 콘텐츠는 다양한 브라우저 사용자도 접근할 수 있어야 한다.
④ 다양한 인터페이스(입력기기)로 웹 사이트를 이용할 수 있어야 한다.
⑤ 제공되는 미디어는 범용적인 포맷을 사용해야 한다.
⑥ 인증기능은 다양한 브라우저에서 사용 가능해야 한다.
⑦ 정보를 열람하는 기능은 다양한 브라우저에서 사용 가능해야 한다.
⑧ 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 맥킨토시 중 2개 이상의 운영체제를 지원해야 한다.
⑨ 준수사항
페이지에서 제공되는 플러그인 들은 (Flash, ActiveX, Realaudio 등) 중에서 호환성이 보장되지 않는 플러그인 사용을 지
양
부득이하게 필요할 경우, 운영체제 및 브라우저 간 호환성을 고려하여 제공
홈페이지의 메뉴들은 다양한 환경의 사용자를 고려해야 한다.
주 메뉴를 플래쉬로 구현한 경우, 반드시 브라우저간의 호환성테스트를 통해 주 메뉴가 정상적으로 접근가능한지 확인한
다.
이미지로 만든 주 메뉴의 경우, 스크립트를 사용하지 않는 환경에서도 정상적으로 메뉴에 접근이 가능한지 확인한다.
이미지로 만든 주 메뉴의 경우, 이미지를 사용하지 않는 환경에서도 정상적으로 메뉴에 접근이 가능한지 확인한다.
키보드(키보드 외에 기타 입력 디바이스 포함) 사용하여 홈페이지의 모든 메뉴에 대한 사용이 가능한가를 확인한다.
페이지에 제공되는 미디어는 특정 운영체제에 종속적인 포맷사용을 최소화 하고, 부득이하게 특정 운영체제에 종속적인
형식의 미디어 포맷을 제공할 경우, 호환성을 고려하여 다양한 형식의 미디어 포맷을 함께 제공한다.
회원가입에 사용되는 인증 및 실명인증 기능은 운영체제에 무관하게 정상작동 해야 한다.
41
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
6. 브라우저 호환
인증서 서비스는 다양한 운영체제 및 브라우저 사용자를 고려해야한다.
부득이한 비표준 기술사용의 경우에는 반드시 다른 브라우저사용자도 열람할 수 있는 별도의 인터페이스를 제공해야 한다.
일반 웹 페이지가 아닌 별도의 문서출력용 프로그램을 이용한 정보 열람 기능을 제공하는 경우에는 운영체제에 독립적인
프로그램을 이용해야 한다.
부득이한 비표준 기술사용의 경우에는 반드시 다른 브라우저사용자도 열람할 수 있는 별도의 인터페이스를 제공해야 한다.
웹 페이지로 구성된 정보 이외의 포맷을 통한 콘텐츠제공의 경우(Word파일, HWP파일, Excel파일 등)에는 반드시 뷰어 프
로그램을 해당 페이지에서 제공하며, 제공 시에는 다양한 운영체제(윈도우, 리눅스, 맥킨토시 등)의 사용자를 고려하여 프
로그램을 제공한다.
42
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
7. 키보드 운영
1) 키보드운영
키보드만으로 콘텐츠가 제공하는 모든 기능을 이용할 수 있어야 한다.
① 멀티미디어 콘텐츠(동영상, 오디오 등)를 이해할 수 있도록 자막 또는 원고 등을 제공해야 한다.
※ 실시간 방송의 경우는 평가에서 예외로 함
② 사용의 예
Tab Menu가 있는 주요 뉴스
키보드만으로 모든 콘텐츠를 제어할 수 있도록 설계 해야한다. 마우스에 의존적인 이벤트는 이에 대응하는 키보드 이벤트
를 추가로 작성 한다. 단, 대부분의 현대적인 브라우저에서 onclick 이벤트는 onkeypress 액션과 같이 반응하도록 설계되
어 있으므로 onkeypress 이벤트는 생략이 가능 하다.
셀렉트 메뉴를 이용한 이동방법
<select>를 이용한 페이지 또는 사이트의 이동은 일반 사용자에게는 다소 불편하더라도, 선택 시 바로 이동하는 것이 아니
라, 선택 후 이동 버튼을 클릭한 후 이동할 수 있도록 구현한다.
43
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
8. 반복 네비게이션
1) 반복 네비게이션
반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.
① 준수사항
CSS를 제거 또는 HTML 코드상에서 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.
자바스크립트로 링크를 만드는 경우 준수하지 못하는 것으로 판단한다.
②
사용의 예
콘텐츠를 선형화 하여 인식할 경우 상단의 네비게이션은 매 페이지에서 반복되기 때문에 이를 건너뛸 수 있는 스킵 네비게
이션 기능을 제공해 주어야 한다. 스킵네비게이션은 HTML코드 상에 콘텐츠로의 앵커를 제공하고 CSS로 이를 감추어 줌
으로 써 구현할 수 있다.
44
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
9. 데이터테이블
1) 데이터테이블
데이터 테이블을 제공할 경우, 테이블의 내용을 이해할 수 있는 정보(제목, 요약정보 등)를 제공해야 한다.
데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.
① 데이터 테이블의 태그와 속성
데이터 테이블을 이용해서 콘텐츠를 제공할 때에는 의미에 맞는 태그를 사용하여서 테이블의 정보를 전달 해야한다. 데이
터 테이블을 구성하는데 사용되는 태그와 속성들은 다음과 같다.
1.
과 summary
- 은 표의 제목을 나타내고 summary는 표의 내용에 대한 요약을 제공한다.
2.
,,
- 표의 행단위 그룹핑을 위해서 사용한다.
3.
과
- 표의 열단위 그룹핑을 위해서 사용한다.
4.
과
- 표의 머릿글 셀을 지정한다. 표의 머릿글 셀은 scope, abbr 과 같은 속성을 동반한다.
- scope 속성은 사용을 강력하게 권장한다.
- scope : 요소에 동반되는 속성으로서 현재의 셀이 어느 셀의 제목인지 그 범위를 명시한다..
- scope 속성의 값 : col, colgroup, row, rowgroup
- 요소에 동반되는 속성으로서 포함하고 있는 콘텐츠에 대한 약식표기가 가능한 경우 약어를 표기하는데 사용한다. 셀
의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 속성에 표기된 약어를 읽게 된다. abbr 속성은 필요에 따라 사용
한다.
5.
과
- 표의 제목을 나타내는 칸을 표시하기 위해서 를 사용하고 에 따른 데이터는 를 이용한다.
45
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
9. 데이터테이블
6.
Headers
- 헤더 와 의 데이터를 연계해주는 속성이다. headers 속성을 이용하면 표의 한 줄을 왼쪽에서 오른쪽으로 읽는 대신
논리적인 순서로 헤더와 데이터를 스크린 리더로 읽을 수 있다.
- 아래와 같은 경우 스크린 리더는 헤더 th의 id="table_subject", id="table_name"와 td headers="table_subject"
headers="table_name"의 데이터를 연계하여 "제목 : 아름다운 서울입니다. 이름 : 홍길동"으로 읽어준다. 즉, id의 헤더
와 headers의 데이터를 연결하여 읽어준다.
46
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
10. 반응시간의 조절
1) 반응시간의 조절
이용에 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.
※ 예외 : 경매, 실시간 게임 등과 같이 시간제한이 필수적인 콘텐츠
① 준수사항
자동으로 갱신되는 콘텐츠의 경우 사용자가 이를 제어하고 콘텐츠를 확인할 수 있는 수단을 제공해야 한다.
마우스를 올리거나 키보드 포커스 시에 멈추는 경우라 하여도 사용자가 이미 지나간 콘텐츠를 확인 할 수 있는 수단이 없
으면 준수하지 못한 것으로 판단한다.
②
사용의 예
시간에 따라서 자동적으로 변하는 콘텐츠의 경우 이를 사용자에게 미리 알리고 이 시간 제한 기능을 사용자가 스스로 제어
할 수 있게 해 주어야 한다. 예를 들어서 팝업창으로 메시지를 제공하고 5초가 지난 후에 자동으로 닫히는 경우 메시지 내
용을 사용자가 5초안에 내용을 이해하지 못할경우 사용자가 콘텐츠를 이해하지 못하게 되기 때문에 사용자가 시간을 제어
할 수 있는 기능을 제공해 주어야 한다.
47
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
11. 온라인 서식구성
1) 온라인 서식구성
이용에 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.
※ 예외 : 경매, 실시간 게임 등과 같이 시간제한이 필수적인 콘텐츠
① 체크리스트
온라인 서식을 제공할 경우, 레이블(<label>)을 제공해야 한다.
② 서식들간의 연결정보 제공
서식을 구성할 때에는 용도에 맞는 태그를 사용하고 각 서식들간의 연결 정보를 제공하여 제작하여야 한다.
1. <label><label>은 사용자 입력 콘트롤과 입력 콘트롤의 제목을 연결시켜주는 역할을 한다. <label>과 콘트롤을 연결
하기 위해서는 <label>의 for와 콘트롤의 id를 동일하게 맞추면 된다.
<label for="main-login-id">아이디</label> <input id="main-login-id" type="text" / >
2. <fieldset>, <legend><fieldset>은 폼 콘트롤 들을 그루핑 하는 데에 사용되고 각각의 그루핑된 콘트롤들은 <legend>
을 사용하여 제목을 설정한다.
<form action="/login.jsp" method="post">
<fieldset>
<legend>로그인</legend>
<label for="user-password">비밀번호</label>
<input id=""user-password" type="password" name="password" />
<input type="submit" value="로그인" />
</fieldset>
</form>
48
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
B. HTML
11. 온라인 서식구성
③
사용의 예
텍스트 크기
- KADO의 품질마크 인증 기준에 의하면 판독하기 쉬운 텍스트의 충분한 최소 크기는 12px으로 정의하고 있다. 11px이하
의 텍스트 크기는 최소한으로 사용한다.
이미지 맵
- KADO의 품질마크 인증 기준에 의하면 판독하기 쉬운 텍스트의 충분한 최소 크기는 12px으로 정의하고 있다. 11px이하
의 텍스트 크기는 최소한으로 사용한다.
서버측 이미지 맵을 사용할 경우 포인팅 기기(마우스, 터치스크린 등)외의 기기로는 사용이 불가능하기 때문에 키보드로 접
근 가능한 대체 기능을 제공해야 한다.(지도와 같이 복잡한 이미지 맵을 구현할 경우 자주 사용됨)
<img src="toplink.png" alt="" width="137" usemap="#toplinkmap" />
<map name="toplinkmap" id="toplinkmap">
<area shape="rect" coords="0,0,23,9" href="#" alt="Home" />
<area shape="rect" coords="40,0,75,9" href="/publish/sitemap.htm" alt="Site Map" />
<area shape="rect" coords="90,0,137,9" href=mailto:[email protected] alt="Contact us" title="메일 보내기" />
</map>
서버측 이미지맵의 경우 <img> 요소에 ismap 속성을 이용하고 링크영역의 좌표정보가 서버에 존재한다. 마우스와 같은 포
인팅 기기로만 사용할 수 있고 키보드로 접근이 불가능 하다. 이에 서버측 이미지맵을 사용할 경우에는, 맵에 사용된 링크
목록이 제공된 경우 접근성이 있다고 판단한다. 단, 키보드로 접근가능한 대체 링크가 제공되지 않을 경우 접근성이 없는 것
으로 판단한다.
<a href="server-image-map.jsp">
<img src="http://mltm.go.kr/images/common/quick_title.gif" ismap="ismap" alt="Quick Menu"/>
</a>
49
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
1. CSS 파일의 생성
1) CSS 파일의 생성규칙
① CSS 파일의 수는 최소한으로 유지한다.
② 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 CSS파일은 common.css 로 파일명을 정한다.
③ 메뉴 섹션(또는 카테고리)별로 폴더를 분리하여 각 섹션별 폴더에서 *.css파일을 추가한다.
common.css : html 기본속성의 변경과 공통사항, 전체적 레이아웃 구조
content.css : 특정페이지에만 쓰이는 속성
content_ie6.css : IE6브라우져 버그를 위한 속성
layout.css : 컨텐츠에 쓰이는 레이아웃 디자인 속성
print.css : 팝업에서 쓰는 레이아웃과 컨텐츠
reset.css :
table.css :
table_ie6.css :
50
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
2. 외부 CSS 불러오기
1) 외부 CSS 불러오기
① 외부 CSS 파일을 HTML 문서로 불러오는 방법으로써 link와 import가 있다.
② 본 개발가이드에서는 link방식만을 사용한다.
③ import방식은 Internet Explorer 브라우저에서 image요소보다 CSS를 늦게 렌더링하는 결함이 있으므로 사용하지 않는다.
④ 미디어 타입을 지정하지 않는 경우 기본값이 'all' 이 되므로 별도의 미디어 타입은 지정하지 않는다.
(X) Internet Explorer 브라우저에서 image보다 CSS를 늦게 파싱하는 결함이 있으므로 사용하지 않음
(O) HTML 문서에서 CSS 파일을 불러올 때 HTML 헤더에 표시할 내용
(O) CSS 문서에서 CSS 파일을 불러올 때 CSS 코드 첫 줄에 표시할 내용
@import url("default.css");
51
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
3. 문자셋 선언
1) 문자셋(Charset) 선언
① External 형식의 CSS 문서에는 HTML 문자셋과 동일하게 문자셋 정보를 명시한다.
② 영문 이외의 서체이름을 사용하는 경우 웹 브라우저에서 정확한 서체표현이 가능하고 각종 저작도구에서 문자값이 깨지지
않는다.
③ 문자셋 선언은 문서의 첫 줄에 공백없이 삽입되어야 한다.
④ 필수적으로 요구되는 사항은 아니지만 강력하게 권장된다.
@charset "utf-8";
@charset "euc-kr";
52
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
4. CSS 선택자 선언순서
1) CSS 선택자 선언순서
쓰임새가 전역적인 것으로부터 시작하여 지역적인 것 순으로 선언한다.
① Type Selector
HTML 요소의 초기화를 선언합니다.
*, html, body, img, fieldset, hr, legend, li, a와 같은 요소들이 정의 된다.
② Layout Selector
전역 레이아웃을 선언합니다.
#wrap, #header, #container, #content, #footer, #colgroup,#sub_content... 와 같은 전역 레이아웃이 정의 된다.
③ Class Selector
전역 class를 선언합니다.
textarea, input, form, .radio, .checkbox... 와 같은 전역 class 요소들이 정의 된다.
④ Etc
기타 요소들을 전역 스타일로부터 지역 스타일에 이르는 순으로 선언 한다.
53
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
5. CSS 속성선언
1) CSS 속성선언
쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여 레이아웃과 무관한 것 순으로 아래와 같이 선언한다. 각 속성들과 짝
을 이루는 관련 속성들은 etc로 분류하여 따로 기술하지 않고 되도록 함께 기술한다. 예로 position 속성과 left, right , top,
bottom 속성은 서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술한다.
display : 표시
overflow : 넘침
float : 흐름
position : 위치
z-index : 정렬
width & height : 크기
margin & padding : 간격
border : 보더
font : 폰트
background : 배경
etc : 기타
54
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
6. CSS 코드 표본
1) CSS 코드 표본
#wrap : 페이지 (#header, #container, #footer) 전체지정
#header : 로고를 포함한 상단 영역 (.Search, #gnb 포함) 지정
#container : #header 와 #footer 를 제외한 본문 전체 지정
#footer : &
를 포함한 하단의 보조 네비게이션 영역 지정
#gnb : 방송통신대학교공통 네비게이션 (Global Navigation Bar) 지정 (#header 에 종속)
.search : 검색영역을 지정 (#header에 종속)
.snb : #gnb를 제외한 측면 (Side Navigation Bar) 네비게이션 영역 지정 (#container 에 종속)
.contents : 반드시 #container 내부에 종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠영역
지정
.quick : 바로가기 메뉴지정 (#container에 종속)
55
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
7. 추가 스타일 작성을 위한
CSS 코드참조
1) 추가 스타일 작성을 위한 CSS 코드참조
/*header*/
#header {position:relative; width:980px; height:170px;}
#header h1 {}
.search {position:absolute; left:170px; top:35px; width:450px;}
.search .blue_window {}
.search .search_link {}
56
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
7. 추가 스타일 작성을 위한
CSS 코드참조
/*gnb*/
#gnb {position:absolute; top:98px; width:980px; height:40px; z-index:5;
background:url('..//portal/images/common/gnb_bar.gif') no-repeat;}
#gnb #left {}
#gnb #gnb1,
#gnb #gnb2,
#gnb #gnb3,
#gnb #gnb4,
#gnb #gnb5 {}
#gnb #gnb1 {}
#gnb #gnb2 {}
#gnb #gnb3 {}
#gnb #gnb4 {}
#gnb #gnb5 {}
#gnb ul ul {}
#gnb #gnb101 {}
#gnb #gnb201 {}
#gnb #gnb301 {}
#gnb #gnb401 {}
#gnb #gnb501 {}
#gnb li li {}
#gnb li li a:link, #gnb li li a:visited {}
#gnb li li a:hover, #gnb li li a:active {}
57
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
7. 추가 스타일 작성을 위한
CSS 코드참조
/*container*/
#container {width:980px;}
.snb {float:left; width:157px; border:1px solid #bacfe0; padding:4px; background-color:#dbe7f0;}
.snb_box {}
.snb_box ul {}
.snb_box ul ul {}
.snb_box li li a:link, left_box li li a:visited {}
.snb_box li li a:hover, left_box li li a:active {}
.snb_line {}
.center {width:633px; margin-left:4px; float:left;}
.contents {}
.contents .loc {}
.contents .con_title {}
.contents .con_title dt {}
.contents .con_title dd {}
.contents .con_title .title_go {}
#contents_book {}
.quick {width:171px; float:left; margin-left:4px}
.quick .quick_menu {}
.quick .quick_menu .h60 {}
.quick .quick_menu .h120 {}
.quick .quick_menu .h110 {}
.quick .quick_menu dt {}
.quick .quick_menu dd {}
58
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
C. CSS
7. 추가 스타일 작성을 위한
CSS 코드참조
/*footer*/
#footer {clear:both; position:relative; width:980px; height:120px; border-top:1px solid #dbdbdb; marginbottom:10px;}
#footer .f_policy {}
#footer .f_policy li {}
#footer .f_policy li.nb {}
#footer .f_policy li a:link, #footer .f_policy li a:visited {}
#footer .f_policy li a:hover, #footer .f_policy li a:active {}
#footer .f_line {}
#footer .f_area {}
#footer .f_mark {}
#footer .f_mark li {}
59
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
1. 로고
헤더로고 : W 177px * H 31px
푸터로고 : W 152px * H 27px #grey
로고는 방송대 UI 표준화 규정집에 따른 규칙을 적용한다.
2. 배너
메인과 서브에 노출되는 배너들은 아래의 규정을 따라 적용한다.
1) 프로모션 배너
메인에 노출되는 배너로서 아래의 네가지 형태와 동일한 폼으로 적용한다.
W 114px * H 87px
YDIYGO330, #fff002, #ffffff
Bg : #7c86bb, #96b7e8,
#4778ca, #6894e6
2) 주요링크 바로가기 배너
이미지와 텍스트 또는 텍스트로 구성되는 바로가기용 배너이다.
W 238px * H 67px, W 118px * H 67px,
YDIYGO350, 14px, #303030, 장평 95%, 자간 -50
YDIYGO350, 10px, #8e8e8e, 장평 95%, 자간 -50
anti : smooth, 이미지에는 외각라인없이 작업
60
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
3. 지역대학 배너 정의
타입별 메인과 서브에 노출되는 배너들은 아래의 규정을 따라 적용한다. (공통적으로 외각라인 없이 지정사이즈로 작업)
1) 메인 바로가기 배너 – TYPE A.
W 180px * H 57px
Yoon YGO 550_TT, #666666, 12px, 자간 -10, 장평 95%, smooth
Yoon YGO 550_TT, #999999, 10px, 자간 0, 장평 100%, smooth
Bg : #fafafa, 아이콘은 그레이톤 칼라의 평면형
2) 메인 바로가기 배너 – TYPE B
W 150px * H 47px
Yoon YGO 530_TT, #1186bb, 12px, 자간 -40, 장평 100%, sharp
YDIYGO350, #959595, 10px, 자간 -25, 장평 95%, crisp
Bg : #ffffff
3) 메인 바로가기 배너 – TYPE C
W 160px * H 47px
Yoon YGO 530_TT, #4c61a0, 12px, 자간 -40, 장평 100%, sharp
YDIYGO350, #8e8e8e, 10px, 자간 -50, 장평 95%, crisp
Bg : #fafafa
61
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
4. 학과사이트 배너 정의
타입별 메인과 서브에 노출되는 배너들은 아래의 규정을 따라 적용한다. (공통적으로 외각라인 없이 지정사이즈로 작업)
1) 메인 바로가기 배너 – TYPE A.
W 193px * H 63px
YDIYGO340, #353a3d, 12px, 자간 -10, 장평 100%, smooth
Yoon YGO 550_TT, #6f6f6f, 10px, 자간 0, 장평 100%, smooth
Bg : #ffffff, 아이콘은 실사이미지
2) 메인 바로가기 배너 – TYPE B
W 145px * H 49px
Yoon YGO 550_TT, #759d38, 13px, 자간 0, 장평 100%, smooth
Yoon YGO 550_TT, # 969696, 10px, 자간 0, 장평 100%, smooth
Bg : #ffffff
3) 메인 바로가기 배너 – TYPE C
W 104px * H 43px
Yoon YGO 550_TT, #2f99c9, 13px, 자간 0, 장평 100%, sharp
YDIYGO350, #8e8e8e, 10px, 자간 -50, 장평 95%, crisp
Bg : #ffffff
62
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
5. 이미지 컷팅 규칙
이미지는 표현하고자 하는 영역 외에 불필요한 여백을 지니지 않도록 컷팅 한다. 화면 배치를 위한 여백, 또는 링크의 마우스 접
근 영역을 확장하려는 경우에는 CSS를 이용한다.
이와 같이 불필요한 영역이 없도록 커팅한다
이처럼 여백이 있는 상태로 커팅하지 않도록 한다.
클릭 가능한 버튼의 최소 크기는 너비와 높이가 18ox 이상이어야 한다. 버튼 이미지의 너비와 높이가 18px 미만인 경우 CSS를
이용하여 클릭 가능한 영역을 확장한다. 클릭 가능한 영역이 다른 UI와 겹치거나 인라인 형식으로 존재하는 경우에는 예외가 허
용된다. 손의 사용능력이 원활하지 못한 사람과 모바일 브라우징 장치의 접근성을 향상시켜준다.
63
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
6. 대체텍스트
1)
체크리스트
텍스트가 아닌 컨텐츠에는 모두 대체 텍스트가 제공되어야 한다.
정보가 있는 컨텐츠를 배경 이미지로 사용 할 경우, 배경의 컨텐츠를 이해할 수 있는 대체 콘텐츠를 제공해야 한다.
2)
준수사항
텍스트 아닌 콘텐츠는 원문과 동등한 설명력을 지닌 대체 텍스트를 제공해야 한다.
문자 아닌 형태의 이미지는 문자로 풀어서 설명한다.
정보가 있는 콘텐츠를 배경 이미지로 사용하지 않아야 한다.
썸네일 이미지를 적절하게 대체 할 수 있는 대체텍스트를 제공해야 한다. 이는 기획 단계부터 고려하여 설계되어야 한다.
3)
사용예시
텍스트가 아닌 대표적인 콘텐츠로는 <img>, <inupt>, <object> 등이 있으며 최대한 원문과 동일한 수준의 대체 텍스트를
제공한다.대체 텍스트의 분량이 많은 경우 이미지를 텍스트 단락에 따라 여러 조각으로 나누는것을 권장한다.
정보가 있는 콘텐츠를 배경 이미지로 사용하지 않아야 한다. 배경 이미지에 텍스트가 포함된 경우 텍스트는 따로 분리하여
전경 이미지로 처리 한다.
이미지는 원문과 동등한 설명력을 지닌 대체 텍스
트를 제공해야 한다.
썸네일 이미지를 적절하게 대체 할 수 있는 대체텍
스트를 제공해야 한다.
64
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
D. IMAGE
7. 색상
1)
체크리스트
색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이 외에도 명암이나 패턴으로 콘텐츠 구분이 가능해야 한다.
2)
준수사항
전경색과 배경색은 충분한 대비를 가지고 있어야 한다.
색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
3)
사용예시
색상에만 의존해서 정보를 구분하는 콘텐츠를 제공할 경우 색상을 구분 할 수 없는 환경에서는 정확한 정보를 제공 할 수
없기 때문에 피해야 한다.
색상 외에도 패턴을 넣거나 각 항목 별로 텍스트를 제공하여 구분 할 수 있도록 해야한다
색상으로 표현된 시각적인 정보에는 색상표현과 무관하게 인지 가능한 텍스트 정보를 제공하고 의미 있는 대체 텍스트를
제공한다.
65
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
1. HTML 파일 네이밍
1) HTML 파일 네이밍
① Global Navigation Bar 영역
메인 페이지 : 사이트 루트 디렉토리에 "index.jsp(-or- index.html)"을 생성한다.
서브 페이지 : 사이트 루트 디렉토리에 파일 그룹(메뉴그룹)을 이해할 수 있는 이름의 폴더를 생성하고, "디렉토리명
_01.html(-or- jsp)"로 명명한다.
예) 메인 페이지 /index.jsp
서브 페이지
66
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
2. CSS 파일 네이밍
1) Global Navigation Bar 영역
① Global Navigation Bar 영역
CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수
는 최소한으로 유지한다.
사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css으로 지정한다.
예) 전역 스타일을 포함하는 파일 /css/common/base.css
레이아웃 스타일을 포함하는 파일 /css/layout/layout.css
67
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
3. Id/Class 선택자 선언규약
1) Id/Class 선택자 선언규약
a.
#wrap : 페이지(#bp_header, #bp_container, #bp_footer) 전체 지정.
b.
#header : 로고를 포함한 상단 영역(# bp_search, .bp_tnb, .bp_gnb) 지정.
c.
#container : #header 와 #footer 를 제외한 본문 전체 지정.
d.
#footer : 를 포함한 하단의 보조 네비게이션 영역 지정.
e.
.bp_gnb : 공통 네비게이션(Global Navigation Bar) 지정.(#header 에 종속)
f.
.visual : 비주얼 이미지 영역 지정. (# bp_container 에 종속).
g.
.bp_tnb : 실국/본부 (Local Navigation Bar) 네비게이션 지정.(#header 에 종속)
h.
#bp_search : 현재 페이지의 검색영역을 지정.
i.
#bp_content : 반드시 #container 내부에 a종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠 영역
지정.
j.
#content :반드시 #container 내부에 종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠 영역 지정.
k.
보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것 권장.
l.
'*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미.
68
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
4. Image 네이밍 규약
1) Image 네이밍 규약
① HTML 주석 가이드
아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있다.
아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않는다.
"*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있다.
네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순이다.
동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 한다.
명명 순서 : 큰 범주의 분류에서 작은 범주의 분류 순으로 명명한다. 분류는 가급적 3단계를 초과하지 않도록 한다. '대분
류_ 중분류_소분류' 또는 '형태-의미-상태' 순으로 명명한다.
예) on_tab1.gif (X), tab_on.gif (O) 탐색기에서 탭메뉴끼리 정렬되므로 빠르게 찾을 수 있다.
단어 선택 : 최대한 직관적이어야 하고 짧을수록 좋다. 가능하다면 이미지의 대체텍스트 역할을 수행할 수 있는 네이밍을
우선적으로 고려한다.
예) btn.gif (X) 어떤 의미의 버튼인지 직관성이 떨어진다. btn_search.gif (O) 적당히 짧으면서도 직관적이다.
허용 문자 : 영문 소문자(abc)와 숫자(123) 및 언더바(_) 사용이 가능하다. 영문 대문자 및 기타 언어와 특수문자는 사용하
지 않는다.
예) btn_Search.gif (X) 대문자가 사용되었다. btn-search.gif (X ) 언더바 이외의 특수문자가 사용되었다.
btn_search.gif (O)
숫자 규칙 : 숫자로는 시작할 수 없으며 숫자의 증가는 "01" 부터 시작됩니다. 숫자가 없는 단어는 통상 "01" 이라는 숫자
가 생략된 것으로 간주합니다. 단, "1" 형식으로 시작되는 예외상황도 있을 수 있습니다.
예) 1btn_search.gif (X) 숫자로 시작되어 이미지의 용도와는 관계없이 탐색기에 정렬됨
btn_search01.gif (O) 동일한 의미를 지닌 이미지가 여러개인 경우 숫자를 붙여서 구분 한다.
btn_search.gif (O) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 한다.
69
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
5. 주석 가이드
1) 주석 가이드
① HTML 주석 가이드
HTML 주석의 경우 콘텐츠를 그룹핑 하는 코드의 시작과 끝에 삽입한다.
주석에 사용되는 언어는 한글이든 영문이든 무방하며 개발 및 유지보수에 필요하다고 판단되는 경우 삽입한다.
주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 한다.
주석 안쪽에는 코드를 설명하는 문장 외에 다른 기호등을 넣지 않는다.
HTML 코드와 주석은 항상 행으로 분리되어 있어야 한다.
HTML 코드가 추가로 수정되었음을 알리는 경우 수정된 코드의 시작과 끝부분에 오늘의 날짜 'YYMMDD' 를 추가 한다.
예) GNB 코드의 수정이 시작됨
…
GNB 코드의 수정이 끝남
②
CSS 주석 가이드
CSS코드는 의미있는 형태로 그룹핑 하고 그룹핑 된 코드 더미 첫 줄에만 주석으로 설명한다.
주석에 사용되는 언어는 영문으로 가능한 직관적인 단어를 선택한다.
주석과 관련된 버그를 피하기 위하여 주석 기호와 코멘트 사이에는 빈 공간을 두어야 한다.
주석 안쪽에는 코드를 설명하는 문장 외에 다른 기호등을 넣지 않는다.
CSS 코드가 추가로 수정되었음을 알리는 경우 수정된 코드의 시작과 끝부분에 오늘의 날짜 'YYMMDD' 를 추가 한다.
HTML 코드가 추가로 수정되었음을 알리는 경우 수정된 코드의 시작과 끝부분에 오늘의 날짜 'YYMMDD' 를 추가 한다.
예) /*GNB*/ (X)
/* GNB */ (O)
/** GNB **/ (X)
/* GNB */ (O)
70
/*- GNB -*/ (X)
/*--- GNB ---*/ (X)
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
E. Naming
6. 코드의 정렬
1) 코드의 정렬
① HTML 코드의 정렬
마크업의 중첩이 깊어질 때마다 1tab 들여쓰기 한다.
1tab 의 크기는 space 4칸 크기로 설정한다. (보통의 저작도구에서 이에대한 환경설정을 지원함)
table 의 자식요소인 caption, thead, tbody, tfoot, tr은 들여쓰기 하지 않으며 th, td만 들여쓰기 한다.
ul, ol, dl 의 자식요소인 li, dt, dd 요소는 들여쓰기 하지 않는다.
HTML 코드의 정돈을 위하여 비어있는 행(line)을 만들지 않는다.
71
차세대 학사정보시스템 구축
홈페지이 표준 정의서
나. 웹 디자인 가이드라인
F. UI개발(Pattern)
1. GNB
(Global Navigation Bar)
1)
체크리스트
색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이 외에도 명암이나 패턴으로 콘텐츠 구분이 가능해야 한다.
2)
준수사항
전경색과 배경색은 충분한 대비를 가지고 있어야 한다.
색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
3)
사용예시
색상에만 의존해서 정보를 구분하는 콘텐츠를 제공할 경우 색상을 구분 할 수 없는 환경에서는 정확한 정보를 제공 할 수
없기 때문에 피해야 한다.
색상 외에도 패턴을 넣거나 각 항목 별로 텍스트를 제공하여 구분 할 수 있도록 해야한다
색상으로 표현된 시각적인 정보에는 색상표현과 무관하게 인지 가능한 텍스트 정보를 제공하고 의미 있는 대체 텍스트를
제공한다.
72