이번 글은 HTML속성에 대해 살펴볼 것이다.
HTML속성은 HTML요소에 추가적인 정보를 제공한다.
HTML 속성(Attributes)
모든 HTML 요소는 속성값을 가질 수 있다.
속성값은 요소들에 관련한 추가적인 정보를 제공한다.
속성값은 시작태그 내에 항상 정의한다.
속성값은 일반적으로 "name="value" 와 같이 이름/값 쌍으로 구성한다.
이제 대표적이며 많이 사용하는 속성값들을 살펴보자.
href 속성
<a>태그는 하이퍼링크를 정의한다. href 속성값은 페이지 링크의 URL을 정의한다.
| 예제 |
| <a href="https://www.naver.com">가자! 네이버로...</a> |
src 속성값
<img>태그는 HTML페이지 내에 이미지를 포함하는데 사용한다. src 속성값은 화면에 표시할 이미지의 위치를 정의한다.
| 예제 |
| <img src="img_girl.jpg"> |
src 속성값내의 URL을 나타내는데는 2가지 방법이 있다:
1. 절대 URL - 다른 웹사이트에서 저장된 외부 이미지를 링크할 때 사용한다.
| 예) src="https://www.w3schools.com/images/img_girl.jpg" |
2. 상대 URL - 자신의 웹사이트 내에 저장된 이미지를 링크할 때 사용한다. 상대 URL은 도메인 이름을 포함하지 않는다. 만약 URL이 슬래시없이 시작한다면, 이는 현재 페이지에 상대 URL일 것이다.
| 예) src="img_girl.jpg" |
만일 URL이 슬래시로 시작하면, 도메인 상대적이다.
| 예) src="/src/img_girl.jpg" |
width와 height 속성값
<img>태그는 width와 height 속성값을 또한 포함한다. 이미지의 너비와 높이를 정의한다.
| 예제) |
| <img src="img_girl.jpg" width="500" height="600"> |
alt 속성값
만일 어떤 이유로 이미지를 화면에 표시할 수 없을 경우, <img>태그에 대한 alt 속성값은 이미지에 대한 대안의 텍스트를 정의한다. 이는 네트워크 속도가 느리거나 src속성값이 오류이거나, 사용자가 스크린 리더를 사용할 경우 발생한다.
| 예제 |
| <img src="img_girl.jpg" alt="Girl with a jacket"> |
style 속성값
style속성값은 하나의 요소에 색깔, 글꼴, 글꼴크기 등의 styles을 추가하는데 사용된다.
| 예제 |
|
<p style="color:red;">이것은 나의 첫번째 단란.</p>
|
|
결과물 : 이것은 나의 첫번째 단란.
|
lang 속성값
웹 페이지의 언어를 알려주기 위해, <html>태그내에 lang 속성값이 항상 포함되어야 한다. 이는 검색엔진과 브러우저를 지원하기 위함이다.
다음 예제는 언어로 영어를 특정한다.
| <!DOCTYPE html> <html lang="en"> <body> ... </body> </html> |
lang속성값 내에 언어 코드에 국가 코드를 추가할 수 있다. 그래서 처음 두 글자는 HTML페이지의 언어를 정의하고 다음 두 글자는 국가를 정의한다.
다음 예제는 언어로 영어를, 국가로 미국을 정의한다.
| <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> |
title 속성값
title속성값은 하나의 요소에 대한 몇 추가 정보를 정의한다.
title 속성값은 마우스를 요소 위에 대면
다음 요소 위에 마우스를 놓으면 제목 특성의 값이 '도구 설명'으로 표시된다:
| 예제 |
| <p title="나는 도구설명">나의 첫번째 단락.</p> |
제안1:항상 속성값들은 소문자를 사용한다.
HTML 표준은 소문자 속성 이름을 요구하지 않는다.
title 속성값(과 모든 다른 속성값들)은 TITLE 혹은 title과 같이 대문자나 소문자로 씌여질 수 있다.
그러나 W3C는 HTML내에 속성값은 소문자를 권고하며 XHTML내의 엄격한 문서 유형에 대한 속성값은 소문자를 요구한다.
제안2: 속성값은 항상 따옴표로 묶는다.
HTML 표준은 속성값에 따옴표를 요구하지 않는다.
그러나 W3C는 HTML내에 따옴표를 권고하며 XHTML과 같이 엄격한 문서 유형은 따옴표를 요구한다.
| GOOD | BAD |
| <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> | <a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a> |
단일 따옴표 혹은 이중 따옴표?
속성값에 이중 따옴표는 HTML내에 가장 일반적인 표현이지만 단일 따옴표도 사용될 수 있다.
몇몇 상황에서는, 속성값이 이중 따옴표를 자체로 포함한다면, 단일 따옴표를 필요로 한다.
| <p title='John "ShotGun" Nelson'> |
| <p title="John 'ShotGun' Nelson"> |
마무리
이번 글에서는 HTML 속성값에 관련해서 학습하였다.
. 모든 HTML 요소는 속성값을 가질 수 있다.
. <a>태그의 href 속성값는 이동하기고자 하는 링크의 위치정보를 정의한다.
. <img> 태그의 src 속성값은 표시되는 이미지의 위치정보를 정의한다.
. <img> 태그의 width와 height 속성값은 이미지의 크기 정보를 제공한다.
. <img> 태그의 alt 속성값은 이미지의 대안 텍스트를 제공한다.(이미지가 표시되지 않을 때 해당 이미지의 정보를 제공한다.)
. style 속성값은 색깔, 글꼴, 크기 등과 관련한 요소의 style들을 추가하는데 사용된다.
. <html> 태그의 lang 속성값은 웹 페이지의 언어를 선언한다.
. title 속성값은 요소에 관한 추가정보를 정의한다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 스타일(Styles) (0) | 2023.04.16 |
|---|---|
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
| HTML 제목(Headings) (0) | 2023.04.14 |
| HTML 요소(HTML Elements) (0) | 2023.04.12 |
| HTML 시작하기 (0) | 2023.04.10 |
댓글