04. HTML 속성
HTML 속성
모든 HTML 요소는 속성 을 가질 수 있습니다.
속성 은 요소에 대한 추가 정보 를 제공 합니다.
속성은 항상 시작 태그에 지정됩니다 .
속성은 일반적으로 name = "value" 와 같은 이름 / 값 쌍으로 제공됩니다.
href 속성
<a>태그는 하이퍼 링크를 정의합니다. href속성은 링크로 이동 페이지의 URL을 지정합니다.
|
1
|
<a href="https://www.daum.net">daum</a>
|
cs |
src 속성
<img>태그는 HTML 페이지에 포함 된 이미지에 사용됩니다.
src는 경로를 표시하는 속성 지정
|
1
|
<img src="rabbit.jpg">
|
cs |
src 속성에 URL을 지정하는 방법에는 두 가지가 있습니다 .
1. 절대 URL- 다른 웹 사이트에서 호스팅되는 외부 이미지에 대한 링크입니다.
참고 : 외부 이미지는 저작권이있을 수 있습니다. 사용 허가를받지 못하면 저작권법에 위배 될 수 있습니다. 또한 외부 이미지를 제어 할 수 없습니다. 갑자기 제거되거나 변경 될 수 있습니다.
예 : src = "https://www.daum.net/images/img.jpg"
참고 : 외부 이미지는 저작권이있을 수 있습니다. 사용 허가를받지 못하면 저작권법에 위배 될 수 있습니다. 또한 외부 이미지를 제어 할 수 없습니다. 갑자기 제거되거나 변경 될 수 있습니다.
2. 상대 URL- 웹 사이트 내에서 호스팅되는 이미지에 대한 링크입니다. 여기서 URL은 도메인 이름을 포함하지 않습니다. URL이 슬래시없이 시작되면 현재 페이지를 기준으로합니다.
예 : src = "img.jpg"
URL이 슬래시로 시작하면 도메인을 기준으로합니다.
예 : src = "/images/img.jpg"
팁 : 거의 항상 상대 URL을 사용하는 것이 가장 좋습니다. 도메인을 변경해도 깨지지 않습니다.
너비 및 높이 속성
<img>태그도 포함되어야 width하고 height(픽셀) 이미지의 폭 및 높이를 지정 특성
|
1
|
<img src="rabbit.jpg" width="400" height="300">
|
cs |
alt 속성
태그의 필수 alt속성은 <img>어떤 이유로 이미지를 표시 할 수없는 경우 이미지의 대체 텍스트를 지정합니다.
연결 속도가 느리거나 src속성 오류 또는 사용자가 스크린 리더를 사용하기 때문일 수 있습니다 .
|
1
|
<img src="rabbit.jpg" alt="토끼사진">
|
cs |
|
1
|
<img src="" alt="토끼사진">
|
cs |
스타일 속성
style속성은 예컨대 색상, 폰트, 크기, 등 같은 요소에 스타일을 추가하는 데 사용된다.
|
1
|
<p style="color:red;">이 내용은 P태그 내용입니다.</p>
|
cs |
lang 속성
웹 페이지의 언어를 선언하려면 항상 태그 lang안에 속성을 포함해야 <html>합니다.
이는 검색 엔진과 브라우저를 지원하기위한 것입니다.
다음 예제는 영어를 언어로 지정합니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
</body>
</html>
|
cs |
국가 코드는 lang 속성 의 언어 코드에 추가 할 수도 있습니다 .
따라서 처음 두 문자는 HTML 페이지의 언어를 정의하고 마지막 두 문자는 국가를 정의합니다.
다음 예에서는 영어를 언어로 지정하고 미국을 국가로 지정합니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<p style="color:red;">이 내용은 P태그 내용입니다.</p>
</body>
</html>
|
cs |
제목 속성
title속성은 요소에 대한 몇 가지 추가 정보를 정의합니다.
제목 속성의 값은 요소 위로 마우스를 가져 가면 도구 설명으로 표시됩니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<p title="이 태그는 P태그입니다.">이 내용은 P태그 내용입니다.</p>
</body>
</html>
|
cs |
권장 사항 : 항상 소문자 특성 사용
HTML 표준에는 소문자 속성 이름이 필요하지 않습니다.
title 속성 (및 기타 모든 속성)은 title 또는 TITLE 과 같이 대문자 또는 소문자로 작성 될 수 있습니다 .
그러나 W3C 는 HTML에서 소문자 속성을 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대해 소문자 속성을 요구 합니다.
제안 : 항상 속성 값 인용
HTML 표준은 속성 값을 따옴표로 묶을 필요가 없습니다.
그러나 W3C 는 HTML의 따옴표를 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대해서는 따옴표를 요구 합니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<a href="https://www.daum.net">daum</a>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<a href=https://www.daum.net>daum</a>
</body>
</html>
|
cs |
위 코드들의 동작에는 문제가 없지만 속상값에 뛰어쓰기가 들어간 경우에는 정상적으로 동작하지 않기때문에 따음표를 반드시 사용해 주는것이 좋습니다.
작은 따옴표 또는 큰 따옴표?
속성 값 주위의 큰 따옴표는 HTML에서 가장 일반적이지만 작은 따옴표도 사용할 수 있습니다.
어떤 상황에서는 속성 값 자체에 큰 따옴표가 포함 된 경우 작은 따옴표를 사용해야합니다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<p style="color:blue;">이 내용은 P태그 내용입니다.</p>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<p style='color:blue;'>이 내용은 P태그 내용입니다.</p>
</body>
</html>
|
cs |
요약
모든 HTML 요소는 속성 을 가질 수 있습니다.
의 href속성은 <a>링크가 이동하는 페이지의 URL 을 지정합니다.
의 src속성은 <img>표시 할 이미지의 경로를 지정합니다.
의 width및 height속성은 <img>이미지 에 대한 크기 정보를 제공합니다.
의 alt속성은 <img>이미지에 대한 대체 텍스트를 제공합니다.
style속성은 예컨대 색상, 폰트, 크기, 등 같은 요소에 스타일을 추가하는 데 사용
태그 의 lang속성은 <html>웹 페이지의 언어를 선언합니다.
title속성은 요소에 대한 몇 가지 추가 정보를 정의합니다