Skip to main content
Skip table of contents

Web - WSG

WSG

WSG은 동등한 위계의 2단 레이아웃을 따릅니다.

WSG-1

*컬러별 명칭

위계 원칙

적용

기획 원칙

Content 1과 Content 2가 동등한 관계를 가지고 있고,
전면에 컴포넌트 하나가 좌우여백을 다 차지하는 경우에 해당 유형에 사용합니다.

페이지 자체에 스크롤이 생성되지 않습니다. (Container 수준에서 스크롤바가 생성되지 않습니다.)

  • 대표적으로 List 패턴을 사용할 때 해당 유형을 적용합니다.

    • 스크롤은 List 자체에 생깁니다.

  • ContentsContainer 1은 ContentsContainer 2를 제어하지 않습니다.

    • 최초와 같은 비율로 증가합니다.

구조

  • GlobalMenuContainer

    • width : 240px

  • PageMenuContainer

    • min-height : 64px

  • ContentsContainer 1

    • ContentsArea 1

      • Content 1

  • ContentsContainer 2

    • ContentsArea 2

      • Content 2

CSS

  • ContentsContainer 1

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • ContentsArea 1

    CODE 
    padding-top:24px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Content 1

    CODE 
    min-width:480px;

WSG-2

*컬러별 명칭

위계 원칙

적용

기획 원칙

Content 1과 Content 2가 동등한 관계를 가지고 있고,
여러 컴포넌트들이 조합되어 좌우여백을 두고 꽉 채우고 있는 경우에 해당 유형을 사용합니다.

페이지 스크롤이 가능합니다. (Container 수준에서 스크롤바가 생성됩니다.)

구조

  • GlobalMenuContainer

    • width : 240px

  • PageMenuContainer

    • min-height : 64px

  • ContentsContainer 1

    • ContentsArea 1

      • Content 1

  • ContentsContainer 2

    • ContentsArea 2

      • Content 2

CSS

  • Contents Container 1

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Contents Area 1

    CODE 
    padding-top:24px; 
padding-left:24px; 
padding-right:24px; 
padding-bottom:88px; 
min-width:480px;

  • Content 1

    CODE 
    min-width:432px;

WSG-3

*컬러별 명칭

위계 원칙

적용

기획 원칙

Content 1과 Content 2가 동등한 관계를 가지고 있고,
Content 1은 여러 컴포넌트들이 조합되어 좌우여백을 두고 꽉 채우고 있고, Content 2는 전면에 컴포넌트 하나가 좌우여백을 다 차지하는 경우일 때 사용합니다. (혼용)

Content 1은 페이지 스크롤이 가능합니다. (Container 수준에서 스크롤바가 생성됩니다.)
Content 2는 페이지 자체에 스크롤이 생성되지 않습니다. (Container 수준에서 스크롤바가 생성되지 않습니다.)

  • Content 2에는 대표적으로 List 패턴을 사용할 때 해당 유형을 적용합니다.

    • 스크롤은 List 자체에 생깁니다.

구조

  • GlobalMenuContainer

    • width : 240px

  • PageMenuContainer

    • min-height : 64px

  • ContentsContainer 1

    • ContentsArea 1

      • Content 1

  • ContentsContainer 2

    • ContentsArea 2

      • Content 2

CSS

  • Contents Container 1

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Contents Area 1

    CODE 
    padding-top:24px; 
padding-left:24px; 
padding-right:24px; 
padding-bottom:88px; 
min-width:480px;

  • ContentsArea 2

    CODE 
    padding-top:24px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Content 1

    CODE 
    min-width:432px;

  • Content 2

    CODE 
    min-width:480px;

WSG-4

*컬러별 명칭

위계 원칙

적용

기획 원칙

Content 1과 Content 2가 동등한 관계를 가지고 있고,
Content 1은 여러 컴포넌트들이 조합되어 좌우여백을 두고 꽉 채우고 있고, Content 2는 전면에 컴포넌트 하나가 좌우여백을 다 차지하는 경우일 때 사용합니다. (혼용)

