웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.

Presentation on theme: "웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0."— Presentation transcript:

1 웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0

2 목차 문서 기호 이해 3. 웹 스타일 가이드[대국민포털] 3.1 인터페이스 레이아웃 3.2 인터페이스 그리드 시스템
3.3 Header & Footer 3.4 네비게이션 3.5 타이틀 3.6 블릿 & 버튼 3.7 폰트 3.8 컬러 3.9 테이블 3.10 배너 & 팝업 1. Introduction 1.1 개요 1.2 스타일 가이드 구성 및 활용 1.3 정책 2. 기본 디자인 원칙 및 규정 2.1 Design Concept 2.2 디자인 원칙 2.3 기본 환경 규정 2.4 폰트 규정 2.5 디자인 유연성 규정 4. 웹 스타일 가이드[내부업무시스템] 4.1 인터페이스 레이아웃 4.2 인터페이스 그리드 시스템 4.3 Header & Footer 4.4 네비게이션 4.5 타이틀 4.6 이미지 & 버튼 4.7 폰트 4.8 컬러 4.9 테이블 4.10 배너 & 팝업

3 문서 기호 이해 대국민포털 내부업무시스템 참조파일

4 1. Introduction 1.1 개요 질병관리본부 웹 웹 스타일 가이드 정의 웹 스타일 가이드 적용 범위 참고사항
질병관리본부의 웹 스타일 가이드V1.0은 2008년 오픈된 질병관리본부 사이트의 전체 Identity와 세부 페이지 디자인의 Identity를 규정하고 통합하기 위하여 개발되었다. 향후 질병관리본부 웹사이트의 디자인 관리 및 신규 사이트 디자인 개발의 지침서로서 배포하여 활용하는 데 그 목적이 있다. 웹 스타일 가이드 적용 범위 웹 스타일 가이드V1.0은 질병관리본부 대국민포털사이트와 내부업무시스템사이트에 적용되며 앞으로 개발되어 질병관리본부사이트에 연결되는 모든 컨텐츠에 기본 가이드가 된다. 참고사항 질병관리본부웹사이트의 실무 제작을 위해 디자인을 규정하는 웹 스타일 가이드V1.0 외에 실무 디자인 개발의 편의를 위해 PSD로 저장된 디자인 템플릿을 함께 지원한다. * 개발 종료 시 최종파일 업데이트

5 1. Introduction 1.2 웹 스타일 가이드 구성 및 활용 웹 스타일 가이드 구성 디자인 가이드 구성과 적용
질병관리본부의 웹 스타일 가이드는 다음과 같이 구성된다. Introduction – 웹 스타일 가이드의 기본 활용 및 적용범위 등을 규정한다. 기본디자인 원칙 및 규정 – 디자인 컨셉 및 원칙, 정책 등에 대해서 설명한다. 웹 스타일 가이드[대국민포털] 웹 스타일 가이드[내부업무시시스템] 디자인 가이드 구성과 적용 질병관리본부 웹 스타일 가이드는 1. 질병관리본부 대국민포털사이트 웹 스타일 가이드 2. 내부시스템포털 웹 스타일 가이드 의 2가지 유형으로 구분되어 적용된다. 웹 스타일 가이드의 활용 질병관리본부의 디자인 스타일 가이드는 전체 디자인을 개발하고 관리하는 지침서로 활용된다. 개발자는 기본적으로 웹 스타일 가이드에 규정되어 있는 내용을 최대한 준수하여 디자인을 개발하여야 하며, 디자인 적용에 적합하지 않거나 특수한 상황일 경우에는 웹 스타일 가이드 담당자에게 문의하여야 한다.

