레이아웃 네이밍 가이드
이온디
첨부파일 https://eond.com/css_naming/248944

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

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 14 articles in 1 / 1 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 CSS 및 이미지 네이밍에 관심있으신 분은 같이 참여해주세요. :) 이온디 2009/01/22 8350
13 [CSS] Get BEM 이온디 2018/12/01 40
12 [CSS] What’s in a name? A CSS naming convention overview 이온디 2018/12/01 61
11 [CSS] #tnb (Top Navigation Bar) [1] 이온디 2015/04/27 698
10 [CSS] What Makes For a Semantic Class Name? 이온디 2013/03/01 3811
현재글 [CSS] 레이아웃 네이밍 가이드 [6] 이온디 2012/01/19 5923
8 [사이트 전반] HTML 마크업 설계 템플릿(한혜진) 파일 이온디 2010/11/03 7610
7 SideNavigationBar (x) 이온디 2009/02/21 5494
6 [CSS] NHN Naming Guidelines (추천) 이온디 2009/01/20 6295
5 NHN UI(html, css) 하드코딩 기본룰 파일 이온디 2009/01/20 6968
4 css 네이밍 규칙 [7] 이온디 2009/01/20 11830
3 [CSS] 모든 디자이너가 해야할 9가지 CSS 원칙 (추천) 이온디 2009/01/19 6892
2 CSS 네이밍 이온디 2009/01/14 5621
1 웹 개발자를 위한 네이밍 룰(Naming Rule) 가이드 (최현진, 2002년) 파일 이온디 2003/11/14 9416

해시태그 디렉터리