04.HTML Attributes
익스랩 최고 관리자
·2019. 10. 28. 19:26
속성(Attribute)은 HTML 요소에 대한 추가 정보를 제공한다.
HTML 속성
모든 HTML 요소는 속성을 가질 수 있습니다.
속성은 요소에 대한 추가 정보를 제공합니다.
속성은 항상 시작 태그에 명시됩니다.
속성은 일반적으로 다음과 같이 이름 / 값이 쌍으로 주어집니다 : 이름="값"
href 속성
HTML 링크는 <a> 태그로 정의됩니다.
링크 주소는 href 속성으로 줄 수 있습니다.
See the Pen 01.The href Attribute by heunho (@heunho) on CodePen.
이 튜토리얼의 뒷부분에서 링크와 <a>태그에 대해 자세히 배울 수 있습니다.
src 속성
HTML 이미지는 <img> 태그로 정의됩니다.
이미지 소스의 파일 이름은 src 속성으로 지정합니다.
See the Pen 02.The src Attribute by heunho (@heunho) on CodePen.
width와 height 속성
HTML 이미지에는 이미지의 너비와 높이를 지정하는 크기 속성 집합이 있습니다.
See the Pen 03.The width and height Attributes by heunho (@heunho) on CodePen.
이미지 크기는 pixel 단위로 지정됩니다. width="500"에서 500은 pixel 너비를 의미합니다.
alt 속성
alt 속성은 이미지를 표시 할 수 없을 때 사용할 대체 텍스트를 지정합니다.
속성 값은 화면 판독기에서 읽을 수 있습니다. alt 속성을 적용하면 웹 페이지에서 듣기 기능을 사용할 수 있습니다.
See the Pen 04.The alt Attribute by heunho (@heunho) on CodePen.
alt 속성은 이미지를 표시하지 못하는 경우에도 유용합니다.
style 속성
style 속성은 색상, 글꼴, 크기 등과 같이 요소의 스타일을 지정하는데 사용됩니다.
즉, style 속성은 CSS에 관련된 속성입니다.
See the Pen 05.The style Attribute by heunho (@heunho) on CodePen.
style 속성은 뒷부분이나 CSS 자습서에서 style에 대해 자세히 배울 수 있습니다.
lang 속성
문서의 언어는 <html> 태그에서 선언할 수 있습니다.
언어는 lang 속성으로 선언됩니다.
접근성 응용 프로그램 (스크린 리더) 및 검색 엔진에서 언어를 인식하게 하는 것이 좋습니다.
<!DOCTYPE html>
<html lang="ko">
<body>
...
</body>
</html>
title 속성
여기에서 title 속성이 <p>요소에 추가됩니다. 단락 위로 마우스를 가져가면 제목 속성의 값이 툴팁으로 표시됩니다.
See the Pen 07.The title Attribute by heunho (@heunho) on CodePen.
HTML은 소문자 속성 사용을 추천합니다.
HTML5 표준은 소문자 속성 이름을 요구하지 않습니다.
W3Schools은 HTML에서 소문자를 권장하고 XHTML과 같이 더 엄격한 문서 유형엔 소문자를 요구합니다.
W3Schools에서는 항상 소문자로 된 속성 이름을 사용합니다.
우리는 다음과 같이 제안합니다.
HTML5 표준은 속성 값을 따옴표(")로 묶을 필요가 없습니다.
위에서 설명한 href 속성은 따옴표(")없이 작성할 수 있습니다.
BAD
<!DOCTYPE html>
<html>
<body>
<a href=https://www.w3schools.com>이것은 링크입니다.</a>
</body>
</html>
GOOD
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com">이것은 링크입니다.</a>
</body>
</html>
W3Schools은 HTML에서 따옴표(")를 사용하고 XHTML과 같이 더 엄격한 문서 형식에 대한 견적을 요구합니다.
때로는 따옴표(")를 사용해야합니다. 공백을 포함하는 경우 올바르게 표시되지 않기 때문입니다.
즉, 따옴표(")를 사용하는 것을 추천하며, 공백이 없을 경우 안써도 실행은 된다는 것을 알고 넘어가시면 될것 같습니다.
작은 따옴표( ' )와 큰 따옴표( " )
속성 값을 둘러싼 큰 따옴표는 HTML에서 가장 일반적이지만 작은 따옴표로도 사용할 수 있습니다.
경우에 따라 속성 값 자차에 큰 따옴표가 들어가 있을 경우 작은 따옴표를 사용해야합니다.
See the Pen 08.Single or Double Quotes by heunho (@heunho) on CodePen.
단원 요약
- 모든 HTML 요소는 속성을 가질 수 있습니다.
- title 속성은 추가 "툴팁"정보를 제공합니다.
- href 속성은 링크에 대한 주소 정보를 제공합니다.
- width 및 height 속성은 이미지 크기 정보를 제공합니다.
- alt 속성은 스크린 리더에 텍스트를 제공합니다.
- W3Schools에서는 항상 소문자로 속성 이름을 사용합니다.
- W3Schools에서는 항상 속성 값을 큰 따옴표로 지정합니다.
자주 사용되는 HTML 속성
다음은 HTML에서 자주 사용되는 일부 속성의 목록입니다.
자세한 내용은 HTML 속성 레퍼런스에서 보도록 합시다.
| 속성 | 설명 |
| alt | 이미지를 표시 할 수 없을때 이미지의 대체 텍스트를 지정합니다. |
| disabled | 입력 요소를 사용하지 않도록 지정합니다. |
| href | 링크의 URL (웹 주소)을 지정합니다. |
| id | 요소의 고유 ID를 지정합니다. |
| src | 이미지의 URL (웹 주소)을 지정합니다. |
| style | 요소에 대한 인라인 CSS 스타일을 지정합니다. |
| title | 요소에 대한 추가 정보를 지정합니다. (툴 팁으로 표시됨). |
틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.
질문도 올려주시면 아는 선에서 답변해드리겠습니다.
대부분의 내용의 저작권은 w3schools에 있습니다.
HTML Attributes
HTML Attributes Attributes provide additional information about HTML elements. HTML Attributes All HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usua
www.w3schools.com
'IT 언어 연구소 > HTML,CSS [초급, 기본 개념, W3C 번역]' 카테고리의 다른 글
| 06.HTML Paragraphs (0) | 2019.10.28 |
|---|---|
| 05.HTML Heading (0) | 2019.10.28 |
| 03. HTML Elements (0) | 2019.10.28 |
| 02. HTML Basic (0) | 2019.10.28 |
| 01. HTML Introduction (0) | 2019.10.28 |