6 1. Introduction 1.3 정책 웹 스타일 가이드 운영 관리 정책 질병관리본부 Identity 유지 정책
질병관리본부스타일 가이드는 계속적으로 업그레이드 되어야 하며 디자인 개편 시 버전별로 관리한다. 질병관리본부의 Identity 확보와 유지를 위해 웹 스타일 가이드에서 규정한 디자인 원칙과 컨셉, Look & Feel은 최대한 유지한다. 질병관리본부 Identity 유지 정책 질병관리본부의 전체 디자인은 한가지 디자인 스타일로 모두 통일하는 것보다는 각 컨텐츠와 서비스의 성격에 맞게 디자인하는 것을 원칙으로 하나 질병관리본부 웹 스타일 가이드에서 규정하고 있는 디자인 원칙과 컨셉, Look & Feel에 적합하도록 디자인하는 것을 전제로 한다. 별도 컨텐츠들은 각 성격에 맞는 독립성 있는 디자인개발을 인정하되 최대한 질병관리본부의 전체적인 디자인 Identity를 해치지 않는 범위 내에서 디자인 되어야 한다.

7 지적이고 안전한 느낌을 주는 질병관리본부 대국민 포털 지향
2. 기본 디자인 원칙 및 규정 2.1 Design Concept 디자인 정의 질병관리본부 웹사이트는 개편된 UI와 더불어 질병관리본부 이념과 이미지를 명쾌히 드러내고자 하며, 또한, 시스템통합에 맞춰 산재된 컨텐츠를 고품질 디자인을 통하여 산출 및 유지하여 질병관리본부의 이미지 확립의 일관성을 부여한다. 질병관리본부의 기업이념과 이미지를 일관되게 드러내기 위해, 웹 사이트 디자인 스타일의 연장선상에서 디자인 되어야 한다. 디자인 컨셉 질병관리본부의 디자인은 비주얼을 안전, 편안한, 믿을 수 있는 느낌의 “지적”이고 “안전한” Look & Feel을 주는 디자인을 기본 컨셉으로 한다. Visualizing 키워드 : 지적인, 안전한 Color: Blue, Green, Orange를 기본으로 한 응용 컬러 Sub Concept : 본문 컨텐츠와 그의 특성을 잘 부각할 수 있도록 (일러스트 이미지 자제) Creative Concept 지적이고 안전한 느낌을 주는 질병관리본부 대국민 포털 지향 질병관리본부의 이미지에 적합한 심플한 디자인을 기본으로 트렌드와 질병관리본부의 사회적 가치를 표현할 수 있는 친근성을 함께 내포.

8 2. 기본 디자인 원칙 및 규정 2.2 디자인 원칙 사이트는 직관성과 정보의 전달성을 강화하기 위해 플래시 사용을 제한하나, 메인 페이지등 필요에 따라 선별적으로 사용한다 페이지는 좌측정렬을 기본으로 한다. 질병관리본부의 일관된 Identity를 유지하기 위하여 웹 스타일 가이드에서 규정하는 Look & Feel을 최대한 준수한다.

9 2. 기본 디자인 원칙 및 규정 2.3 기본환경 규정 용량규정 브라우저 규정 1. 메인화면 전체 페이지 용량은 100 K 이내
x 768모드를 기준으로 한다. 2. 메인페이지의 경우 가로 970px, 세로 flexible이내로 제한한다. 3. Internet Explorer 4.0 이상 지원 4. 화면정렬 : 좌측정렬을 기본으로 한다. 5. Tool Bar : 있음 6. Menu Bar : 있음 7. Status Bar : 있음 8. Scroll Bar : 가로 스크롤바는 지양 / 세로스크롤바 사용 가능. 단 스크롤을 메인의 경우 2번 이하 서브의 경우 3번 이하로 한다. 9. Frame 사용은 지양한다.

10 2. 기본 디자인 원칙 및 규정 2.3 기본환경 규정 화면정렬규정 Header Footer
기본 화면 정렬 – 브라우저의 좌측에 위치한다. 페이지 사이즈는 970px로 규정한다. 상단,좌측 여백 값 : 0 브라우저 Header Footer

