11. Global Attributes
전역 속성은 HTML 요소들 안에서 공통적으로 사용될 수 있는 속성들을 모아서 전역 속성이라 하며 이에 해당되는 속성들을
정리하면 다음과 같습니다.
|
속성 |
기능 |
|
accessKey |
요소(Element)에 대한 키보드의 문자를 이용하여 단축키(shortcut key)를 설정하는데 사용하는 속성 |
|
class |
CSS에서 스타일을 적용할 요소를 선택할 때 주로 사용하는 속성 |
|
dir |
텍스트의 방향을 명시하는데 사용하는 속성 |
|
draggable |
사용자가 요소를 드래그할 수 있는지 없는지를 나타내는 속성으로 드래그 가능하면 true, 불가능하면 false을 나타냄. |
|
hidden |
해당 요소를 브라우저에 나타내지 않도록 할 때 사용. true, false로 속성값을 설정하여 사용 |
|
id |
CSS와 JavaScript에서 주로 사용하는 속성으로 요소를 고유하게 식별 가능하도록 하는데 사용하는 속성 |
|
lang |
사용하는 언어(language)를 설정하는데 사용. |
|
style |
요소에 인라인(inline) 스타일을 설정할 때 사용하는 속성 |
|
tabindex |
사용자가 웹페이지에서 Tab키를 사용할 때 적용되는 순서를 설정하는데 사용하는 속성 |
|
title |
요소(Element)와 관련된 제목(타이틀)을 설정할 때 사용하는 속성 |
11.1 accessKey, title, tabindex 속성
이제 해당 속성들에
대하여 구체적으로 예제를 통해 알아봅니다. 먼저 accessKey 속성과 title 속성에 대해서 알아보기 위해서 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>accessKey,title 속성 예제</title>
</head>
<body >
<nav>
<p>
<a title="다음(Daum) 페이지로 이동" accesskey="D" href="http://www.daum.net">
다음(Daum)</a>
|
<a title="네이버(Naver) 페이지로 이동"
accesskey="n"
href="http://www.naver.com">
네이버(Naver)</a>
|
<a title="체르니 블로그로 이동" accesskey="f"
href="http://fromyou.tistory.com">
체르니 블로그</a>
</p>
</nav>
</body>
</html>
위에서 accessKey 속성을 이용하여 첫 번째 a 요소(Element) 태그에는 키보드의 ALT+D를 누르면 해당 a 요소에 포커스(focus)가 가도록 설정하고 두 번째 a 요소(Element) 태그에는 키보드의 ALT+n을 누르면 해당 a 요소에 포커스(focus)가 가도록 합니다.
다음으로 세 번째 a 요소(Element) 태그에는
키보드의 ALT+f를 누르면 해당 a 요소에 포커스(focus)가 가도록 설정합니다. 마지막으로 title 속성을 이용하여 해당 a 요소에 대한 타이틀을 설정합니다. “accessKeyEx.html”로 저장하고 IE9로 열어보면 다음과
같이 나타납니다.
여기서 키보드의 ALT+n을 치면 다음과 같이 네이버(Naver)에 초점(focus)가 위치하게 됩니다. 이상태에서 키보드에 엔터(Enter)를 누르면 네이버 페이지를 화면에 나타내게 됩니다.
이 경우에서
보는 것처럼 accessKey 속성을 이용하면 마우스를 클릭하여 네이버 페이지로 이동하는 작업을 수행할
수 있습니다.
동일한 순서로 “ALT+D”, “ALT+f”에 대해서도 다시 “accessKeyEx.html”을 열어서 확인해봅니다. accessKey 속성을
이용할 경우 마우스를 이용하지 않더라도 특정 요소에 초점(focus)을 줄 수 있지만 브라우저별로 특정
단축키가 이미 사용되는 경우도 있으므로 이를 고려하여 사용하여야 합니다.
다음으로 “accessKeyEx.html”을 열어서 마우스로 다음(Daum)에 위치시키면 다음과 같이 title 속성에 설정된 문자열이
나타나게 되며 이를 통해 이동할 페이지에 대한 타이틀을 미리 파악할 수 있습니다.
마지막으로 tabindex 속성을 이용하려면 “accessKeyEx.html”에서 3개의 a 요소의 시작태그에 0보다
큰 정수의 형태로 다음과 같이 작성해주면 tabindex 속성값에 설정된 값의 순서대로 Tab키를 누를 경우 동작하게 됩니다.
<a
title="다음(Daum) 페이지로 이동" tabindex="5" accesskey="D"
href="http://www.daum.net">다음(Daum)</a>
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| CSS(Cascading Style Sheets) (0) | 2013.07.31 |
|---|---|
| 11.2 class, id, style 속성 (0) | 2013.07.31 |
| 10.4 menu 요소 (0) | 2013.07.31 |
| 10.3 command 요소 (0) | 2013.07.31 |
| 10.2 summary 요소 (0) | 2013.07.31 |