속성은 HTML 요소에 대한 추가 정보를 제공합니다.
HTML 속성
- 모든 HTML 요소는 속성 을 가질 수 있습니다.
- 속성 은 요소에 대한 추가 정보 를 제공합니다.
- 속성은 항상 시작 태그에 지정됩니다 .
- 속성은 일반적으로 다음과 같이 이름 / 값 쌍으로옵니다. name = "value"
href 속성
HTML 링크는 <a>태그 로 정의됩니다 . 링크 주소는 다음 href속성 에서 지정됩니다 .
예
<a href="https://www.w3schools.com">This is a link</a>src 속성
HTML 이미지는 <img>태그 로 정의됩니다 .
이미지 원본의 파일 이름은 src특성에 지정됩니다 .
예
<img src="img_girl.jpg">너비와 높이 특성
HTML 이미지에는 이미지 의 너비와 높이를 지정하는 크기 속성 집합이 있습니다 .
예
<img src="img_girl.jpg" width="500" height="600">이미지 크기는 픽셀 단위로 지정됩니다. width = "500"은 500 픽셀 너비를 의미합니다.
이미지에 대한 자세한 내용은 HTML 이미지 장을 참조하십시오 .
alt 속성
이 alt속성은 이미지를 표시 할 수 없을 때 사용할 대체 텍스트를 지정합니다.
속성 값은 화면 판독기에서 읽을 수 있습니다. 이 방법으로, 웹 페이지, 예를 들어 시각 장애가있는 사람은 "듣는"누군가 요소를 "들을 수"있습니다.
예
<img src="img_girl.jpg" alt="Girl with a jacket">이 alt속성은 이미지가없는 경우에도 유용합니다.
예
존재하지 않는 이미지를 표시하려고하면 어떤 일이 발생하는지 확인하십시오.
<img src="img_typo.jpg" alt="Girl with a jacket">스타일 속성
style특성 등 색상, 폰트 크기와 같은 요소의 스타일을 지정하는 데 사용
예
<p style="color:red">I am a paragraph</p>lang 특성
문서의 언어는 <html>태그 에서 선언 할 수 있습니다 .
언어는 lang속성으로 선언됩니다 .
접근성 응용 프로그램 (화면 판독기) 및 검색 엔진에 언어를 선언하는 것이 중요합니다.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>처음 두 글자는 언어 (en)를 지정합니다. 방언이있는 경우 두 자 이상의 영문자를 사용하십시오 (영문).
제목 속성
여기 title에는 <p> 요소에 속성이 추가됩니다 . 단락 위로 마우스를 가져 가면 제목 속성의 값이 툴팁으로 표시됩니다.
예
<p title="I'm a tooltip">
This is a paragraph.
</p>우리는 소문자 속성 사용을 제안한다.
HTML5 표준은 소문자 속성 이름을 요구하지 않습니다.
제목 속성은 제목 또는 제목 과 같이 대문자 또는 소문자로 작성할 수 있습니다 .
W3C 는 HTML에서 소문자를 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대해서는 소문자를 요구 합니다.
W3Schools에서는 항상 소문자 속성 이름을 사용합니다.
우리는 다음과 같이 제안합니다 : 인용 속성 값
HTML5 표준은 속성 값을 따옴표로 묶을 필요가 없습니다.
href위의 증명 속성은, 수 따옴표없이 쓸 수 :
나쁜
<a href=https://www.w3schools.com>좋은
<a href="https://www.w3schools.com">W3C는 권장 HTML에서 따옴표를, 그리고 요구 XHTML과 같은 엄격한 문서 유형에 따옴표를.
때때로는 필요에 따옴표를 사용하십시오. 이 예는 공백을 포함하기 때문에 title 속성을 올바르게 표시하지 않습니다
예
<p title=About W3Schools>따옴표를 사용하는 것이 가장 일반적입니다. 따옴표를 생략하면 오류가 발생할 수 있습니다.
W3Schools에서는 항상 속성 값을 따옴표로 묶습니다.
단일 또는 이중 따옴표?
속성 값을 둘러싼 큰 따옴표는 HTML에서 가장 일반적이지만 작은 따옴표도 사용할 수 있습니다.
경우에 따라 속성 값 자체에 큰 따옴표가 들어 있으면 작은 따옴표를 사용해야합니다.
<p title='John "ShotGun" Nelson'>혹은 그 반대로도:
<p title="John 'ShotGun' Nelson">단원 요약
- 모든 HTML 요소는 속성 을 가질 수 있습니다.
- 이
title속성은 추가 "도구 팁"정보를 제공합니다. - 이
href속성은 링크에 대한 주소 정보를 제공합니다. width및height속성은 이미지의 크기 정보를 제공- 이
alt특성은 화면 판독기에 텍스트를 제공합니다.(이미지가 제대로 출력이 안됬을 경우에) - W3Schools에서는 항상 소문자 속성 이름을 사용 합니다.
- W3 스쿨에서 우리는 항상 따옴표 큰 따옴표와 속성 값을 묶어줍니다.
HTML 배운거 테스트해보기!
Test Yourself with Exercises!
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 ---img url 표시할떄 |
| style | Specifies an inline CSS style for an element --칼라색상과 같이 요소에 css style을 줄때 |
| title | Specifies extra information about an element (displayed as a tool tip)-- 요소에 타이틀값을 줄때 |