11 2. 기본 디자인 원칙 및 규정 2.4 폰트 규정 이미지 폰트 규정 텍스트 폰트 규정
이미지 폰트는 한글은 HY견고딕, 산돌고딕M과 산돌명조M이 영문폰트는 Verdana(Bold 사용가능), Arial(Arial Black포함) 를 사용한다. 이미지폰트는 상세적용에 보통 Smooth가 적용된다 텍스트 폰트 규정 한글 돋움(Bold 사용가능), "돋움", "돋움체"; font-size: 9pt; font-style: normal; color: #363636; line-height:18px; font-weight:normal; fontvariant:normal 영문 Verdana(Bold 사용가능)를 사용한다

12 2. 기본 디자인 원칙 및 규정 2.5 디자인 유연성 규정 Color Key Header Footer
디자인 유연성은 다음과 같이 적용된다. Header Color Key 디자인 고정 디자인 유연적 적용 Footer

13 3. 웹 스타일 가이드 [대국민 포털] 3.1 인터페이스 레이아웃 메인 페이지 1 2 3 4
브라우저 좌측정렬을 원칙으로 한다. 1 Logo 2 GNB 글로벌 네비게이션으로 동일한 형태와 색상으로 적용. Identity유지에 중요한 요소. 5 3 Search Area 정보검색을 검색엔진과 알파벳으로 검색가능, 인기검색어 표시 4 Main Visual Area 사이트의 가장 중요한 컨텐츠를 시각적 이미지와 함께 배너와 하여 대상 컨텐츠로 링크 유도 5 Contents Area 캠페인 건강샘터 전염병가이드 게시판 Link 질병관리본부 소개 정보알림터 Weekly 통계 질병뉴스 함께나눔터 민원센터 사용자별 질병정보 유용한정보사이트 건강설문조사 6 Footer Copyright와 질병관리본부의 기본정보를 보여주며, 관련사이트 링크를 포함. 6

14 3. 웹 스타일 가이드 [대국민 포털] 3.1 인터페이스 레이아웃 서브 페이지 1 Logo 1 2
GNB 글로벌 네비게이션으로 모든 메뉴에 동일한 형태와 색상으로 적용. Identity유지에 중요한 요소. 5 2 3 6 4 7 3 Visual title 각 메뉴 타이틀을 보여주는 영역으로 이미지화 4 Submenu 2~3단계메뉴 구현. 5 Search Area 검색엔진 6 Location 사용자의 현재 위치를 보여줌. Contents Area 주요 내용 배치. 7 8 Footer Copyright와 질병관리본부의 기본정보를 보여주며, 관련사 링크를 포함. 8

15 3. 웹 스타일 가이드 [대국민 포털] 3.2 인터페이스 그리드 시스템 메인 페이지 Header Contents Footer
가로 : 970px 255px 3.2 인터페이스 그리드 시스템 705px 20 215 20 메인 페이지 53px Header 192px Contents flexible 50px Footer

16 3. 웹 스타일 가이드 [대국민 포털] 3.2 인터페이스 그리드 시스템 서브 페이지 1 Header Contents
가로 : 970px 서브 페이지 1 188px 782px 53px Header 76px Contents flexible 50px Footer

17 3. 웹 스타일 가이드 [대국민 포털] 3.2 인터페이스 그리드 시스템 서브 페이1지 2 Header Contents
가로 : 970px 서브 페이1지 2 188px 782px 53px Header 76px Contents flexible 50px Footer

18 3. 웹 스타일 가이드 [대국민 포털] 3.3 Header & Footer Header[GNB] 메인 페이지 서브 페이지
53px 서브 페이지 970px 44px GNB는 항상 페이지의 최상단에 위치한다. 사이트에 사용되는 GNB는 위와 같이 디자인된다. HTML제작시 TOPMARGIN=0로 한다. Contents Header영역 가로 : (메인페이지)970px / (서브페이지)970px 세로 : (메인페이지)53px / (서브페이지)44px 로고 대메뉴 로그인 정보 검색 파일 참조 : header.psd

19 3. 웹 스타일 가이드 [대국민 포털] 3.3 Header & Footer Footer[Footer] 메인, 서브 페이지 공통
970px 50px Contents Footer영역 가로 : (메인 페이지)970px / (서브페이지)970px 세로 : (메인 페이지)50px / (서브페이지)50px 관련사이트 로고 질병관리본부 주소및 연락처 Copyrights 금일방문자수 총 방문자수 파일 참조 : footer.psd

