[HTML] HTML Attributes(속성)
HTML Attributes(속성)
모든 HTML 요소는 속성을 가질 수 있으며, 속성은 항상 시작 태그에 지정합니다.
일반적으로 속성은 " Name = Value"으로 입력됩니다.
<href> 속성
href는 링크를 설정할 수 있는 속성이며 <a> 태그로 정의 됩니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <a href="http://ossian.tistory.com/">Ossian Tistory 바로가기</a> </body> </html> |
<src> 속성
src는 이미지를 설정할 수 있는 속성이며 <img> 태그로 정의 됩니다.
Image에 대한 경로는 "상대 경로"와 "절대 경로"가 존재합니다.
상대 경로는 읽어드린 html 파일이 존재한 디렉토리를 기준으로 경로를 설정합니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <img src="img_test.jpg">Image Test</img> </body> </html> |
절대 경로는 읽어드린 html 파일이 존재한 디렉토리와 상관없이 불러올 이미지나 파일의 전체 위치를 경로로 설정합니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <img src="D:\img_test.jpg">Image Test</img> </body> </html> |
HTML img 태그에는 이미지의 너비와 높이를 지정하는 속성 집합이 있습니다.
width는 너비, height는 높이를 의미합니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <img src="img_test.jpg" width="100" height="50">Image Test</img> </body> </html> |
<alt> 속성
alt는 이미지를 표시할 수 없을 때 사용할 대체 텍스트를 지정합니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <img src="img_test1.jpg" alt="Test_Image"></img> </body> </html> |
<style> 속성
style 속성은 폰트 크기, 색상과 같은 요소의 스타일을 지정하는데 사용합니다.
<!DOCTYPE html> <html> <head> <title>Ossian Tistory</title> </head> <body> <p style="color:blue">Hello I am Ossian</p> </body> </html> |
<lang> 속성
lang 속성은 html 태그에 선언될 수 있으며, 기본적으로 언어를 설정할 수 있는 속성입니다.
다만 lang 속성에 설정된 언어를 기준으로 스크린 리더(화면 낭독 프로그램)의 언어가 설정되기도 하며 검색엔진에 필터 되기도 합니다.
따라서 lang 속성의 올바른 설정을 통해 웹 접근성을 준수하도록 해야 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <title>Ossian Tistory</title> </head> <body> * * * </body> </html> |
<title> 속성
titile 속성은 P 태그 속성입니다. 단락 위에 Mouse over 시 툴팁으로 표시됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <title>Ossian Tistory</title> </head> <body> <p title="Hello I am title attribute">This is a Paragraph.</p> </body> </html> = |
'[Dev] > HTML' 카테고리의 다른 글
| [HTML] HTML Headings (0) | 2018.04.12 |
|---|---|
| [HTML] HTML Basic (0) | 2018.04.09 |
