메뉴건너뛰고 본문 바로가기

카테고리별 웹디자인 벤치마킹 사전 디비딕

격자구조

배치

배치

역ㄱ자
ㄱ자
Π자
ㄴ자 배치
수평영역 중심/흐름 배치
수직영역 중심/흐름 배치

수평 영역

수평 영역

독자분할 영역
타영역내 전체 겹침
타영역내 부분 겹침
타영역 GNB내부 점유

수평 단구조

수평 단구조

1단
2단

수평 구분 - 복수/다수 단간

수평 구분 - 복수/다수 단간

여백
분할선
트임선
배경 - 색
분할 - 색
한편 박스
구분 - 클리어화이트
분할 - 박스

수평 구분 - 외부영역

수평 구분 - 외부영역

오픈
선 / drop shadow
배경 - 색
배경 - 색 - 투명도
배경 - 패턴,이미지
구분 - 자체박스
트임 클리어화이트
닫힘 클리어화이트

수평영역 와이드 활용

수평영역 와이드 활용

요소
배경색
구분선
배경이미지,패턴
박스

수직 영역

수직 영역

독자분할 영역
타영역내 전체 겹침
타영역내 부분 겹침
타영역 GNB내부 점유

수직 열구조

수직 열구조

1열
2열

수직 구분 - 복수/다수 열간

수직 구분 - 복수/다수 열간

상호 여백
트임선
분할선
배경 - 색
분할 - 색
박스
구분 - 클리어화이트
분할 - 박스

수직 구분 - 외부영역

수직 구분 - 외부영역

구분 - 오픈
분할 - 선 / drop shadow
분할 - 색
구분 - 박스 / 블록
분할 - 클리어화이트
트임 - 클리어화이트

수직영역 상하 확장활용

수직영역 상하 확장활용

요소
배경 - 색
구분선
배경 - 이미지,패턴
박스