20 3. 웹 스타일 가이드 [대국민 포털] 3.4 네비게이션 메인 페이지
메인에서 서브페이지에 이르는 네비게이션 흐름과 배치는 다음과 같다. GNB GNB Footer 메인 서브 적용 예> 메인화면의 컨텐츠 영역 클릭 시 해당 컨텐츠의 서브 페이지로 바로 링크된다

21 3. 웹 스타일 가이드 [대국민 포털] 3.4 네비게이션 서브 페이지
서브페이지에서 하위서브페이지로의 네비게이션 흐름과 배치는 다음과 같다. GNB GNB Footer Footer 서브 서브2차 적용 예> 서브페이지안의 컨텐츠에 탭링크시 컨텐츠 페이지만 로드된다

22 3. 웹 스타일 가이드 [대국민 포털] 3.4 네비게이션 현재위치표시 FONT : 돋움 돋움9pt, 장평100%, 자간 -20
홈> 건강샘터 > 전염병 > 법정전염병 > 1군 전염병 FONT : 돋움 돋움9pt, 장평100%, 자간 -20 COLOR : #959595

23 3. 웹 스타일 가이드 [대국민 포털] 3.5 타이틀 파일 참조 : leftmenu_title.psd 188px 188px
컨텐츠 타이틀1 컨텥츠 타이틀2 돋움 font-size:12pt; color:#646464; font-weight:bold; height:30px; padding-left:0px; margin-top:10px; vertical-align:middle; 돋움 font-size:10pt; color:#3b6d8d; height:15px; font-weight:bold; padding-left:25px; no-repeat left 메뉴타이틀1 메뉴타이틀2 글자수 6자 이상시 적용 산돌고딕 B font-size:24pt; color: #ffffff; font-weight: bold; 자간:-100px 문자 폭:85% 산돌고딕 B font-size:24pt; color: #ffffff; font-weight: bold; 자간:50px 파일 참조 : leftmenu_title.psd

24 3. 웹 스타일 가이드 [대국민 포털] 3.6 블릿 & 버튼 블릿 파일 참조 : bullet.psd 메인페이지 서브페이지
Size:6x6px color:#6f6f6f Size:4x20px color:#0079b6 좌측메뉴타이틀 Size:3x5px color:#7a7a7a 좌측메뉴타이틀 Size:12x13px 서브메인의 게시판 Size:3x6px color:#8f8f8f Size:12x13px 서브메인의 게시판 Size:10x10px 테두리color:#7ca8b0 안color:#54b3cb Size:5x5px color:#666666 Size:7x7px color:#3c8bb1 파일 참조 : bullet.psd

25 3. 웹 스타일 가이드 [대국민 포털] 3.6 블릿 & 버튼 버튼
기본적으로 표안쪽(큰 버튼)과 바깥쪽(작은 버튼)의 버튼으로 구분한다. 버튼간의 간격은 큰 버튼-5px, 작은 버튼 – 4px로 한다. 20 큰 버튼 돋움 12, #636363 15 12 큰 버튼 작은 버튼 기타 버튼 파일 참조 : button.psd

26 3. 웹 스타일 가이드 [대국민 포털] 3.7 폰트 이미지 폰트 규정
이미지 폰트는 한글은 HY견고딕, 산돌고딕M과 산돌명조M이 영문폰트는 Verdana(Bold 사용가능), Arial(Arial Black포함) 를 사용한다. 이미지폰트는 상세적용에 보통 Smooth가 적용된다 HY 견고딕 산돌고딕M 산돌명조M VERDANA ARIAL BLACK

