Attributes provide additional information about HTML elements.
속성은 HTML 요소에 대한 추가 정보를 제공합니다.
HTML Attributes
All HTML elements can have attributes
모든 HTML 요소는 속성 을 가질 수 있습니다.
Attributes provide additional information about an element
속성 은 요소에 대한 추가 정보를 제공합니다.
Attributes are always specified in the start tag
속성은 항상 시작 태그에 지정됩니다 .
Attributes usually come in name/value pairs like: name="value"
속성은 일반적으로 다음과 같이 이름 / 값 쌍으로 옵니다. name = "value"
The href Attribute
HTML links are defined with the <a>tag. The link address is specified in the href attribute:
HTML 링크는 <a>태그 로 정의됩니다 . 링크 주소는 다음 href속성 에서 지정됩니다 .
You will learn more about links and the <a> tag later in this tutorial.
링크 및 <a>태그 에 대한 자세한 내용은 이 자습서 뒷부분에 있습니다.
The src Attribute
HTML images are defined with the <img> tag.
HTML 이미지는 <img>태그 로 정의됩니다 .
The filename of the image source is specified in the src attribute:
이미지 원본의 파일 이름은 src특성에 지정됩니다 .
The width and height Attributes
너비와 높이 특성
Images in HTML have a set of size attributes, which specifies the width and height of the image:
HTML 이미지에는 이미지 의 너비와 높이를 지정하는 크기 속성 집합이 있습니다 .
The image size is specified in pixels: width="500" means 500 pixels wide.
이미지 크기는 픽셀 단위로 지정됩니다. width = "500"은 500 픽셀 너비를 의미합니다.
You will learn more about images in our HTML Images chapter.
이미지에 대한 자세한 내용은 HTML 이미지 장을 참조하십시오 .
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
이 alt속성은 이미지를 표시 할 수 없을 때 사용할 대체 텍스트를 지정합니다.
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.
속성 값은 화면 판독기에서 읽을 수 있습니다. 이렇게하면 웹 페이지 (예 : 시각 장애인)를 "듣는"사람이 요소를 "들을 수 있습니다".
The alt attribute is also useful if the image does not exist:
이 alt속성은 이미지가없는 경우에도 유용합니다.
Example
See what happens if we try to display an image that does not exist:
존재하지 않는 이미지를 표시하려고하면 어떤 일이 발생하는지 확인하십시오.
1 | <img src="img_typo.jpg" alt="Girl with a jacket"> | cs |
The style Attribute
The <code class="w3-codespan">style</code> attribute is used to specify the styling of an element, like color, font, size etc.
style특성 등 색상, 폰트 크기와 같은 요소의 스타일을 지정하는 데 사용
You will learn more about styling later in this tutorial, and in our CSS Tutorial.
이 튜토리얼의 뒷부분과 CSS 자습서 에서 스타일에 대해 자세히 배웁니다 .
The lang Attribute
The language of the document can be declared in the <html> tag.
문서의 언어는 <html>태그 에서 선언 할 수 있습니다 .
The language is declared with the lang attribute.
언어는 lang속성으로 선언됩니다 .
Declaring a language is important for accessibility applications (screen readers) and search engines:
접근성 응용 프로그램 (화면 판독기) 및 검색 엔진에 언어를 선언하는 것이 중요합니다.
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> | cs |
The first two letters specify the language (en). If there is a dialect, use two more letters (US).
처음 두 글자는 언어 (en)를 지정합니다. 방언이있는 경우 두 자 이상의 영문자를 사용하십시오 (영문).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
여기 title에는 <p> 요소에 속성이 추가됩니다 . 단락 위로 마우스를 가져 가면 제목 속성의 값이 툴팁으로 표시됩니다.
We Suggest: Use Lowercase Attributes
우리는 소문자 속성 사용을 제안한다.
The HTML5 standard does not require lowercase attribute names.
HTML5 표준은 소문자 속성 이름을 요구하지 않습니다.
The title attribute can be written with uppercase or lowercase like title or TITLE.
제목 속성은 제목 또는 제목 과 같이 대문자 또는 소문자로 작성할 수 있습니다 .
W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
W3C 는 HTML에서 소문자를 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대해서는 소문자를 요구 합니다.
At W3Schools we always use lowercase attribute names.
W3Schools에서는 항상 소문자 속성 이름을 사용합니다.
We Suggest: Quote Attribute Values
우리는 다음과 같이 제안합니다 : 인용 속성 값
The HTML5 standard does not require quotes around attribute values.
HTML5 표준은 속성 값을 따옴표로 묶을 필요가 없습니다.
The href attribute, demonstrated above, can be written without quotes:
href위의 증명 속성은, 수 따옴표없이 쓸 수 :
W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.
W3C는 권장 HTML에서 따옴표를, 그리고 요구 XHTML과 같은 엄격한 문서 유형에 따옴표를.
Sometimes it is necessary to use quotes. This example will not display the title attribute correctly, because it contains a space:
때때로는 필요에 따옴표를 사용하십시오. 이 예는 공백을 포함하기 때문에 title 속성을 올바르게 표시하지 않습니다.
Using quotes are the most common. Omitting quotes can produce errors.
따옴표를 사용하는 것이 가장 일반적입니다. 따옴표를 생략하면 오류가 발생할 수 있습니다.
At W3Schools we always use quotes around attribute values.
W3Schools에서는 항상 속성 값을 따옴표로 묶습니다.
Single or Double Quotes?
단일 또는 이중 따옴표?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
속성 값을 둘러싼 큰 따옴표는 HTML에서 가장 일반적이지만 작은 따옴표도 사용할 수 있습니다.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
경우에 따라 속성 값 자체에 큰 따옴표가 들어 있으면 작은 따옴표를 사용해야합니다.
1 | <p title='John "ShotGun" Nelson'> | cs |
Or vice versa:
혹은 그 반대로도:
1 | <p title="John 'ShotGun' Nelson"> | cs |
Chapter Summary
All HTML elements can have attributes
모든 HTML 요소는 속성 을 가질 수 있습니다.
The title attribute provides additional "tool-tip" information
이 title속성은 추가 "도구 팁"정보를 제공합니다.
The href attribute provides address information for links
href속성은 링크에 대한 주소 정보를 제공합니다
The width and height attributes provide size information for images
width및 height속성은 이미지의 크기 정보를 제공
The alt attribute provides text for screen readers
이 alt특성은 화면 판독기에 텍스트를 제공합니다.
At W3Schools we always use lowercase attribute names
W3Schools에서는 항상 소문자 속성 이름을 사용 합니다.
At W3Schools we always quote attribute values with double quotes
W3 스쿨에서 우리는 항상 따옴표 큰 따옴표와 속성 값을
Test Yourself with Exercises!
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
다음은 HTML에서 자주 사용되는 일부 속성의 사전 순 목록입니다.
|
Attribute |
Description |
alt |
Specifies an alternative text for an image, when the image cannot be displayed 이미지를 표시 할 수 없을 때 이미지의 대체 텍스트를 지정합니다. |
disabled |
Specifies that an input element should be disabled 입력 요소를 사용하지 않도록 지정합니다. |
href |
Specifies the URL (web address) for a link 링크의 URL (웹 주소)을 지정합니다. |
id |
Specifies a unique id for an element 요소의 고유 ID를 지정합니다. |
src |
Specifies the URL (web address) for an image 이미지의 URL (웹 주소)을 지정합니다. |
style |
Specifies an inline CSS style for an element 요소에 대한 인라인 CSS 스타일을 지정합니다. |
title |
Specifies extra information about an element (displayed as a tool tip) 요소에 대한 추가 정보를 지정합니다 (도구 설명으로 표시됨). |
A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.
각 HTML 요소에 대한 모든 속성의 전체 목록은 HTML 속성 참조에 나열되어 있습니다.
출처 : www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML 단락(HTML Paragraphs) (0) | 2018.06.06 |
|---|---|
| HTML 제목(HTML Headings) (0) | 2018.06.05 |
| HTML 요소(HTML Elements) (0) | 2018.06.03 |
| HTML 기본(HTML Basic) (0) | 2018.06.02 |
| HTML 편집기(HTML Editors) (0) | 2018.06.01 |
