어떤 요소들에도 적용할 수 있는 글로벌 속성에 대하여 알아봅니다.
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>p 요소 : 문단에 관한 주석을 제공할 때 사용한다.
<p title="이 내용은 다음 회기에 개정될 예정이다">img 요소 : 이미지 파일에 관한 추가 설명이 필요할 때 사용한다.
<img src="shose.jpg" alt="어린이 등산화" title="사진 속 크기는 실제와 같습니다.">input 요소 : 입력 컨트롤에 관한 사용 설명이 필요할 때 사용한다.
<input type="tel" title="숫자만 입력">abbr 요소 : 약어나 두문자어를 풀이할 때 사용한다. 중요도가 높은 약어는 title 속성으로 설명하지 않고 본문에 직접 출력하는 것이 좋다.
<abbr title="HyperText Markup Language">HTML</abbr>요소에 대한 설명이나 주석으로 본문의 내용이 복잡해지지 않도록 title 속성을 사용하면 된다.
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