27 3. 웹 스타일 가이드 [대국민 포털] 3.7 폰트 텍스트 폰트 규정 Verdana(Bold 사용가능)를 사용한다
한글 돋움(Bold 사용가능), “돋움", “돋움체"; font-size: 9pt; font-style: normal; color: #363636; line-height:18px; font-weight:normal; fontvariant:normal 돋움 질병관리본부 함께 나눔터 정보알림터 검색 건강샘터 질병관리본부 함께 나눔터 정보알림터 검색 건강샘터 영문 Verdana(Bold 사용가능)를 사용한다 VERDANA Korea Centers for Disease and Prevention Korea Centers for Disease and Prevention 파일 참조 : CSS

28 3. 웹 스타일 가이드 [대국민 포털] 3.8 컬러 Main Color 1 2 Sub Color 3 Point Color
질병관리본부의 CI컬러중 블루를 사이트의 고정영역(GNB)에 적용하여 일관된 브랜드 이미지를 구축. 분명하면서도 안전한 느낌의 컬러이미지를 구축. Sub Color 메인 컬러에서 명도를 낮추어 블루와 전체적인 Tone을 조화시켜 사용. 지적이고, 고급스러운 컬러이미지를 구축 Point Color 화면의 주목성과 활기를 불어넣기 위해 보조적 컬러로 사용. 채도와 명도가 모두 높은 색상을 사용함. (컬러의 점유영역은 전체 페이지 영역의 5%를 넘어서지 않는다.)

29 3. 웹 스타일 가이드 [대국민 포털] 3.9 테이블 테이블 형태는 각 Cell간에 라인이 존재하는 형태를 기본으로 한다.
한 페이지 내에서 항목간 구별을 위해 별도 컬러가 필요할 경우, 아이덴티티를 해치지 않는 범위에서 활용한다. #form_01 {background-color:#f0f0f0; border:1px solid #dcdcdc; padding:10px; margin:10px;} #table .type0 {text-align:center; background-color:#eaeff4; color:#646464; font-weight:bold; padding:5px 0px; border-right:1px dotted #c7dceb;} # table .type1 {text-align:center; background-color:#eaeff4; color:#646464; font-weight:bold; padding:5px 0px;} # table .type2 {text-align:center; padding:5px 0px; border-right:1px dotted #c7dceb;} # table .type3 {text-align:center; padding:5px 0px;}

30 3. 웹 스타일 가이드 [대국민 포털] 3.10 배너 & 팝업 배너 팝업 Logo / Title Area
300px 35px Logo / Title Area News Contents Area 예) 400px 배너 디자인시 폰트는 한글폰트는 HY견고딕, 산돌고딕M과 산돌명조M이 영문폰트는 Verdana(Bold 사용가능), Arial(Arial Black포함) 를 사용한다. 이미지폰트는 상세적용에 보통 Smooth가 적용된다. 실사및 일러스트 이미지 사용시 반드시 저작권을 획득하고, 디자인은 해당 배너의 컨텐츠를 잘 반영하여야 하며, 시각적으로 아름답게 디자인한다. 335px 30px Control/ Button area 팝업의 사이즈는 가로 300px X 높이 400px를 기준으로 하되, 컨텐츠에 따라 조정이 가능하다. 파일 참조 : popup.psd

31 4. 웹 스타일 가이드 [내부업무시스템] 4.1 인터페이스 레이아웃 메인 페이지 검강샘터 1 2 1 Logo 2
GNB 글로벌 네비게이션으로 동일한 형태와 색상으로 적용. Identity유지에 중요한 요소. 3 4 3 Search Area 검색엔진으로 검색가능 4 Main Visual Area 사이트의 가장 중요한 컨텐츠를 시각적 이미지와 함께 배너와 하여 대상 컨텐츠로 링크 유도 5 5 Contents Area SSO 연계 업무모음 Help Desk 공지사항 보고및 처리사항 정보알림터 검강샘터 배너 캠페인 민원처리 일정관리 관련링크등 6 Footer Copyright와 질병관리본부의 기본정보를 보여주며, 관련사이트 링크를 포함. 6

