HTML 속성
-속성값은 HTML 요소에 대한 추가적인 정보를 알려준다.
- 모든 요소들은 속성값을 가질 수 있다.
- 속성값은 항상 시작태그에 지정된다.
- 속성값은 일반적으로 이름/값 쌍으로 제공된다 : name="value"
href Attribute
-링크태그이다.
1 | <a href="https://beinmy.tistory.com/">This is a link</a> | cs |
- 시작태그 <a>로 시작하여 끝 태그<\a>로 끝난다.
- 자세한 것은 뒷부분 <a>태그에서 다룬다.
width , height Attribute
-HTML의 이미지는 폭과 높이를 설정하는 크기 속성을 가진다.
1 | <img src="img_CAU.jpg" width="500" height="600"> | cs |
- 픽셀단위로 지정된다 e.g. width : "500"은 500픽셀 폭을 뜻한다.
- 자세한 것은 뒷부분 HTML 이미지에서 다룬다.
alt Attribute
-HTML의 이미지는 폭과 높이를 설정하는 크기 속성을 가진다.
1 | <img src="img_CAU.jpg" alt="CAU_Notice"> | cs |
- 속성값은 screen reader가 읽을 수 있다.
- 시각장애가 있는 사람과 같이 웹페이지에 무언가를 들으러 온 사람이 들을 수 있게 해준다.
- alt 속성은 이미지가 없는 경우에도 유용하다.
style Attribute
-색상, 글꼴, 크기 등과 같은 요소의 스타일을 지정한다.
1 | <p style="color:blue">paragraph.</p> | cs |
- 자세한 것은 CSS 에서 다룬다.
lang Attribute
-HTML 문서의 언어는 <html>태그에 선언할 수 있다.
-언어는 lang속성으로 선언된다.
-screen readers(화면 낭독 프로그램), 검색 엔진에는 언어 선언이 중요하다.
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> | cs |
- 처음 두 글자는 언어를 지정한다(en). dialet가 있다면, 두 글자를 더 쓴다(US).
- 한국어는 ko 이다.
1 | <html lang="ko"> | cs |
title Attribute
-제목 특성은 <p>요소에 추가된다.
-단락을 마우스로 가리키면 제목 특성 값이 툴팁으로 표시된다.
1 2 3 | <p title="툴팁표시"> 단락에 마우스를 올리면 툴팁이 표시된다. </p> | cs |
S U G G E S T
Quotes
-HTML5 표준은 속성 값에 대한 인용구(" ")를 요구하지 않는다.
->href속성은 인용문 없이 작성할 수 있다.
하지만
-W3C는 XHTML과 같이 더 엄격한 문서 유형을 요구하기 때문에 인용구 표시를 추천한다.
-때로는 인용구를 표시해야 할때가 있다.
-아래의 예에서는 공백이 포함되어 title Attribute가 제대로 표시되지 않는다.
1 | <p title=About CAU> | cs |
-따라서 인용구를 사용하는 것이 가장 일반적이다.
Singe or Double Quotes?
-큰따옴표 대신 작은 따옴표도 사용할 수 있다.
-속성 값 자체에 큰 따옴표가 포함되어 있는 경우 작은 따옴표를 사용한다.
1 | <p title='John "ShotGun" Nelson'> | cs |
또는 반대로
1 | <p title="John 'ShotGun' Nelson"> | cs |