• 개념정의 및 적용가이드
  • 디자인 가이드
전체메뉴보기
  • Layout System
  • Navigation System
  • Color System
  • Type System
  • Content System
  • Others

Layout System

기본 원칙은 전체적으로 가로와 세로로 나뉘어진 A, B, C, D, E의 영역으로 기능적인 역할과 함께 사이트의 특성을 이루게 된다.

레이아웃 표본 - A,B,C,D,E로 나뉨 A는 상단부분이고 그 바로아래를 B와C와E로 나눠 좌측을 B 우측을 C로 하고 E는 퀵메뉴는 부분으로 젤 오른쪽에 위치한다. B와C 아래부분을 D로 정한다.
General Area

A에 위치하는 CMC 가톨릭중앙의료원 및 산하병원의 로고와 각 병원의 주요 카테고리로 갈수 있는 주요 메뉴들로 구성되며 서브 페이지에서도 일괄적으로 적용

Main & Sub Navigation Area

해당 2레벨의 하위메뉴 와 특정 카테고리에 포함되지 않는 범용 메뉴가 들어가는 영역

Contents Area

카테고리의 컨텐츠가 구현되는 영역

Footer Area

사이트맵, 환자권리장전, 개인정보취급방침, 이메일무단수집거부 등의 메뉴와 함께 Copyright 표현 영역

other Area

Quick menu, 바로가기 아이콘 표현 영역

CMC 산하병원 레이아웃 중앙의료원 서울성모병원 성모병원 의정부성모병원 성가병원 성바오로병원 인천성모병원 성빈센트병원 대전성모병원 서브페이지

1. 중앙의료원 메인

중앙의료원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 498px을 차지하고 그 다음의 컨텐츠영역은 height값이 가변적이며 height간격13px벌려준후 footer영역은 height 76px을 차지한다

top

2. 서울성모병원 메인

서울성모병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 400px을 차지하고 간격을 height 30px 벌려주고 그 다음의 컨텐츠영역은 height값이 가변적이며 height간격 40px벌려준후 footer영역은 height 76px을 차지한다

top

3. 성모병원 메인

성모병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 505px을 차지하고 간격을 height 10px 벌려주고 그 다음의 컨텐츠영역은 height값이 가변적이며 height간격 40px벌려준후 footer영역은 height 76px을 차지한다

top

4. 의정부성모병원 메인

의정부성모병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 비주얼 영역 height 226px을 차지하고 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 그 다음의 컨텐츠영역은 height값이 가변적이며 height간격 40px벌려준후 footer영역은 height 76px을 차지한다

top

5. 성가병원 메인

성가병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 474px을 차지하고 height간격 40px벌려준후 footer영역은 height 76px을 차지한다

top

6. 성바오로병원 메인

성바오로병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 474px을 차지하고 간격을 height 30px 벌려주고 그 다음의 컨텐츠영역은 height값이 가변적이며 height간격 20px벌려준후 footer영역은 height 76px을 차지한다

top

7. 인천성모병원 메인

인천성모병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 505px을 차지하고 footer영역은 height 76px을 차지한다

top

8. 성빈센트병원 메인

성빈센트병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 505px을 차지하고 footer영역은 height 76px을 차지한다

top

9. 대전성모병원 메인

대전성모병원 메인 레이아웃 - width값 900px으로 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 505px을 차지하고 footer영역은 height 76px을 차지한다

top

서브페이지

서브페이지 레이아웃 - width값 900px으로 좌측메뉴영역은 width 180px 컨텐츠영역은 width 700px로 width 20px떨어져있다. 상단영역은 height 61px을 차지하고 간격을 height 10px 벌려준후 메뉴영역은 height 56px을 차지 다시 간격을 height 10px 벌려주고 비주얼이되는 영역을 height 94px을 차지하고 컨텐츠영역의 height값은 가변적이며 height간겨 45px를 벌려주고 footer영역은 height 76px을 차지한다. 컨텐츠영역은 width 660px이며 좌우로 18px씩 간격을 둔고 상단의 제목은 height 17px 아래 위치하며 페이지 내용은 제목 아래 height 20px에 위치한다. 페이지 내용의 제목의 간격은 height 20px로 한다.

top