[HTML 강좌] 5. HTML의 기본 구조 - Element(요소)의 속성(Attributes)

Element(요소)는 속성(Attributes)를 통하여 추가적인 내용을 표현합니다. 특히 문서를 꾸미거나 부가적인 정보를 표현할때 사용됩니다.

학습 목표

HTML의 문장을 이루는 Element(요소)에 대하여 속성(Attributes)을 통하여 추가적인 정보를 표현하는 방법을 습득합니다.

Attribute(속성)의 표현

대표사진 삭제

사진 설명을 입력하세요.

위의 예시는 class 라는 속성을 표현한 것으로 스타일 및 기타 내용을 위해 Element(요소)에 구분하는 명칭을 부가하는데 사용하는 속성입니다.

Attribute(속성)를 사용은 아래 내용을 지켜서 작성되어야 합니다.

1. 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백으로 구분됩니다.

2. 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.

3. 속성은 이름과 값으로 구분됩니다.

4. 이름 다음엔 등호(=)를 사용하며 속성 값은 열고 닫는 따옴표로 묶여져야 합니다.

※ 주의 : 따옴표는 작은 따옴표(' ')와 큰 따옴표(" ") 둘 다 사용할 수 있으며, 생략 가능합니다.

단, 추후 HTML 코드를 읽을때 가독성 떄문에 가능하면 따옴표의 생략을 사용하지 않

음을 권장합니다.

Attributes(속성)의 값의 유형

Attribute(속성)은 Attribute 에서 문자열과 지정된 값만 사용하는 상수, 그리고 참과 거짓을 나타내는 Boolean 으로 지정될 수 있습니다.

Attribute(속성)은 Elements(요소)에서 사용가능한 속성이 정해져 있으며, 정해진 Attribute(속성)에도 등록 가능한 값이 정해져 있습니다.

사용하고자 하는 Elements(요소)에 대한 속성은 종류가 매우 다양하므로, 사용시점에 해당 Elements(요소)에 대한 내용을 찾아서 적용하시기 바랍니다.

주로 사용되는 속성

주로 사용되는 속성과 속성이 적용가능한 요소는 다음 표에 적용되어 있습니다.

속성	요소	설명
accept	<form>, <input>	서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset	<form>	지원하는 문자 집합 목록
action	<form>	폼을 통해서 전송 정보를 처리하는 프로그램의 URL
autocomplete	<form>, <input>	폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus	<button>, <input>, <keygen>, <select>, <textarea>	페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge	<keygen>	공개 키(public key)와 함께 전송되는 문자열입니다.
checked	<input>	해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다.
cols	<textarea>	textarea의 세로줄 수를 설정합니다.
data	<object>	자원의 URL을 명시합니다.
dirname	<input>, <textarea>
disabled	<button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>	사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype	<form>	POST방식으로 전송되는 데이터의 타입을 설정합니다.
for	<label>, <output>	Describes elements which belongs to this one.
form	<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>	요소의 소유자인 폼을 나타냅니다.
high	<meter>	Indicates the lower bound of the upper range.
keytype	<keygen>	Specifies the type of key generated.
list	<input>	Identifies a list of pre-defined options to suggest to the user.
low	<meter>	Indicates the upper bound of the lower range.
max	<input>, <meter>, <progress>	허용되는 최댓값을 나타냅니다.
maxlength	<input>, <textarea>	요소에서 허용되는 특징의 최대 수를 명시합니다.
method	<form>	Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min	<input>, <meter>	허용되는 최솟값을 나타냅니다.
multiple	<input>, <select>	Indicates whether multiple values can be entered in an input of the type email or file.
name	<button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea>	요소의 이름. For example used by the server to identify the fields in form submits.
novalidate	<form>	This attribute indicates that the form shouldn't be validated when submitted.
optimum	<meter>	Indicates the optimal numeric value.
pattern	<input>	Defines a regular expression which the element's value will be validated against.
placeholder	<input>, <textarea>	Provides a hint to the user of what can be entered in the field.
readonly	<input>, <textarea>	Indicates whether the element can be edited.
required	<input>, <select>, <textarea>	Indicates whether this element is required to fill out or not.
rows	<textarea>	Defines the number of rows in a textarea.
selected	<option>	Defines a value which will be selected on page load.
size	<input>, <select>	Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src	<input>	The URL of the embeddable content.
step	<input>
target	<form>
type	<button>, <input>	Defines the type of the element.
usemap	<input>
value	<button>, <option>, <input>, <meter>, <progress>	Defines a default value which will be displayed in the element on page load.
wrap	<textarea>	Indicates whether the text should be wrapped

이번 포스팅에서는 Elements(요소)의 추가 정보를 표현하는 속성(Attributes)에 대해서 살펴 봤습니다.

다음 포스팅에서는 HTML 문서의 구조를 실전 예제를 통하여 만들어보고 설명하도록 하겠습니다.

긴 글 읽어주셔서 감사합니다.

728x90

막새바람

[HTML 강좌] 5. HTML의 기본 구조 - Element(요소)의 속성(Attributes)