NULI : 널리 공유하는 웹표준화 가이드

layout for user

  • 회원 가입
  • 아이디/비밀번호 찾기
  • 마크업가이드
  • UI 라이브러리
  • 웹 접근성
  • 공유문서
  • 블로그
  • UI Object
    • Common
      • Menu
      • Box
      • List
      • Table
      • Form
      • Etc.
  • Naver
    • Navigation
      • LNB
    • Common
      • Error
      • Event
      • Search
      • Image Cropper
      • Tree
      • Layout
      • Loading
      • Layer
      • Login
      • Footer
      • Paginate
      • Popup

Layout 적용 가이드

  • 레이아웃용 division 마크업에는 표준화된 id 선택자 네이밍을 부여합니다. 표준화된 id 네이밍으로는 #wrap, #header, #container, .spot, .snb, #content, .aside, #footer 가 있습니다.
  • HTML 4.01 Transitional 기준으로 작업되어 있습니다. XHTML 1.0 으로 전환하는 것은 문제가 없지만 Quirks Mode 으로 전환하려면 약간의 디버깅이 필요할 수 있습니다.
  • float을 해제 시키기 위한 방법으로 overflow 속성 대신 빈 엘리먼트가 사용되었는데 이것은 레이아웃 폭을 벗어나는 오브젝트에 대응하기 위함 입니다.
  • 실제 서비스 적용시 레이아웃 박스의 너비는 디자인 가이드에 따라 수정하시고 배경색은 제거하여 사용하세요.
  • 실제 서비스 적용 후 IE 6.x 이하 브라우저의 double margin 버그와 width-padding 버그를 반드시 체크하세요.
  • IE의 레이아웃 관련 버그를 회피하기 위하여 가능한 모든 레이아웃 박스에는 width 값을 지정 하였습니다.

레이아웃 유형 목록

  • 고정폭 2단컬럼
  • 고정폭 2단 컬럼
  • 가변폭 2단 컬럼
  • 가변폭 2단 컬럼
  • 고정폭 3단 컬럼
  • 가변폭 3단 컬럼

고정폭 2단컬럼

새창으로 보기 ▲Top

고정폭 2단 컬럼

새창으로 보기 ▲Top

가변폭 2단 컬럼

새창으로 보기 ▲Top

가변폭 2단 컬럼

새창으로 보기 ▲Top

고정폭 3단 컬럼

새창으로 보기 ▲Top

가변폭 3단 컬럼

새창으로 보기 ▲Top
작성자 :
정찬명
작성일 :
2008년 1월 2일

Categories

NULI Blog [88]
HTML/CSS [32]
크로스브라우징 [16]
접근성 [4]
모바일 [9]
네이버/한게임 [5]
팀이야기 [21]

Tags

2007년 DOCTYPE Dreamweaver HTS IE IE6 IE8 Story html tip width 네이버 단축키 드림위버 모바일 버그 센스리더 스크린리더 접근성 채용

Posts

  • 네이버의 나눔체 웹폰트와 미리보...
  • 마크업 개발 참고용 CheatShee...
  • 투명 PNG 배경이미지 Repeat ...
  • 구글이 ie6지원을 단계적(?)으로...
  • 모바일 마크업을 위한 즐겨찾기

Trackbacks

  • 모바일 웹 브라우저2010년 3월 4일 오후 11시 47분에 저장...
  • 기타도리의 생각
  • [버그검사] WindowsVista,7 + ATI그래픽카드 + IE7,8 ...
  • 브라우저 별 Acid3 테스트
  • 그린애플의 알림

Comments

  • 좋은자료 정말 감사합니다!... by 한송이
  • 1탄부터 보며 공부하고 있... by 양양
  • 엄청나게 대단한 거죠. by 시니시즘
  • 이 글에서 분류하고 있는 ... by 시니시즘
  • 현재 네이버에서 블로그를 ... by 클로버
  • NAVER
  • 해피빈
  • 쥬니어네이버
  • 한게임

이 사이트는 나눔글꼴로 제작되었습니다. 설치하기

Copyright © NHN - Web Standardization Team. All Rights Reserved
  • Valid XHTML 1.0