HTML 속성은 HTML 요소의 시작 태그 내에서 요소 이름 뒤에 `=`으로 구분된 이름-값 쌍으로 나타난다. 속성은 필수, 선택, 표준, 이벤트 속성으로 분류되며, 표준 속성은 대부분의 HTML 요소에 적용될 수 있다. 이벤트 속성은 사용자의 특정 행동에 따라 자바스크립트 코드를 실행할 수 있게 해준다.
더 읽어볼만한 페이지
HTML - Alt 속성 `alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.
HTML - 폰트 패밀리 (HTML) 폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
HTML 속성
HTML 속성
정의
HTML 요소의 동작을 제어하는 데 사용되는 여는 태그 내의 특수한 단어
참조
W3C의 HTML 4 속성 색인
2. HTML 속성
HTML 속성은 일반적으로 `이름-값 쌍`으로 나타나며, `=` 기호로 구분하고 요소 이름 뒤의 요소 시작 태그 안에 작성한다. 값은 작은따옴표(`'`)나 큰따옴표(`"`)로 묶을 수 있지만, 특정 문자를 포함하지 않는 경우에는 따옴표 없이 사용할 수도 있다. 하지만 따옴표 없이 속성 값을 사용하는 것은 보안상 안전하지 않은 것으로 간주된다.[21]
'''`id`''' 속성은 요소에 문서 전체에서 고유한 식별자를 제공한다.[7][8][9] 이는 CSS 선택자를 사용하여 표현 속성을 주거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지 URL에 추가되면 URL은 문서 내의 특정 요소(일반적으로 페이지의 하위 섹션)를 직접 가리킨다.
'''`class`''' 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다.[10][11]마이크로포맷에서 의미론적으로 사용되기도 한다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
'''`style`''' 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다.[12][13][14]
'''`title`''' 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
2. 1. 속성 작성법
HTML 속성은 일반적으로 이름-값 쌍으로 나타나며, `=`로 구분하고 요소의 이름 뒤, 요소의 시작 태그 안에 작성한다.
`<태그 속성="값">` 형태로 작성한다.[19][20] 여기서 `태그`는 HTML 요소 유형을, `속성`은 속성의 이름을 가리키며 지정된 `값`을 설정한다. 값은 `‘` 또는 `"`로 감쌀 수 있으나, 특정한 문자들로 이루어진 값들은 HTML에서 인용 부호 없이 남겨둘 수 있다. (XHTML에서는 제외)[19][20] 속성 값을 인용 부호 없이 남겨두는 것은 안전하지 않은 것으로 간주된다.[21]
대부분의 속성은 이름과 값의 쌍으로 제공되지만, 일부 속성은 요소의 시작 태그에 존재함으로써 요소에 영향을 주기도 한다.[5] (예: `img` 요소의 `ismap` 속성[6]).
약어 요소인 `abbr`은 이러한 다양한 속성을 보여주는 데 사용될 수 있다.
```html
HTML
```
위 예시는 링크 없이 파란색으로 HTML로 표시되며, 대부분의 브라우저에서 약어 위에 커서를 놓으면 부동 노란색 배경(툴팁) 내에 제목 텍스트 "Hypertext Markup Language"가 표시된다.
```html
Centered text
```
위 예시에서 텍스트는 중앙에 정렬되어 보일 것이다.
대부분의 요소는 언어 관련 속성 `lang` 및 `dir`을 사용하기도 한다.
3. 속성의 종류
HTML 속성은 크게 필수 속성, 선택 속성, 표준 속성, 이벤트 속성으로 분류할 수 있다.[15][16]
필수 속성 및 선택 속성은 특정 HTML 요소를 수정한다.
표준 속성은 대부분의 HTML 요소에 적용될 수 있다.
이벤트 속성은 HTML 버전 4에 추가되었으며, 특정 상황에서 실행될 스크립트를 지정할 수 있게 한다.
표준 속성은 전역 속성이라고도 하며, 많은 수의 요소와 함께 작동한다.[17] 여기에는 ''accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title''이 포함된다. 또한 몇 가지 실험적인 속성도 있다. ''xml:lang''과 ''xml:base''는 모두 사용 중단되었다. 여러 개의 ''aria-*'' 속성은 접근성을 향상시킨다.[17]
기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다.[18] 아래 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
'''`id`''' 속성은 요소에 문서 전체에서 고유한 식별자를 부여한다.[7][8][9] 이는 CSS 선택자로 사용하여 표현 속성을 제공하거나, 브라우저에서 특정 요소에 초점을 맞추거나, 스크립트에서 요소의 내용 또는 표현을 변경하는 데 사용될 수 있다. 페이지의 URL에 추가하면 URL은 문서 내의 특정 요소, 일반적으로 페이지의 하위 섹션을 직접 대상으로 한다.
'''`class`''' 속성은 유사한 요소를 분류하는 방법을 제공한다. 공백으로 구분하여 여러 클래스 이름을 추가할 수 있다.[10][11]마이크로포맷에서 사용된다. 또한 스타일 시트 작성자는 스타일링 목적으로 클래스별로 요소를 일치시키는 CSS 선택자를 구성할 수 있다.
'''`style`''' 속성은 요소별 스타일 규칙을 적용하는 방법을 제공한다. 여러 스타일 선언은 각 선언에 CSS 속성 이름과 콜론 및 선택적 공백으로 구분된 값(예: `style="color: red; text-align: center;"`)이 포함되도록 세미콜론과 선택적 공백으로 구분하여 추가할 수 있다.[12][13][14] '''`style`''' 속성은 모든 HTML 요소에 사용할 수 있다. 스타일 정보를 스타일 시트에 추가하는 것이 더 나은 방법으로 간주되며, 종종 요소 클래스 또는 ID와 일치하는 선택자를 사용한다.
'''`title`''' 속성은 요소에 부가적인 설명을 첨부하는 데 사용된다. 대부분의 브라우저에서 이 속성은 툴팁으로 표시된다.
표준 속성은 전역 속성이라고도 하며, ''accesskey'', ''class'', ''contenteditable'', ''contextmenu'', ''data'', ''dir'', ''hidden'', ''id'', ''lang'', ''style'', ''tabindex'', ''title'' 등이 있다. ''xml:lang''과 ''xml:base''는 모두 사용 중단되었다. 여러 ''aria-*'' 속성은 접근성을 향상시킨다.[17]
기술적으로 모든 표준 속성은 모든 요소에서 허용되어야 하지만, 일부 요소에서는 작동하지 않는다.[18] 다음 표는 몇 가지 일반적인 표준 속성과 해당 속성이 작동할 수 있는 일부 요소를 나열한다.
요소
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
param
id
head
dir
lang
xml:lang
html
dir
lang
xml:lang
meta
dir
lang
xml:lang
title
dir
lang
xml:lang
style
title
dir
lang
xml:lang
applet
id
class
style
title
br
id
class
style
title
frame
id
class
style
title
frameset
id
class
style
title
iframe
id
class
style
title
basefont
id
class
style
title
dir
lang
center
id
class
style
title
dir
lang
dir
id
class
style
title
dir
lang
font
id
class
style
title
dir
lang
menu
id
class
style
title
dir
lang
s
id
class
style
title
dir
lang
strike
id
class
style
title
dir
lang
u
id
class
style
title
dir
lang
abbr
id
class
style
title
dir
lang
xml:lang
acronym
id
class
style
title
dir
lang
xml:lang
address
id
class
style
title
dir
lang
xml:lang
b
id
class
style
title
dir
lang
xml:lang
big
id
class
style
title
dir
lang
xml:lang
blockquote
id
class
style
title
dir
lang
xml:lang
body
id
class
style
title
dir
lang
xml:lang
caption
id
class
style
title
dir
lang
xml:lang
cite
id
class
style
title
dir
lang
xml:lang
code
id
class
style
title
dir
lang
xml:lang
col
id
class
style
title
dir
lang
xml:lang
colgroup
id
class
style
title
dir
lang
xml:lang
dd
id
class
style
title
dir
lang
xml:lang
del
id
class
style
title
dir
lang
xml:lang
dfn
id
class
style
title
dir
lang
xml:lang
div
id
class
style
title
dir
lang
xml:lang
dl
id
class
style
title
dir
lang
xml:lang
dt
id
class
style
title
dir
lang
xml:lang
em
id
class
style
title
dir
lang
xml:lang
fieldset
id
class
style
title
dir
lang
xml:lang
form
id
class
style
title
dir
lang
xml:lang
hr
id
class
style
title
dir
lang
xml:lang
h1, h2, h3, h4, h5, h6
id
class
style
title
dir
lang
xml:lang
i
id
class
style
title
dir
lang
xml:lang
img
id
class
style
title
dir
lang
xml:lang
ins
id
class
style
title
dir
lang
xml:lang
kbd
id
class
style
title
dir
lang
xml:lang
li
id
class
style
title
dir
lang
xml:lang
link
id
class
style
title
dir
lang
xml:lang
map
id
class
style
title
dir
lang
xml:lang
noframes
id
class
style
title
dir
lang
xml:lang
noscript
id
class
style
title
dir
lang
xml:lang
ol
id
class
style
title
dir
lang
xml:lang
optgroup
id
class
style
title
dir
lang
xml:lang
option
id
class
style
title
dir
lang
xml:lang
p
id
class
style
title
dir
lang
xml:lang
pre
id
class
style
title
dir
lang
xml:lang
q
id
class
style
title
dir
lang
xml:lang
samp
id
class
style
title
dir
lang
xml:lang
small
id
class
style
title
dir
lang
xml:lang
span
id
class
style
title
dir
lang
xml:lang
strong
id
class
style
title
dir
lang
xml:lang
sub
id
class
style
title
dir
lang
xml:lang
sup
id
class
style
title
dir
lang
xml:lang
table
id
class
style
title
dir
lang
xml:lang
tbody
id
class
style
title
dir
lang
xml:lang
td
id
class
style
title
dir
lang
xml:lang
tfoot
id
class
style
title
dir
lang
xml:lang
th
id
class
style
title
dir
lang
xml:lang
thead
id
class
style
title
dir
lang
xml:lang
tr
id
class
style
title
dir
lang
xml:lang
tt
id
class
style
title
dir
lang
xml:lang
ul
id
class
style
title
dir
lang
xml:lang
var
id
class
style
title
dir
lang
xml:lang
label
id
class
style
title
dir
lang
xml:lang
accesskey
legend
id
class
style
title
dir
lang
xml:lang
accesskey
object
id
class
style
title
dir
lang
xml:lang
tabindex
select
id
class
style
title
dir
lang
xml:lang
tabindex
a
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
area
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
button
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
input
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
textarea
id
class
style
title
dir
lang
xml:lang
accesskey
tabindex
3. 3. 이벤트 속성
이벤트 속성은 사용자의 특정 행동(예: 클릭, 마우스 오버, 키 입력 등)에 따라 자바스크립트 코드를 실행할 수 있도록 하는 속성이다. `on`으로 시작하는 이름을 가지며(예: `onclick`, `onmouseover`, `onkeydown`), HTML 버전 4부터 추가되었다.[17]
이벤트 속성은 특정 상황에서 실행할 스크립트를 요소가 지정할 수 있게 한다. 다음 표는 몇 가지 일반적인 이벤트 핸들러 속성과 해당 속성이 작동할 수 있는 일부 요소를 나타낸다.
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.