<img src=”이미지 파일 주소” usemap=”#이미지 맵의 이름”>
<map name=”이미지 맵의 이름”>
<area shape=”rect” coords=”좌상 x좌표, 좌상 y좌표, 우하 x좌표, 우하 y좌표” href=”링크될 주소”>
<area shape=”circle” coords=”원 중심의 x좌표, 원중심의 y좌표, 원의 반지름” href=”링크될 주소”>
<area shape=”poly” coords=”다각형 꼭지점 x좌표1, 다각형 꼭지점 y1,다각형 꼭지점 x2, 다각형 꼭지점 y좌표2,다각형 꼭지점 x좌표3, 다각형 꼭지점 y좌표3,다각형 꼭지점 x좌표4, 다각형 꼭지점 y좌표4,…….” ” href=”링크될 주소”>
</map>
이미지맵 생성
1 20
IE getAttribute(”class”)
12 28
getAttribute(”class”)를 ie에서는 제대로 갖고 오지를 않는 문제가 있다..
ie에서는 getAttribute(”className”)으로 가져와야 제대로 가져오는…이런 뭐같은
간단하게 함수로 만들엇다
function getClass(obj) {
if (obj.getAttribute(”class”) == undefined) {
return obj.getAttribute(”className”);
} else {
return obj.getAttribute(”class”);
}
}
tg = document.getElementById(”target”);
attr = getClass(tg);
alert(attr);
jquery iframe 접근
10 25
jquery 자식 iframe내 id접근
js ————————
$(’#frameSidebar’).contents().find(’#iframeTarget’)
parent html ———————-
<iframe id=”frameSidebar”></div>
child iframe ———————
<body>
<div id=”iframeTarget”>targetTest</div>
</body>
———————————
iframe내 id를 접근시키기 위해서는 iframe이 load된 상태에서 접근해야되므로
$(”#frameSidebar”).load(function() {
$(’#frameSidebar’).contents().find(’#iframeTarget’)
});
위와같이 load 시킨 이후에 접근하도록한다
jquery end()
10 11
_layer.find(’.close-layer, .btn-cancel, .btn-save’).click(function(){
_layer.hide();
_layer_block.hide();
}).end().mouseleave(function(){
$(this).hide();
_layer_block.hide();
});
// 이번 작업에 사용된 jquery의 일부분
end()는 쉽게 말해 현재 진행된 이벤트의 이전단계를 찾는 거라고생각하면된다.
_layer 라는 변수의 .close-layer, .btn-cancel, .btn-save라는 class를 클릭이벤트를 실행후,
end() <– 클릭이벤트 타겟의 이전 (_layer)에 마우스리브 이벤트를 지정
radio에 onchage를 사용할경우 ie6/7에서 제대로 동작하지 않는 경우가 종종 발생한다
이러한 경우 this.blur를 걸어주도록 한다:)
iframe내 엘리먼트 접근
8 6
1. iframe id = frameContent
2. iframe 내 엘리먼트 id = bbsWrap
document.getElementById(’frameContent’).contentWindow.document.getElementById(’bbsWrap’).style.border = “1px solid red”;
ps. 크로스 브라우저 정책으로 인한 같은 서버상의 file이 아니면 접근이 안됨
가변 테이블 게시판 리스트(유동적 가로100%)의 마크업시, caption제공에 대한 문제를 발견했다.
caption에 대한 접근성 제공을 위해 display:none이 아닌 히든 텍스트로 제공하고자 하는경우.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
word-wrap: break-word;
word-break: keep-all;
}
caption, legend {
z-index:-1;
position: absolute;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
※ th혹은td의 고정 넓이와 가변 넓이 지정은
col class=”sect01″ 과 같은 식으로 class를 지정하고 각 클레스에 고정 픽스와, 가변 넓이 지정(auto;)
.sect01 { width: 50px; }
.sect02 { width: auto; }
.sect03 { width: 50px; }
.sect04 { width: 50px; }
위와 같이 제공을할경우 ie, safari, firefox, opera에서는 고정 영역과 가변 영역이 제대로 표현이 되지만, chrome에서는 가변영역이 제대로 적용이 되지않는다.(마치 table에 table-layout:auto; 를 지정한것 같은..?)
한참을 찾다가 결국 caption의 문제라는 걸발견할수있었는데..
caption의 접근성을 위한 히든텍스트 제공시 position: absolute;와 z-index, text-indent:-9999px로 숨기려 할경우(cpation) chrome에서의 table-layout이 제대로 적용이 안되는것이엿다 ㄷㄷ
아래처럼 하면 제대로 적용되는걸 알수 있다 
caption, legend {
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
font: 0/0 Dotum;
}
생각나는데로 적어놓고 다듬질않아 뒤죽박죽–;
문서 객체 모델 (DOM)
5 7
문서 객체 모델 (DOM)M
문서 객체 모델이란 무엇인가
문서(Document)
원래 DOM은 XML이라는 기술에서 유래하였으며 D는 문서를 의미합니다. 특별히 웹 브라우저가 파싱(parsing)하여 화면을 구성하는데 사용되는 문서는 HTML과 XHTML이며 HTML과 함께 사용되는 DOM 기술을 HTML DOM이라고 하기도 합니다.
객체(Object)
객체는 프로퍼티(속성)와 메소드를 가지고 있으며 HTML 문서의 각 요소를 접근하기 위하여 웹 브라우저는 HTML 문서를 객체로 보고 접근할 수 있도록 해줍니다. 자바스크립트 초기에는 웹 브라우저를 제어하기 위해 윈도우 객체(window object)를 제공하였으며 윈도우 객체의 프로퍼티와 메서드는 브라우저 객체 모델(BOM; Browser Object Model)이라고 부르기도 합니다.
모델(Model)
DOM은 HTML이나 XHTML로 작성된 웹 문서를 나뭇가지형(tree) 구조로 표시하여 웹 문서의 각 요소(element)로 접근할 수 있도록 모델을 제공합니다.
DOM 사용하기
노드(node)
노드란 나뭇가지(tree)형 구조으로 연결(link)되어 부모(parent), 자식(child), 형제(sibling) 관계를 형성합니다. 노드는 다음과 같이 분류합니다.
요소(element) 노드
<html>, <head>, <body> 와 같은 HTML 태그(tag)를 요소(element)라고 합니다. 요소는 하위 요소를 포함할 수 있으며 이 때 하위 요소를 자식 요소라고 합니다. 하위 요소를 포함하고 있는 상위 요소를 부모 요소라고 합니다.
텍스트(text) 노드
태그 사이에 위치한 문자열을 텍스트 노드라고 합니다. XHTML에서 텍스트 노드는 항상 요소 노드의 자식으로 포함되어야 합니다. 그러므로 HTML 문서의 작성시 문자열은 반드시 태그로 감싸는 습관을 들이기 바랍니다.
속성(attribute) 노드
HTML 태그는 나름의 속성들을 가지고 있습니다. 예를 들어 태그의 경우 배경색 지정을 위해 bgcolor라는 속성을 가지고 있습니다. 이러한 속성들 역시 요소 노드의 자식 노드로 포함됩니다.
CSS와의 관계
DOM에서 CSS를 다루기 위해 요소 노드의 style 속성 노드라는 개념으로 스타일 시트 속성 값을 읽어오거나 추가, 변경 등의 작업을 할 수 있습니다.
getElementById()
DOM API 중 가장 많이 사용되는 메서드 중의 하나로 window.document.getElementById()라는 구조로 document 객체에 포함된 메서드입니다. HTML 태그의 속성 중 “ID” 속성은 중복을 허용하지 않는 유일한 값을 가지는데 이 값을 검색하여 요소 노드를 리턴합니다.
var e = document.getElementById(”header”);
alert(e);
위의 예는 ID 속성의 값으로 “header”를 갖는 요소(태그)를 찾아 변수 e가 가리키도록 한 것입니다. 경고창을 이용하여 값을 출력하면 해당 요소의 타입과 이름이 표시됩니다.
getElementsByTagName()
이 메서드는 특정 태그를 사용하는 요소들을 배열로 리턴하게 됩니다.
var elements = document.getElementsByName(”li”);
alert(elements.length);
위의 예는
속성 다루기
getAtrribute()
setAtrribute()
box-shadow
4 28
box-shadow
엘리먼트의 그림자 효과
code
.box-shadow {
color: #000;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background: #fff;
}
지원 브라우저
- firefox
- chrome
- opera
- safari
예제
엘리먼트 그림자효과
.
border-radius
4 28
border-radius
해당 엘리먼트의 보더를 둥근 라운딩 처리에 사용합니다.
code
.radius {
padding: 10px;
color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ff0000;
background-color: #fff;
}
지원 브라우저
- firefox
- chrome
- safari
예제
엘리먼트의 보더 라운딩
.