HTML Global Attributes
HTML Attributes
- 태그 안에는 Attribute라는 속성이 존재한다.
- CSS는 html태그의 class 속성과 연결되어 태그에 스타일을 추가해준다.
- boolean 형식의 속성들이 있는데, 값을 따로 명시하지 않아도 속성명을 태그 안에 써주기만 해도 동작하는 것들이다.
<ol type="i" reversed>에서 reversed가 boolean 형식의 속성이다. 써주기만 해도 order가 뒤집힌다.
- 태그마다 공통으로 가지고 있는 속성도 있고 고유한 속성도 있다. 이번에는 태그마다 공통으로 가지고 있는 속성(Global Attributes)에 대해 포스팅하겠습니다.
Global Attribute
자주 사용되는 Global Attribute는 다음과 같다.
[1] id
- Element에 식별자를 지정한다. (유니크해야 함)
[2] class
- stylesheet에 정의된 class를 Element에 지정한다.
[3] hidden
- CSS의 hidden과는 다르다. 브라우저에서 아예 렌더링하지 않게 만든다.
- boolean 속성이기 때문에, 따로 값을 넣어주지 않고 start tag에 hidden을 써주기만 하면 된다.
[4] lang
- 요소에 사용된 언어를 정의해준다.
- lang 속성을 사용하면, 검색엔진 봇이 크롤링할 때 웹페이지 언어를 인식하게 하여 검색엔진 최적화를 할 수 있다. 뿐만 아니라 화면 낭독기를 사용할 경우, lang 속성 값에 명시된 언어에 맞춰 발음이나 목소리등을 다르게 들려주어 웹 접근성을 높일 수 있다.
- 보통
<html lang='ko'>처럼 html 태그에 작성하여 웹 페이지의 메인 언어를 정의해준다.
웹 페이지에 다양한 언어가 존재하면, Element마다 lang 속성을 사용해주면 좋다.
[5] style
- Element에 inline style을 지정한다.
[6] tabindex
<input type="text" tabindex="100">
<input type="password" tabindex="300">- tab 네비게이션의 순서를 지정한다.
- tab key를 누를 때, tabindex의 값이 낮은 것에서 높은 것으로 포커싱된다.
- tabindex 값을
-1로 주면 포커싱 되지 않는다.
[7] title
- Element의 제목을 지정한다.
- Contents를 대표하는 내용으로 사용하는 것이 아니라, 요소에 대핸 추가정보를 주석처럼 달아주는 것으로 생각하면 된다.
Author And Source
이 문제에 관하여(HTML Global Attributes), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@marulloc/HTML-Global-Attributes저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
