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

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

Image Cropper 적용 가이드

  • WYSIWYG 에디터에서 이미지의 사이즈를 조절하거나 이미지를 자를때 사용되는 콤포넌트 입니다.
  • XHTML 1.0 Transitional, UTF-8 형식으로 작성되어 있습니다.
  • HTML 4.01 Transitional 으로 변환하려면 엘리먼트의 닫기 규칙만 변환합니다. Quirks Mode로 변환하려면 엘리먼트의 닫기 규칙 변환과 함께 CSS 디버깅이 필요합니다.
  • 조절점이 이미지의 경계에 머무를 때 가리지 않도록 하려면 img_cropper 클래스가 부여된 엘리먼트에 overflow:hidden 속성을 부여하지 않습니다.
  • 표준모드 DTD에서 높이 100%를 다르게 인식하는 IE6 때문에 img_cropper 클래스가 부여된 엘리먼트의 높이값은 background 클래스가 부여된 img 엘리먼트의 높이 값과 동적으로 일치시켜야 합니다. 이 때 단위는 px 이어야 합니다.
  • mask 클래스가 부여된 엘리먼트는 background 클래스가 부여된 이미지의 전체 영역을 어둡게 만듭니다.
  • crop_object 클래스가 부여된 엘리먼트는 어둡지 않은 엘리먼트를 표현하기 위하여 background 클래스가 부여된 이미지를 배경으로 담고 있으며 하나의 이미지 처럼 보이도록 하기 위하여 배경이미지의 위치값을 동적으로 변경해 주어야 합니다. crop_object 클래스가 부여된 엘리먼트가 움직일 때 배경이미지의 위치값도 실시간으로 변해야 합니다.

Image Cropper 목록

  • Image Cropper 1

Image Cropper 1

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

Categories

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

Tags

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

Posts

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

Trackbacks

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

Comments

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

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

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