HTML 속성

HTML 속성(HTML attribute) 또는 하이퍼텍스트 마크업 언어 속성(Hypertext markup language attributes)은 HTML 요소의 동작이나 표시를 조정하는 데 사용되는 특별한 단어다. 속성은 요소 유형의 기본 기능을 수정하거나, 속성 없이는 올바르게 작동할 수 없는 특정 요소 유형에 기능을 제공한다. HTML 구문에서 속성은 HTML 시작 태그에 추가된다.

다음과 같은 몇 가지 기본 속성 유형이 확인되었다: (1) 특정 요소 유형이 올바르게 작동하기 위해 필요한 필수 속성; (2) 요소 유형의 기본 기능을 수정하는 데 사용되는 선택적 속성; (3) 많은 요소 유형에서 지원되는 표준 속성; (4) 특정 상황에서 실행될 스크립트를 지정하기 위해 요소 유형에 사용되는 이벤트 속성.

Doctype HTML은 브라우저에 문서가 어떤 버전의 HTML로 작성되었는지 알려주는 선언이다.

일부 속성 유형은 다른 요소 유형을 수정할 때 다르게 작동한다. 예를 들어, 속성 name은 여러 요소 유형에서 사용되지만 각 요소에서 약간씩 다른 기능을 수행한다.

 설명 
HTML 속성은 일반적으로 =로 구분된 이름-값 쌍으로 나타나며, 요소의 이름 뒤에 요소의 시작 태그 내에 작성된다.

<element attribute="value">element content</element>

여기서 element는 HTML 요소 유형의 이름을 나타내고, attribute는 제공된 value(값)로 설정된 속성의 이름이다. 값은 작은따옴표나 큰따옴표로 묶을 수 있지만, 특정 문자로 구성된 값은 HTML에서 따옴표 없이 남겨둘 수 있다(단, XHTML에서는 불가능하다). 속성 값을 따옴표 없이 남겨두는 것은 안전하지 않은 것으로 간주된다.

대부분의 속성은 쌍을 이루는 이름과 값으로 제공되지만, 일부 속성은 요소의 시작 태그에 존재하는 것만으로 요소에 영향을 미치기도 한다 (img 요소의 ismap 속성처럼 말이다).

약어 요소인 abbr을 사용하여 이러한 다양한 속성을 보여줄 수 있다.

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

이 예시는 링크가 아니면서 파란색으로 표시된 HTML로 표시되며, 대부분의 브라우저에서 약어에 커서를 올리면 노란색 배경이 떠 있는 형태(말풍선) 내에 제목 텍스트 "Hypertext Markup Language"가 표시된다.

<div style="text-align: center;">Centered text</div>

또 다른 예시에서 텍스트는 다음과 같이 표시된다.

Centered text

대부분의 요소는 언어 관련 속성인 lang과 dir도 가질 수 있다.

 공통 속성 

일반적으로 HTML 요소는 다음과 같은 몇 가지 가장 일반적인 표준 속성을 가질 수 있다(전체 목록 보기):

 id 속성은 요소에 대해 문서 전체에서 고유한 식별자를 제공한다.그러나 동일한 요소에 여러 식별자가 적용될 수 있다. 특히 한 요소가 각각 식별자를 가진 다른 요소 내부에 있을 수 있다. 이는 프레젠테이션 속성을 제공하기 위한 CSS 선택자로 사용되거나, 브라우저가 특정 요소에 주의를 집중하도록 하거나, 스크립트가 요소의 내용이나 프레젠테이션을 변경하는 데 사용될 수 있다. 페이지의 URL 끝에 추가되면, URL은 문서 내의 특정 요소(일반적으로 페이지의 하위 섹션)를 직접 가리킨다. 예를 들어, http://en.wikipedia.org/wiki/HTML#Attributes에서 ID "Attributes"는 "HTML" 페이지의 "Attributes" 섹션을 나타낸다.
 class 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다. 의미론적으로 예를 들어 클래스는 마이크로포맷에서 사용된다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소와 일치하는 선택자를 구성할 수 있다. 예를 들어, HTML 문서는 class="notation"이라는 지정을 사용하여 이 클래스 값을 가진 모든 요소가 문서의 본문에 종속됨을 나타낼 수 있다. 이러한 요소는 HTML 소스 내의 위치가 제안하는 위치에 나타나는 대신 페이지의 각주로 모일 수 있다. 스타일 시트 작성자는 .notation 선택자로 규칙을 정의하고 font-size: small; 속성을 정의할 수도 있다.
 style 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 세미콜론과 선택적 공백으로 구분하여 여러 스타일 선언을 추가할 수 있으며, 각 선언에는 콜론과 선택적 공백으로 구분된 CSS 속성 이름과 값이 포함된다(예: style="color: red; text-align: center;"). style 속성은 모든 HTML 요소에서 사용할 수 있다(모든 HTML 요소에서 유효성 검사를 통과하지만 반드시 유용한 것은 아니다). 스타일 정보를 스타일 시트에 추가하는 것이 더 좋은 관행으로 간주되며, 이는 종종 요소 클래스나 ID와 일치하는 선택자로 수행된다. 그러나 단순하고 구체적이거나 임시 스타일 사양의 경우 스타일 시트가 너무 번거롭다고 간주될 때 인라인 스타일이 선호되기도 한다.
 title 속성은 요소에 부차적인 텍스트 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 흔히 말풍선이라고 불리는 형태로 표시된다.

 HTML 솔루션 
