본문으로 이동

HTML 속성

위키백과, 우리 모두의 백과사전.

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

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

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

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

설명

[편집]

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

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

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

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

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

HTML 솔루션

[편집]

HTML 속성은 일반적으로 필수 속성, 선택적 속성, 표준 속성, 이벤트 속성으로 분류된다.

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

필수 및 선택적

[편집]

두 요소에서 사용됨

[편집]
  • <a> 및 <area>:
    • coords — 그 내부의 <area> 또는 <link>의 좌표.
    • shape — 그 내부의 <area> 또는 <link>의 모양. 값: default, rect, circle, poly.
  • <a> 및 <link>:
    • hreflang — 연결된 문서의 언어 코드. (<a>, <link>)
    • rel — 연결된 문서의 성격 (현재 표시된 페이지와의 관계). <a>의 경우 자유 텍스트이지만, <link>은 용어 세트(alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)를 사용한다.
    • rev — 현재 표시된 페이지의 성격 (연결된 문서와의 관계). rel과 마찬가지로 <a> 및 <link>에 따라 다르다.
  • <applet> 및 <object>:
  • <basefont> 및 <font>:
  • <col> 및 <colgroup>:
  • <del> 및 <ins>:
  • <form> 및 <input>:
    • accept — <form> 또는 <input> 업로드 시 허용되는 파일 유형
  • <frame> 및 <iframe>:
    • frameborder — 값 (0 또는 1)은 <frame> 또는 <iframe> 주위에 테두리를 표시할지 여부를 지정한다.
    • marginheight — <frame> 또는 <iframe> 주위의 상단 및 하단 여백(픽셀 단위).
    • scrolling — 값 (yes, no, auto)은 <frame> 또는 <iframe> 주위에 스크롤 바를 표시할지 여부를 지정한다.
    • marginwidth — <frame> 또는 <iframe> 주위의 좌측 및 우측 여백(픽셀 단위).
  • <frameset> 및 <textarea>:
  • <img> 및 <object>:
    • usemap — <img>과 함께 사용할 map 요소의 이름을 지정하거나 <object>과 함께 사용할 이미지 맵의 URL을 지정한다.
  • <input> 및 <textarea>:
    • readonly — <input> 및 <textarea>에 대해 읽기 전용 텍스트를 지정한다.
  • <link> 및 <style>:
    • media — <link> 및 <style>에 대해 디스플레이 장치를 지정한다. 값: all, aural, braille, handheld, print, projection, screen, tty, TV.
  • <optgroup> 및 <option>:
  • <td> 및 <th>:
    • abbr — 표 cell 또는 header의 약어 버전.
    • axis — 표 cell 또는 header의 카테고리 이름.
    • colspan — 표 cell 또는 header가 차지하는 열 수.
    • nowrap — (사용 중단됨) 표 cell 또는 header의 줄 바꿈을 방지한다.
    • rowspan — 표 cell 또는 header가 차지하는 행 수.
    • scope — 일반 브라우저 표시에는 영향을 미치지 않지만 표 cell 또는 header를 다른 셀에 대한 논리적 헤더로 표시한다. 값: col, colgroup, row, rowgroup.

여러 요소에서 사용됨

[편집]

표준 속성

[편집]

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

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

이벤트 속성

[편집]

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

  • onabort
  • onautocomplete
  • onautocompleteerror
  • onblur
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncuechange
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreset
  • onresize
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onsort
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • onwaiting

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

같이 보기

[편집]

각주

[편집]
  1. ↑ “Index of the HTML 4 Attributes”. W3C. 2015년 2월 13일에 확인함.
  2. ↑ “On SGML and HTML”. World Wide Web Consortium. 2008년 11월 16일에 확인함.
  3. ↑ “XHTML 1.0 – Differences with HTML 4”. World Wide Web Consortium. 2008년 11월 16일에 확인함.
  4. ↑ Korpela, Jukka (1998년 7월 6일). “Why attribute values should always be quoted in HTML”. Cs.tut.fi. 2008년 11월 16일에 확인함.
  5. ↑ “Tags used in HTML”. World Wide Web Consortium. 1992년 11월 3일. 2008년 11월 16일에 확인함.
  6. ↑ “Objects, Images, and Applets in HTML documents”. World Wide Web Consortium. 1999년 12월 24일. 2008년 11월 16일에 확인함.
  7. ↑ 그러나 동일한 요소에 여러 식별자가 적용될 수 있다. 특히 한 요소가 각각 식별자를 가진 다른 요소 내부에 있을 수 있다.
  8. ↑ “HTML id”. 《W3Schools》. 2020년 4월 27일에 원본 문서에서 보존된 문서. 2020년 4월 27일에 확인함.
  9. ↑ “HTML Global id Attribute”. 《W3Schools》. 2020년 4월 27일에 확인함.
  10. ↑ “HTML Classes”. 《W3Schools》. 2020년 4월 27일에 확인함.
  11. ↑ “HTML Global class Attribute”. 《W3Schools》. 2020년 4월 27일에 확인함.
  12. ↑ “HTML Styles”. 《W3Schools》. 2023년 5월 12일에 확인함.
  13. ↑ “HTML Global style Attribute”. 《W3Schools》. 2023년 5월 12일에 확인함.
  14. ↑ “CSS Syntax”. 《W3Schools》. 2023년 5월 12일에 확인함.
  15. ↑ “HTML Global Attributes”. W3Schools.
  16. ↑ “HTML Event Attributes”. W3Schools.
  17. 1 2 3 “Global attributes – HTML (HyperText Markup Language)”. 《MDN Web Docs》. 2015년 2월 12일에 확인함.
  18. ↑ “HTML reference – HTML (HyperText Markup Language)”. 《MDN Web Docs》. 2015년 2월 13일에 확인함.
원본 주소 "https://ko.wikipedia.org/w/index.php?title=HTML_속성&oldid=41405026"