What is HTML Attrubutes ?
모든 Html elements는 Attributes 를 갖는다.
Attributes는 elements에 대한 부가적인 정보를 제공한다.
Attributes는 항상 시작 태그에 명시된다.
Attributes는 보통 name="value"와 같은 이름/값의 쌍으로 명시된다.
html에서 Attribute의 종류는 다양하다.
The href Attribute?
a 태그는 하이퍼링크를 정의한다. href attribute 는 접속하려고하는 페이지의 URL을 명시한다.
<a href="https://www.naver.com">Visit Naver</a>The src Attribute?
img 태그는 HTML페이지에 이미지를 삽입할 때 사용한다. src attribute 는 삽입하려고하는 image파일의 경로를 명시한다.
<img src="img_girl.jpg">
(만약 이미지가 여러 폴더안에 있다면 상위폴더까지 전부 적어줌)The width and height Attributes?
img 태그에는 이미지에 가로(width)와 세로(height) attributes 를 포함시켜주어야한다.(길이는 픽셀 단위)
<img src="img_girl.jpg" width="500" height="600">The alt Attribute?
img 태그에 필요한 alt attribute 는 만약 이미지가 어떤 이유로 표현될 수 없다면 이미지에 대한 대체 텍스트를 지정한다. 이는 연결 속도가 느리거나 src attribute에 오류가 있다면 발생할 수 있다.
<img src="img_girl.jpg" alt="Girl with a jacket">The style Attribute?
style attribute 는 elements에 있는 글자나 숫자에 색상, 폰트, 크기 등과 같은 스타일을 입혀준다.
<p style="color:red;">This is a red paragraph.</p>The lang Attribute?
lang attribute 는 html태그 안에 있으며 항상 포함해야한다.
lang은 웹페이지의 언어를 정의하며 이것은 검색엔진과 브라우저를 지원하기 위한 것이다.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>The title Attribute?
title attribute 는 element의 어떤 추가 정보를 정의한다.
title attribute의 값은 element위에 마우스를 놓으면 도구설명으로 표시된다.
<p title="I'm a tooltip">This is a paragraph.</p>Always Quote Attribute Values
- HTML 표준에서는 인용구를 사용할때 따옴표를 사용하지 않아도 정상적으로 페이지에 적용이된다.
그렇지만 인용구를 사용할때 큰따옴표를 사용하는 것을 권장한다.
더 엄격한 문서 XHTML에서는 따옴표를 반드시 사용하여야햔다.
GOOD !!
<a href="https://www.naver.com/html/">Visit our HTML tutorial</a>BAD
<a href=https://www.naver.com/html/>Visit our HTML tutorial</a>attribute 요약
href: a태그와 함께 쓰임src: img태그와 함께 쓰임width,height: img태그와 함께 쓰임alt: img태그와 함께 쓰임style: elements의 스타일을 지정함(글씨, 크기, 색상 등)lang: html태그 안에 쓰여짐title: elements의 부가적인 정보를 정의함