32 4. 웹 스타일 가이드 [내부업무시스템] 4.1 인터페이스 레이아웃 서브 페이지 1 Logo
GNB 글로벌 네비게이션으로 모든 메뉴에 동일한 형태와 색상으로 적용. Identity유지에 중요한 요소. 2 1 2 3 4 5 3 Main menu title Area 대메뉴 타이틀을 보여주는 영역으로 이미지화 6 7 4 Log Information 로그인명, 로그정보 문구화 5 Search Area 검색엔진 8 Sub menu Area 2~3단계메뉴 구현. 6 7 Location Area 사용자의 현재 위치를 보여줌. Contents Area 주요 내용 배치. 9 8 Footer Copyright와 질병관리본부의 기본정보를 보여주며, 관련사 링크를 포함. 9

33 4. 웹 스타일 가이드 [내부업무시스템] 4.2 인터페이스 그리드 시스템 메인 페이지 Header Contents Footer
528px 15 227px 197 가로 : 970px 215px Header Contents Footer 메인 페이지 62px flexible 50px

34 4. 웹 스타일 가이드 [내부업무시스템] 4.2 인터페이스 그리드 시스템 서브 페이지 Header Contents Footer
가로 : 970px 서브 페이지 215px 755px 28px Header 64px flexible Contents 50px Footer

35 4. 웹 스타일 가이드 [내부업무시스템] 4.3 Header & Footer Header[GNB] 메인 페이지 서브 페이지
가로 : 970px 28px 32px 서브 페이지 가로 : 970px 28px 32px 32px GNB는 항상 페이지의 최상단에 위치한다. 사이트에 사용되는 GNB는 위와 같이 디자인된다. HTML제작시 TOPMARGIN=0로 한다. Contents Header영역 가로 : (메인페이지)970px / (서브페이지)970px 세로 : (메인페이지)72px / (서브페이지)31px 로고 대메뉴 로그인 정보 검색 파일 참조 : header.psd

36 4. 웹 스타일 가이드 [내부업무시스템] 4.3 Header & Footer Footer[Footer]
메인, 서브 페이지 공통 가로 : 970px 50px Contents Footer영역 가로 : (메인 페이지)970px / (서브페이지)970px 세로 : (메인 페이지)50px / (서브페이지)50px 관련사이트 로고 질병관리본부 주소및 연락처 Copyrights 금일방문자수 총 방문자수 파일 참조 : footer.psd

37 4. 웹 스타일 가이드 [내부업무시스템] 4.4 네비게이션 메인 페이지
메인에서 서브페이지에 이르는 네비게이션 흐름과 배치는 다음과 같다. GNB Footer 메인 서브 적용 예> 메인화면의 컨텐츠 영역 클릭 시 해당 컨텐츠의 서브 페이지로 바로 링크된다

38 4. 웹 스타일 가이드 [내부업무시스템] 4.4 네비게이션 서브페이지
서브페이지에서 하위서브페이지로의 네비게이션 흐름과 배치는 다음과 같다. GNB Footer 서브 서브2차 적용 예> 서브페이지안의 좌측 메뉴 타이틀 클릭시 컨텐츠 영역에 해당 내용 디스플레이 됨

39 4. 웹 스타일 가이드 [내부업무시스템] 4.5 타이틀 파일 참조 : leftmenu_title.psd 178px 188px
컨텐츠 타이틀1 산돌고딕 M font-size:22pt; color: #032e5d 컨텥츠 타이틀2 대메뉴 타이틀 서브메뉴 타이틀 산돌고딕 M font-size:14pt; color: #ffffff 산돌고딕 M font-size:18pt; color: #032e5d 산돌고딕 M font-size:18pt; color: #fffff 파일 참조 : leftmenu_title.psd

40 4. 웹 스타일 가이드 [내부업무시스템] 4.6 블릿 & 버튼 블릿 버튼 Size:4x14px 타이틀
Size:4x14px, Color:#0b589f, 타이틀 Size:6x1px, Color:#666666, 타이틀 Size:3x3px, color:#0079d4, 게시판 버튼 기본적으로 표안쪽(큰 버튼)과 바깥쪽(작은 버튼)의 버튼으로 구분한다. 버튼간의 간격은 큰 버튼-5px, 작은 버튼 – 4px로 한다. 큰 버튼 20 큰 버튼 돋움 12, #636363 작은 버튼 15 12 기타 버튼 파일 참조 : bullet.psd

