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

Layer 적용 가이드

  • 기본형
    • 네이버 서비스의 공통 레이어 입니다.
    • HTML 4.01 Transitional 기준으로 작성되었으나 DTD변경이 가능하며 약간의 디버깅이 필요할 수 있습니다.
    • 콘텐츠의 양에 따라 가변적인 크기를 지닐 수 있으며 크기를 고정 할 수도 있습니다.
    • 레이어의 상자 크기를 고정하려면 .layer_popup 영역에 inline style 형식으로 너비 또는 너비와 높이를 기재 합니다.
    • <!-- Layer Content --> 이 주석은 편집 가능한 영역 입니다.
    • 그림자 표현시 표준계열 브라우저(FF, OP, SF)에서는 반투명 PNG 배경과 .shadow 라는 클래스를 활용하지만 IE 5.5~7 계열은 .shadow 클래스를 활용하지 않고 IE전용 shadow filter 를 사용합니다.
  • 말풍선
    • 네이버 서비스의 공통 말풍선 입니다.
    • HTML 4.01 Transitional 기준으로 작성되었으나 DTD변경이 가능하며 약간의 디버깅이 필요할 수 있습니다.
    • 콘텐츠의 양에 따라 가변적인 크기를 지닐 수 있으며 크기를 고정 할 수도 있습니다.
    • 말풍선의 상자 크기를 고정하려면 .layer_content 영역에 inline style 형식으로 너비 또는 너비와 높이를 기재 합니다.
    • .layer_content 영역에 최대 397*298 까지 너비와 높이 지정이 가능하며, 이때 실제 뷰는 400*300 이 됩니다.
    • <!-- It's up to you --> 이 주석은 풍선도움말의 내부 콘텐츠를 표현하기 위하여 표시된 영역 입니다.
    • <!-- Do not delete this comment. It's hack for IE6 --> 이 주석을 삭제하면 IE6에서 바르게 렌더링 하지 않습니다.
    • 반투명 그림자가 사용되었으며 표준계열 브라우저(FF, OP, SF, IE7)는 이것을 배경으로 처리, IE 5.5~6은 AlphaImageLoader filter 를 사용합니다.
    • 말풍선 꼭지의 수직·수평 정렬을 중앙으로 맞추려면 arrow + (top, bottom) + center 또는 arrow + (left, right) + middle 형식으로 다중 선택자를 추가 조합시킵니다.

레이어 목록

  • 기본형 1 : 헤더+바디+풋터
  • 기본형 2 : 바디+풋터
  • 기본형 3 : 바디
  • 말풍선 1 : 너비·높이가 콘텐츠 크기에 따르는 가변형
  • 말풍선 2 : 너비 고정
  • 말풍선 3 : 너비+높이 고정
  • 말풍선 4 : 말풍선 꼭지의 수직·수평 중앙 정렬

기본형 1 : 헤더+바디+풋터

새창으로보기 ▲Top

기본형 2 : 바디+풋터

새창으로보기 ▲Top

기본형 3 : 바디

새창으로보기 ▲Top

말풍선 1 : 너비·높이가 콘텐츠 크기에 따르는 가변형

새창으로보기 ▲Top

말풍선 2 : 너비 고정

새창으로보기 ▲Top

말풍선 3 : 너비+높이 고정

새창으로보기 ▲Top

말풍선 4 : 말풍선 꼭지의 수직·수평 중앙 정렬

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

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

  • 1탄부터 보며 공부하고 있... by 양양
  • 엄청나게 대단한 거죠. by 시니시즘
  • 이 글에서 분류하고 있는 ... by 시니시즘
  • 현재 네이버에서 블로그를 ... by 클로버
  • 좀 늦었지만 xenerdo님도... by 기타도리
  • NAVER
  • 해피빈
  • 쥬니어네이버
  • 한게임

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

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