글로벌 속성(Global Attribute) #2 - CONTENTEDITABLE, CONTEXTMENU, DATA-*, DRAGGABLE, DROPZONE, HIDDEN, SPELLCHECK, TRANSLATE

글로벌 속성들 중에서 HTML5에서 추가된 속성들을 알아봅니다.

CONTENTEDITABLE 속성

contenteditable 속성은 지정된 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다.

<p contenteditable="true">브라우저에서 수정해보세요!</p>

• 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다.
• DOM 속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집가능한지 확인할 수 있다.
• 자바스크립트 사용해서document.designMode='on'이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다.
• 편집한 이후에 사용자가 변경한 내용이 DOM에 적용돼 있으므로 편집한 영역의 innerHTML(designMode로 편집 가능하다면 전체문서)을 서버로 보내 저장하고 적용할 수 있다.

활용

이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다.

브라우저에서 수정해 보세요

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

CONTEXTMENU 속성

contextmenu 속성은 HTML5에서 추가된 속성으로 컨텍스트 메뉴를 정의한다. 마우스 우측을 클릭하면 나오는 그 메뉴들이다.

<p contextmenu="supermenu">This paragraph has a context menu called "supermenu" attached.</p>

<menu id="supermenu"> 
  <command label="Step 1: Write Tutorial" onclick="doSomething()"> 
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()"> 
</menu>

아직 브라우저들이 지원하지 않는다.

DATA-*

data-* 속성은 HTML5에 추가된 속성으로 이 속성을 사용하면 마크업에서 스크립트로 정보를 전달할 수 있다. 어떤 요소든 임의의 속성을 넣을 수 있기 때문에 기존의 복잡한 단계를 거치지 않아도 된다.

<div id="cat_1" data-id="1" data-name="나비">
...
</div>

자바스크립트를 이용한 커스텀 데이터 접근 방법

dataset 속성 접근법

dataset 속성의 값은 단순한 문자열 맵(연상배열)이지만 값을 읽고 쓸때는 data-라는 속성이름의 접두어를 생략할 수 있다.

DOM(getAttribute()메서드)을 이용

data-접두어를 포함하여 지정해야 한다.

var row = document.getElementById("cat_1");
row.dataset.age = "3";    //age 라는 커스텀 데이터 속성을 추가
alert(row.dataset.id);    //id 라는 커스텀 데이터 속성을 추가
alert(row.getAttribute("data-id"));    //getAttribute()일때는 접두어가 필요
delete row.dataset.age;    //data-age 속성 삭제

커스텀 데이터 속성을 사용한 팝업

팝업창을 만들때 a 요소에 onclick 이벤트를 사용하는 경우가 많다. 이는 동작과 내용을 분리하지 못해 다수의 링크를 상대로 같은 작업을 한다면 반복적인 작업에 시간을 낭비하게 되며 HTML은 필요 이상으로 커지게 된다.

<!-- onclick을 이용한 팝업 -->
< a href="#" onclick="window.open('help/holiday_pay.html', WinName, 'width=300,height=300');">공휴일 급여 정책</a>

<!-- 접근성 개선 -->
< a href="help/holiday_pay.html" onclick="window.open('this.href', WinName, 'width=300,height=300');">공휴일 급여 정책</a>

이를 개선하기 위해 onclick 이벤트를 제거하고 각 링크를 설명할 수 있는 클래스를 부여해 준다.

<a href="help/holiday_pay.html" class="popup">공휴일 급여 정책</a>

jQuery 선택자를 이용해서 popup 클래스를 가진 a 요소 전체를 선택한 다음, 각 요소의 click 이벤트에 핸들러를 붙였다. 이 코드는 각 요소의 click 메서드에 전달되어, 사용자가 링크를 클릭하면 실행된다. preventDefault 메서드는 이벤트의 기본 동작을 막는데 여기서는 브라우저가 링크를 따라가서 해당 페이지를 열지 못하게 한다.

var links = $("a.popup");

links.click(function(event) {
    event.preventDefault();
    window.open($(this).attr("href"));
});

팝업 창의 크기를 제어하기 위해서 커스텀 데이터를 사용한다.

<a href="help/holiday_pay.html" data-width="600" data-height="400" title="공휴일 급여 정책 새창 열기" class="popup">공휴일 급여 정책</a>

click 이벤트 핸들러를 수정해서, 커스텀 데이터 속성에 넣어둔 정보를 꺼내어 windows.open()메서드에 전달한다.

$(function() {
    $(".popup").click(function(event) {
        event.preventDefault();
        var href = $(this).attr("href"),
        width = $(this).attr("data-width"),
        height = $(thhis).attr("data-height),
        popup = window.open(href, "popup", "height=" + height + ",width=" + width + "");
    });
});

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

DRAGGABLE 속성

draggable 속성은 HTML5에 새롭게 추가된 속성으로 이 속성이 들어간 요소는 drag-and-drop API를 사용해 드래그 할 수 있다.

<div draggable="true">
    이 요소는 드래그가 가능하다
</div>

• 링크와 이미지들은 기본적으로 드래그가능하다.
• draggable="true" : 이 속성이 지정된 요소는 드래그앤 드롭이 가능하다.
• draggable="false" : 이 속성이 지정된 요소는 드래그앤 드롭이 불가능하다.
• draggable="auto" : 이 속성이 지정된 요소는 브라우저의 설정값을 따른다.

활용

아래의 박스를 드래그 해보자.

이 요소는 드래그가 가능하다

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9+	지원	지원	지원	지원

DROPZONE

dropzone 속성은 HTML5에 새롭게 추가된 속성으로 드래그된 데이터를 드롭할 때 복사, 이동, 링크한다.

<div dropzone="copy"></div>

• dropzone="copy" : 요소에 아이템을 드롭하는 것은 드래그된 데이터를 복사함을 의미한다. 값을 명시하지 않으면 copy로 간주한다.
• dropzone="move" : 요소에 아이템을 드롭하는 것은 드래그된 데이터를 이동함을 의미한다.
• dropzone="link" : 요소에 아이템을 드롭하는 것은 원래의 데이터로 링크함을 의미한다.

아직 브라우저들이 지원하지 않는다.

HIDDEN

hidden 속성은 HTML5에 새롭게 추가된 속성으로 css의 hidden과는 다르게 의미상으로도 절대 브라우저에 노출되지 않는 것을 원칙으로 한다.

<div id="main" hidden>
...
</div>

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	지원	지원	지원

SPELLCHECK

spellcheck 속성은 HTML5에서 새롭게 추가된 속성으로 텍스트 입력을 받는 폼에서 사용자가 틀린 텍스트를 입력하면 빨간색 밑줄로 알려주는 속성이다.

<textarea spellcheck="true"></textarea>

• spellcheck="true" : 철자와 문법을 검사한다.
• spellcheck="false" : 철자와 문법을 검사하지 않는다.

아쉽게도 영어단어나 영어문장만 해당한다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE10+	지원	지원	지원	지원

TRANSLATE

translate 속성은 HTML5에 새롭게 추가된 속성으로 지정된 요소의 콘텐츠의 내용을 번역할지 안할지 설정한다.

<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>

• translate="yes" : 지정된 요소의 내용을 번역한다.
• translate="no" : 지정된 요소의 내용을 번역하지 않는다.

아직 지원하는 브러우저가 없다.