어떤 요소들에도 적용할 수 있는 글로벌 속성에 대하여 알아봅니다.
ACCESSKEY 속성
accesskey 속성은 바로가기 키(access key)를 지정한다. 컴퓨터의 기본 입력 장치는 마우스가 아니라 키보드이다. 따라서 문서에 있는 모든 요소는 키보드로 제어할 수 있어야 한다.
<a href="http://www.google.com/" accesskey="g">Google</a>
- accensskey 속성이 적용된 요소는 포커스를 받거나 실행이 이루어진다. input 요소에 적용되면 포커스를 받게 되고, a 요소에 적용되면 해당 키를 눌러 곧바로 목적지로 이동한다.
- 속성값은 키보드에 있는 알파벳이나 숫자 중에서 원하는 문자를 선택하여 지정한다.
- 하나의 요소에 두 개 이상의 문자를 정의할때는 띄어쓰기로 구분한다.
- 바로가기 키의 중복을 방지하기 위해 영국 정부의 바로가기 키 권고안을 참조한다.
| 웹브라우저 | 윈도우 | 매킨토시 |
|---|---|---|
| Internet Explorer | Alt | - |
| Firefox 2+ | Alt + Shift | Ctrl |
| Opera | Shift + Esc | |
| Safari 3+ | Alt | Ctrl |
| Chrome | Alt ( + Shift) | Ctrl + Opt |
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
CLASS 속성
class 속성은 스타일 시트에 정의된 클래스 이름을 지정한다.
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
DIR 속성
dir 속성은 텍스트 방향을 지정하는 속성이다. 텍스트는 두가지 방향으로 진행될 수 있다.
<p dir="rtl">Write this text right-to-left!</p>
dir="ltr": 텍스트를 좌에서 우로 표현한다.dir="rtl": 텍스트를 우에서 좌로 표현한다.dir="auto": 이 속성이 지정된 요소는 브라우저의 설정값을 따른다.
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
ID 속성
id 속성은 요소의 유일한 식별자이다.
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
속성 값은 문서 내에서 유일한 값이어야 하며, 공백 문자를 갖지 않는 최소한 한 개의 문자를 포함해야 한다.
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
LANG 속성
lang 속성을 html요소에 설정하게 되면 상속의 특성이 있어 이하 모든 요소들에도 같은 값이 부여된다. 콘텐츠 안에서 다양한 휴먼 랭귀지를 사용하는 경우 특정 요소마다 각각 다시 선언할 수 있다. 웹 브라우저나 음성 브라우저와 같은 User Agents가 웹 문서에 쓰여진 언어를 올바로 해석할 수 있도록 도와준다.
검색엔진의 검색결과, 음성기기들의 발음등에 유효하게 쓰인다. 전체 언어 목록은 http://www.iana.org/assignments/language-subtag-registry 를 참조하라.
HTML5
<html lang="ko">
ko는 한글이고 ko_KR은 남한의 한글입니다. 영어도 미국영어(en_US)와 영국영어(en_GB)가 있듯이 언어가 여러가지이면 세분화된다.
XHTML
XHTML1.0에서는 text/html인 경우에 lang과 xml:lang속성을 사용하고, XHTML1.1에서는 xml:lang속성만 사용한다.
<html xml:lang="ko" lang="ko">
STYLE 속성
style 속성은 요소에 인라인 스타일을 지정한다.
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
TABINDEX 속성
tabindex 속성은 탭 순서를 지정한다. 키보드 탭 키를 사용하여 탭 내비게이션 순서로 움직이고 이 순서를 바꿀 수 있는게 tabindex 속성이다. 탭 내비게이션의 순서는 포커스를 받는 순서와 다름 없다.
<input type="text" tabindex="100">
<input type="password" tabindex="200">
- 100,200,300 처럼 tabindex 값을 크게 잡아 중간에 다른 요소가 끼어들어 tabindex를 필요하게 되도 수정이 쉽게 하도록 한다.
- 포커스가 생기지 않게 하려면 -1 로 값을 지정한다.
- 탭 키를 누르면 낮은 속성값 → 높은 속성값 방향으로 진행되고 Shift와 탭키를 누르면 역방향으로 진행된다.
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
TITLE 속성
title 속성은 요소에 관한 제목을 지정한다. 여기에서 말하는 제목은 문서 제목처럼 내용을 대표하기 위한 이름이 아니라 특정 요소에 관한 추가정보를 의미한다. 추가적, 부가적, 조언적의 성격을 지니며 주로 특정 요소의 특성이나 성질을 설명하기 위한 용도로 사용되며, 거의 모든 요소에 사용할 수 있다.
- 튤팁(tool tip) : 마우스를 링크된 텍스트나 입력 컨트롤 위에 대면, title 속성으로 지정된 텍스트가 풍선말 형태로 나타난다.
- 음성 출력 : 내용을 음성으로 출력하는 보조기기가 title 속성으로 지정된 텍스트를 음성으로 출력한다.
title 예제
- a 요소 : 링크가 어디를 향하는지, 링크를 누르면 어떤 현상이 발생하는지 설명할 때 요약 제목으로 구성된 목록에서 전체 제목을 제공할 때 사용한다.
<a href="http://www.naver.com/" target="_blank" title="새창">naver</a> -
Html
- p 요소 : 문단에 관한 주석을 제공할 때 사용한다.
<p title="이 내용은 다음 회기에 개정될 예정이다"> -
Html
- img 요소 : 이미지 파일에 관한 추가 설명이 필요할 때 사용한다.
<img src="shose.jpg" alt="어린이 등산화" title="사진 속 크기는 실제와 같습니다."> -
Html
- input 요소 : 입력 컨트롤에 관한 사용 설명이 필요할 때 사용한다.
<input type="tel" title="숫자만 입력"> -
Html
- abbr 요소 : 약어나 두문자어를 풀이할 때 사용한다. 중요도가 높은 약어는 title 속성으로 설명하지 않고 본문에 직접 출력하는 것이 좋다.
요소에 대한 설명이나 주석으로 본문의 내용이 복잡해지지 않도록 title 속성을 사용하면 된다.<abbr title="HyperText Markup Language">HTML</abbr> -
Html
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
글로벌 속성들 중에서 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": 지정된 요소의 내용을 번역하지 않는다.
아직 지원하는 브러우저가 없다.
출처: https://webdir.tistory.com/324?category=607030 [WEBDIR:티스토리]
'UI & UX > 퍼블리싱' 카테고리의 다른 글
| HTML) 상호작용 요소 (0) | 2022.07.06 |
|---|---|
| HTML) 스크립트 요소 (0) | 2022.07.06 |
| HTML) 테이블 요소 (0) | 2022.07.06 |
| HTML) 내용 편집 요소 (0) | 2022.07.06 |
| HTML) 문단 요소 (0) | 2022.07.06 |