Content 1은 페이지 스크롤이 가능합니다. (Container 수준에서 스크롤바가 생성됩니다.)
Content 2는 페이지 자체에 스크롤이 생성되지 않습니다. (Container 수준에서 스크롤바가 생성되지 않습니다.)

  • Content 2에는 대표적으로 List 패턴을 사용할 때 해당 유형을 적용합니다.

    • 스크롤은 List 자체에 생깁니다.

Content 1 너비는 480px 고정입니다.

구조

  • GlobalMenuContainer

    • width : 240px

  • PageMenuContainer

    • min-height : 64px

  • ContentsContainer 1

    • ContentsArea 1

      • Content 1

  • ContentsContainer 2

    • ContentsArea 2

      • Content 2

CSS

  • Contents Container 1

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
width:480px;

  • Contents Area 1

    CODE 
    padding-top:24px; 
padding-left:24px; 
padding-right:24px; 
padding-bottom:88px; 
width:480px;

  • ContentsArea 2

    CODE 
    padding-top:24px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Content 1

    CODE 
    width:432px;

  • Content 2

    CODE 
    min-width:480px;

WSG-5

*컬러별 명칭

위계 원칙

적용

기획 원칙

Content 1과 Content 2가 동등한 관계를 가지고 있고,
Content 1은 여러 컴포넌트들이 조합되어 좌우여백을 두고 꽉 채우고 있고, Content 2는 전면에 컴포넌트 하나가 좌우여백을 다 차지하는 경우일 때 사용합니다. (혼용)

Content 1은 페이지 스크롤이 가능합니다. (Container 수준에서 스크롤바가 생성됩니다.)
Content 2는 페이지 자체에 스크롤이 생성되지 않습니다. (Container 수준에서 스크롤바가 생성되지 않습니다.)

  • Content 2에는 대표적으로 List 패턴을 사용할 때 해당 유형을 적용합니다.

    • 스크롤은 List 자체에 생깁니다.

Content 1 너비는 480px 고정입니다.

구조

  • GlobalMenuContainer

    • width : 240px

  • PageMenuContainer

    • min-height : 64px

  • ContentsContainer 1

    • ContentsArea 1

      • Content 1

  • ContentsContainer 2

    • ContentsArea 2

      • Content 2

CSS

  • Contents Container 1

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
width:480px;

  • Contents Area 1

    CODE 
    padding-top:24px; 
padding-left:24px; 
padding-right:24px; 
padding-bottom:88px; 
width:480px;

  • ContentsArea 2

    CODE 
    padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
min-width:480px;

  • Content 1

    CODE 
    width:432px;

  • Content 2

    CODE 
    min-width:480px;

문서 작성 정보

소유자 / 관리자

김혜진

변경 이력

  • 2022/07/11 : WSG-5 유형 추가 - 김혜진

  • 2021/12/08 : WSG-4 유형 추가 - 김혜진

  • 2021/11/12 : DataTable을 List로 수정 - 김혜진

  • 2021/11/03 : max-width 삭제 - 김혜진

  • 2021/10/21 : WSG-3(혼용) 유형 추가 - 김혜진

  • 2021/09/17 : 이미지 변경, 값 수정 - 김혜진

  • 2021/09/14 : padding값 수정에 따른 이미지 변경(1) - 김혜진

  • 2021/08/23 : 레이아웃 유형 명칭 수정 - 김혜진

  • 2021/08/19 : 기획 원칙 설명 보완 - 김혜진

  • 2021/08/17 : 유형 세분화 및 내용 보완, 기획원칙에 대한 설명 추가 - 김혜진

  • 2021/08/13 : 문서 구조 변경 - 김혜진

  • 2021/08/12 : Contents Layer의 Layout 유형 내용 보완 (T, F 유형) - 김혜진

  • 2021/07/23 : Contents 영역과 Content 구분, 사이드메뉴가 없는 레이아웃 타입 구분 - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close