HTML 속성은 일반적으로 필수 속성, 선택적 속성, 표준 속성, 이벤트 속성으로 분류된다.
 일반적으로 필수 및 선택적 속성은 특정 HTML 요소를 수정한다.
 반면 표준 속성은 대부분의 HTML 요소에 적용될 수 있다.
 HTML 버전 4에서 추가된 이벤트 속성을 사용하면 특정 상황에서 실행될 스크립트를 요소가 지정할 수 있다. 스크립트는 HTML 솔루션에 입력할 수 있는 것이다. HTML 스크립트는 수감자들이 알고 있는 용도다.
 HTML 스크립트는 기억할 수 있는 것이다.
 때때로 HTML은 소스용으로 이해 가능하다.

 필수 및 선택적 

 두 요소에서 사용됨 
  및 :
 coords — 그 내부의  또는 의 좌표.
 shape — 그 내부의  또는 의 모양. 값: default, rect, circle, poly.
  및 :
 hreflang — 연결된 문서의 언어 코드. (, )
 rel — 연결된 문서의 성격 (현재 표시된 페이지와의 관계). 의 경우 자유 텍스트이지만, 은 용어 세트(alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)를 사용한다.
 rev — 현재 표시된 페이지의 성격 (연결된 문서와의 관계). rel과 마찬가지로  및 에 따라 다르다.
  및 :
 archive — 아카이브 URL(들) (, )
 codebase — 베이스 URL (, )
  및 :
 color — 텍스트 색상 (사용 중단됨) (, )
 face — 글꼴 패밀리 (사용 중단됨) (, )
  및 :
 span — 걸쳐 있는 열의 수 (, )
  및 :
 datetime — 텍스트  또는  날짜와 시간.
  및 :
 accept —  또는  업로드 시 허용되는 파일 유형
  및 :
 frameborder — 값 (0 또는 1)은  또는  주위에 테두리를 표시할지 여부를 지정한다.
 marginheight —  또는  주위의 상단 및 하단 여백(픽셀 단위).
 scrolling — 값 (yes, no, auto)은  또는  주위에 스크롤 바를 표시할지 여부를 지정한다.
 marginwidth —  또는  주위의 좌측 및 우측 여백(픽셀 단위).
  및 :
 cols —  또는 의 보이는 열 수 (일부 변형 있음)
 rows —  또는 의 보이는 행 수 (일부 변형 있음)
  및 :
 usemap — 과 함께 사용할 map 요소의 이름을 지정하거나 과 함께 사용할 이미지 맵의 URL을 지정한다.
  및 :
 readonly —  및 에 대해 읽기 전용 텍스트를 지정한다.
  및 :
 media —  및 에 대해 디스플레이 장치를 지정한다. 값: all, aural, braille, handheld, print, projection, screen, tty, TV.
  및 :
 label —  또는 에 대한 설명 텍스트.
  및 :
 abbr — 표  또는 의 약어 버전.
 axis — 표  또는 의 카테고리 이름.
 colspan — 표  또는 가 차지하는 열 수.
 nowrap — (사용 중단됨) 표  또는 의 줄 바꿈을 방지한다.
 rowspan — 표  또는 가 차지하는 행 수.
 scope — 일반 브라우저 표시에는 영향을 미치지 않지만 표  또는 를 다른 셀에 대한 논리적 헤더로 표시한다. 값: col, colgroup, row, rowgroup.

 여러 요소에서 사용됨 
 align — , , , , , , , , 
 align은 다음에서도 사용 중단됨: , ,  ~ , , , , , , , 
 alt — , , , 
 bgcolor — , , , , 
 border — , , 
 char — , , , , , , , 
 charoff — , , , , , , , 
 charset — , , 
 cite — , , , 
 compact — , , , 
 disabled — , , , , , 
 height — , , , . 또한 다음에서 사용 중단됨: , 
 href — , , , 
 hspace — , . 또한 다음에서 사용 중단됨: 
 longdesc — , , 
 name — , , , , , , , , , , , , 
 size — , , , , 
 src — , , , , 
 target — , , , , 
 type — , , , , , , , , , 
 valign — , , , , , , , 
 value — , , , , 
 vspace — , , 
 width — , , , , , , , , , , 

 표준 속성 

표준 속성은 전역 속성으로도 알려져 있으며, 수많은 요소와 함께 작동한다. 여기에는 기본 표준 속성인 accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title 등이 포함된다. 실험적인 것들도 있다. xml:lang과 xml:base는 모두 사용 중단되었다. 여러 aria-* 속성은 접근성을 개선한다. 이벤트 핸들러 속성은 나중에 나열된다.

기술적으로 모든 표준 속성은 모든 요소에서 수락되어야 하지만, 일부 요소에서는 작동하지 않을 수 있다. 아래 표는 몇 가지 공통 표준 속성과 이들이 작동할 수 있는 일부 요소를 나열한다.

요소idclassstyletitledirlangxml:langaccesskeytabindex                                                                                                                                                                                                                                               , , , , ,                                                                                                                                                                                                                                                                                                              

 이벤트 속성 

표준 속성에는 이벤트 핸들러 속성이 포함된다. 이들은 모두 on- 접두사가 붙는다.

HTML 버전 4에서 추가된 이벤트 속성을 사용하면 특정 상황에서 실행될 스크립트를 요소가 지정할 수 있다. 아래 표는 몇 가지 공통 이벤트 핸들러 속성과 이들이 작동할 수 있는 일부 요소를 나열한다.

 요소                                                                                                                                                                                                                                                 , , , , ,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

 같이 보기 
 HTML 요소

 각주 

분류:HTML