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

  • UIO Factory
  • 코딩컨벤션
  • 웹 접근성
  • 블로그

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 블로그 (99)
  • HTML/ CSS (34)
  • 크로스브라우징 (16)
  • 접근성 (5)
  • 모바일 (9)
  • 네이버/ 한게임 (5)
  • 팀 이야기 (22)
  • 기술 문서 (5)
  • 발표 자료 (3)

Tags

스크린리더 Firefox 버그 IE8 IE 모바일 textyle 텍스타일에디터 네이버 텍스타일 단축키 HTS tip 드림위버 글감수집기 접근성 센스리더 Dreamweaver html IE6 button

Posts

  • 중요 표시 버튼을 접근성 있게 ...
  • 웹 표준 마크업 개발 프로세스
  • 버튼의 활성화 여부에 따른 커서...
  • 모바일 환경에서의 마크업 개발 ...
  • 모바일 웹 브라우저

Trackbacks

  • 모바일 웹 브라우저2010년 3월 ...
  • 기타도리의 생각
  • [버그검사] WindowsVista,7 +...
  • 브라우저 별 Acid3 테스트
  • 그린애플의 알림

Comments

  • 헉 이미지가 보이지 않네요 ^^
  • 여기 코멘트 폼에 레이블이 하...
  • 요즘 이런 시도가 많은 것 같...
  • Flash부분 관련 자료 링크중 잘...
  • 구체적으로 어디가 어느페이지가...
  • NAVER
  • 해피빈
  • 쥬니어네이버
  • 한게임

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

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