블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'html'에 해당되는 글 4건

  1. 2014.10.29 W3C, HTML5 표준안 확정
  2. 2014.02.04 [Javascript] 이미지맵 에디터(ImageMap Editor) v1.0
  3. 2013.08.14 [CSS] 투명처리

W3C, HTML5 표준안 확정

IT뉴스 / 2014. 10. 29. 15:47






[디지털데일리 이민형기자] 월드와이드웹컨소시엄(W3C)은 28일(현지시각) 웹 마크업 언어인 HTML5의 표준안을 확정했다고 밝혔다.

팀 버너스리 W3C 이사는 “우리는 브라우저에서 비디오, 오디오 콘텐츠를 감상하는 것뿐만 아니라 전화를 거는 등의 경험도 취할 수 있을 것”이라며 “HTML5와 오픈 웹 플랫폼을 통해 언제 어디서나 모든 장치에서 정보를 읽고 찾아볼 수 있기를 기대한다”고 말했다.

[자세한 내용은 원본기사 참조]


[원본 기사 : http://news.naver.com/main/read.nhn?mode=LS2D&mid=shm&sid1=105&sid2=226&oid=138&aid=0002023107]

Posted by happydong
, |



이미지맵 에디터(ImageMap Editor) v1.0

ㅁ 탄생 배경

 

 회사에서 일하면서 레이어팝업 형태의 이벤트성 공지 팝업을 만드는 경우가 종종 있다. 그럴때 마다 이미지를 잘라 HTML문서 형태로 만들자니 귀찮고 단순히 링크만 연결하면 끝인데... 해서 이미지맵를 이용해서 링크를 걸게 되는데, 나 같은 프로그래머는 포토샵 툴을 설치 하지 않으니... 그림판으로 대충 좌표를 찾아서 링크를 걸게 된다. 정말 귀찮은 작업이라 할 수 있겠다. 그래서 만들었다. 그냥 원하는 영역을 드래그해서, 그 곳에 링크를 걸 수 있도록 하는 일명 "이미지맵 에디터(ImageMap Editor)"!! 기능은 단순하지만, 그냥저냥 쓰기 편하다. 나와 같은 고생하는 사람들을 위해 파일을 공유 한다.

 

ㅁ 매뉴얼

 

 1. 객체 생성

 

 var imgEditor = new Happydong.ImageMapEditor({

            objId: "#popPanel",

            guideLineColor: "#A7ED00",

            isOnDetailView: true,

            detailViewSize: 100,

            detailViewBorderColor: "#000"

        });

[코드 1 - 객체 생성 관련]
 
 - 위 코드 1과같이 인스턴스(Instance)를 생성합니다. 해당 생성 파라미터(Parameters)설명은 아래와 같다.
  *  objId - 이미지 편집판 ID
  *  guideLineColor - 가이드선 색상을 지정.
  *  isOnDetailView - 가이드선 상세보기창 볼지여부. (Default : false)
  *  detailViewSize - 가이드선 상세보기창의 사이즈를 지정. (Default : 50)
  *  detailViewBorderColor - 가이드선 상세보기창의 Border 컬러를 지정.

 

 2. 이미지 추가

imgEditor.setImage("imageUrl.jpg");

[코드 2 - 이미지 추가 관련]

 

 - 타켓(편집 대상) 이미지를 넣도록 한다.

 

 3. 이미지맵 태그 반환

 

var outputTag = imgEditor.getImageMap();

[코드 3 - 이미지맵 태그 반환 관련]

 - 편집된 이미지를 img map태그로 반환한다.

 

 4. 에디터 초기화

 

imgEditor.clearEditor();

[코드 4 - 이미지맵 에디터 초기화 관련]

 

 - 에디터를 초기화 한다.

 

이상 간단하게 매뉴얼을 정리해 본다.

(이 스크립트를 Jquery 라이브러리 기반을 두고 있기 때문에 Jquery는 필수로 필요하다.)

 

ㅁ 다운로드 및 데모(Demo)

  - 다운로드 파일 :


Happydong_ImageMap_v1.zip



  - 데모 : [바로가기]


** 혹시나, 파일을 다운받아 사용하시는 분들이 있다면, 버그에 대한 신고는 댓글 또는 메일(master@happydong.kr)으로 보내 주시면 감사하겠습니다.

 

 

 

 

 

Posted by happydong
, |



출처 : http://html5experts.kr/archives/1516

 

css 투명처리 관련. 

 

opacity: 0.75;

filter: alpha(opacity = 75); // IE6,7

-ms-filter: “alpha (opacity=75)”; // IE8

-moz-opacity: 0.75; // Firefox 1.5

-khtml-opacity: 0.75; // Safari 1.x

zoom: 1; 

 

** IE에서는  filter, opacity속성을 사용하려면 width와 height등의 정보가 없으면 안됨. 이를 좀더 자연스럽게
처리하려면 zoom:1을 추가하면 좋음.

Posted by happydong
, |