41 4. 웹 스타일 가이드 [내부업무시스템] 4.7 폰트 이미지 폰트 규정
이미지 폰트는 한글은 HY견고딕, 산돌고딕M과 산돌명조M이 영문폰트는 Verdana(Bold 사용가능), Arial(Arial Black포함) 를 사용한다. 이미지폰트는 상세적용에 보통 Smooth가 적용된다 HY 견고딕 산돌고딕M 산돌명조M VERDANA ARIAL BLACK

42 4. 웹 스타일 가이드 [내부업무시스템] 4.7 폰트 텍스트 폰트 규정 Verdana (Bold 사용가능)를 사용한다
한글 돋움(Bold 사용가능), “돋움", “돋움체"; font-size: 9pt; font-style: normal; color: #363636; line-height:18px; font-weight:normal; fontvariant:normal 돋움 나의 일터 정보알림터 함께나눔터 포털관리 시스템관리 나의 일터 정보알림터 함께나눔터 포털관리 시스템관리 영문 Verdana (Bold 사용가능)를 사용한다 VERDANA Korea Centers for Disease and Prevention Korea Centers for Disease and Prevention 파일 참조 : CSS

43 4. 웹 스타일 가이드 [내부업무시스템] 4.8 컬러 Main Color 1 2 Sub Color 3 Point Color
질병관리본부의 CI컬러중 블루를 사이트의 고정영역(GNB)에 적용하여 일관된 브랜드 이미지를 구축. 분명하면서도 안정적인 컬러이미지를 구축. Sub Color 메인 컬러에서 명도를 낮추어 블루와 전체적인 Tone을 조화시켜 사용. 지적이고, 고급스러운 컬러이미지를 구축 Point Color 화면의 주목성과 활기를 불어넣기 위해 보조적 컬러로 사용. 채도와 명도가 모두 높은 색상을 사용함. (컬러의 점유영역은 전체 페이지 영역의 5%를 넘어서지 않는다.)

44 4. 웹 스타일 가이드 [내부업무시스템] 4.9 테이블 테이블 형태는 각 Cell간에 라인이 존재하는 형태를 기본으로 한다.
한 페이지 내에서 항목간 구별을 위해 별도 컬러가 필요할 경우, 아이덴티티를 해치지 않는 범위에서 활용한다. #form_01 {background-color:#f0f0f0; border:1px solid #dcdcdc; padding:10px; margin:10px;} #table .type0 {text-align:center; background-color:#eaeff4; color:#646464; font-weight:bold; padding:5px 0px; border-right:1px dotted #c7dceb;} # table .type1 {text-align:center; background-color:#eaeff4; color:#646464; font-weight:bold; padding:5px 0px;} # table .type2 {text-align:center; padding:5px 0px; border-right:1px dotted #c7dceb;} # table .type3 {text-align:center; padding:5px 0px;}

45 4. 웹 스타일 가이드 [내부업무시스템] 4.10 배너 & 팝업 배너 팝업 Logo / Title Area
300px 35px Logo / Title Area News Contents Area 예) 400px 배너 디자인시 폰트는 한글폰트는 HY견고딕, 산돌고딕M과 산돌명조M이 영문폰트는 Verdana(Bold 사용가능), Arial(Arial Black포함) 를 사용한다. 이미지폰트는 상세적용에 보통 Smooth가 적용된다. 실사및 일러스트 이미지 사용시 반드시 저작권을 획득하고, 디자인은 해당 배너의 컨텐츠를 잘 반영하여야 하며, 시각적으로 아름답게 디자인한다. 335px 30px Control/ Button area 팝업의 사이즈는 가로 300px X 높이 400px를 기준으로 하되, 컨텐츠에 따라 조정이 가능하다. 파일 참조 : popup.psd