메뉴 보이기
Profile
이온디

2012.01.19

CSS

레이아웃 네이밍 가이드

조회 수 5898 추천 수 0

html

body

#header

 

#logo

 

 

 

 

 

#gnb

 

 

 

 

 

#sitemap

 

 

 

 

 

#nav

#location

 

 

#containerWrap

containerTop

 

 

 

 

#container

containerBody

#content

 

 

 

 

 

#column

 

 

 

 

containerBottom

 

 

 

 

#footer

 

 

 

위 표는 아래 내용을 포함하여 포괄 작성한 내용입니다.

 

     

    기본적인 레이아웃 구조

    1. 기본적인 레이아웃 구조

    html

    body

    #header

    #logo

     

     

     

     

    #menu

     

     

     

     

    #sitemap

     

     

     

     

    #nav

    #location

     

     

    #container

    #content

     

     

     

     

    #column

     

     

     

    #footer

     

     

    표는 아래 레이아웃 구조를 보기 쉽게 나타내기 위해 작성하였습니다.

    • html, body
      • #wrap
        • #header
          • #logo
          • #menu
          • #sitemap
          • #nav
            • #location
        • #container - container는 상황에 따라 유동적으로 이동이 가능
          • #content
          • #column
        • #footer

     

     

    1. 컨텐츠의 3 구성이 필요한 레이아웃 구조

    html

    body

    #wrap

    #header

     

     

     

     

     

    #containerWrap

    containerTop

     

     

     

     

     

    containerBody

    #content

     

     

     

     

     

    #column

     

     

     

     

    containerBottom

     

     

     

     

    #footer

     

     

    표는 아래 레이아웃 구조를 보기 편하게 나타내기 위해 작성하였습니다.

     

    • html
      • body
        • #wrap
          • #header
          • #containerWrap
            • containerTop
            • containerBody
              • #content
              • #column
            • containerBottom
          • #footer

     

    [예제] eond_networks 레이아웃 구조

    html

    body

    #wrap

    #container

    #header

    #logo

     

     

     

     

     

    #menu

     

     

     

     

     

    #sitemap

     

     

     

     

    #nav

     

     

     

     

     

    #content

     

     

     

     

     

    #column

     

     

     

     

    #footer

     

     

    표는 아래 레이아웃 구조를 나타내기 위해 작성하였습니다.

     

    eond_networks

    • html, body
      • #wrap
        • #container
          • #header
            • #logo
            • #menu
            • #sitemap
          • #nav
          • #content
          • #column
        • #footer

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 글쓴이 날짜 조회 수
공지 [사이트 전반] CSS 및 이미지 네이밍에 관심있으신 분은 같이 참여해주세요. :) 이온디 2009.01.22 8332
13 [CSS] Get BEM profile 이온디 2018.12.01 17
12 [CSS] What’s in a name? A CSS naming convention overview profile 이온디 2018.12.01 35
11 [CSS] #tnb (Top Navigation Bar) 1 profile 이온디 2015.04.27 628
10 [CSS] What Makes For a Semantic Class Name? profile 이온디 2013.03.01 3799
[CSS] 레이아웃 네이밍 가이드 6 profile 이온디 2012.01.19 5898
8 [사이트 전반] HTML 마크업 설계 템플릿(한혜진) 이온디 2010.11.03 7584
7 SideNavigationBar (x) 이온디 2009.02.21 5479
6 [CSS] NHN Naming Guidelines (추천) profile 이온디 2009.01.20 6281
5 NHN UI(html, css) 하드코딩 기본룰 이온디 2009.01.20 6929
4 css 네이밍 규칙 7 이온디 2009.01.20 11802
3 [CSS] 모든 디자이너가 해야할 9가지 CSS 원칙 (추천) profile 이온디 2009.01.19 6870
2 CSS 네이밍 이온디 2009.01.14 5612
1 웹 개발자를 위한 네이밍 룰(Naming Rule) 가이드 (최현진, 2002년) 이온디 2003.11.14 9395