offfff

HTML 속성(HTML Attributes) 본문

프로그래밍

HTML 속성(HTML Attributes)

offfff 2016. 8. 23. 09:00

HTML 속성(HTML Attributes)


HTML attribute는 HTML element에 추가적인 정보를 부여한다


- 모든 HTML element들은 HTML attribute(속성)을 가진다.

- 속성은 element에 대한 추가적인 정보를 나타낸다.

- 속성은 항상 시작 태그 안에 기술한다.

- 보통 속성의 이름과 값이 쌍으로 적는다. ( 속성 이름="값" )




언어 속성(The lang Attribute)


HTML문서의 언어 속성은 <html>태그에서 선언된다. 언어속성은 lang으로 선언한다.

언어 속성은 검색 엔진, 애플리케이션의 접근성에 중요하게 쓰인다.


아래 예제 lang 속성에서, 첫번째 두 글자(en)는 언어이다.

만약 같은 언어(아래에서는 영어)임에도 여러나라에서 쓰인다면 -US를 붙여 국가를 선택한다.


<!DOCTYPE html>

<html lang="en-US">

<body>

...

</body>

</html>




제목 속성(The title Attribute)


아래는 <p> 태그에 title 속성을 추가하는 예제이다.

이 예제는 마우스를 글 위에 올렸을 때, 그 글에 대한 설명(제목)을 상자로 띄워준다.


<!DOCTYPE html>

<html>

<body>


<h2>The title attribute</h2>


<p title="제목 속성(title Attribute)">

Mouse over this paragraph, to display the title attribute as a tooltip

이 문단에 마우스 커서를 올리면, 툴팁으로 제목속성의 내용을 화면에 띄워준다.

</p>


</body>

</html>


아래와 같은 결과가 만들어진다.





하이퍼링크 참조 속성(The href Attribute)


href(hyperlink reference) 속성은 HTML의 링크를 정의를 정의하는 <a>태그의 속성이다.

연결하고자 하는 링크의 주소가 href속성의 값으로 들어간다.


<!DOCTYPE html>

<html>

<body>


<a href="http://dk-projects.tistory.com">내 블로그 링크</a>


</body>

</html>


"내 블로그 링크"라는 글귀에 밑 줄이 그어지고, 그것을 클릭하면 href 값으로 지정된 링크로 이동하게 된다.




크기 속성(Size Attributes)


HTML 이미지들은 <img> 태그를 가지고 정의된다.

source(src)의 파일 이름, 이미지의 크기(너비width, 높이height)들이 img 태그의 속성으로 들어간다.


<!DOCTYPE html>

<html>

<body>


<img src="picture.jpg" width="104" height"142">


</body>

</html>


이미지의 크기는 픽셀단위로 표현된다. 위의 예에서 width는 104픽셀로 설정되었다.

이미지 태그에 대한 자세한 내용은 나중에 더 다루도록 한다.




대체 속성(The alt Attributes)


alt 속성은, 이미지가 화면에 출력될 수 없을 때(혹은 읽어야 할 때), 이미지를 대신할 텍스트를 정의하는 속성이다.

눈이 잘 보이지 않는 분들이 웹 페이지를 이용할 경우, 스크린 리더가 화면을 읽어주는 경우가 있다.

스크린 리더가 웹 페이지를 읽을 때, 이미지의 alt 속성 값을 읽어 주기도 한다.


<!DOCTYPE html>

<html>

<body>


<img src="picture.jpg" alt="my picture" width="104" height"142">


</body>

</html>




항상 쌍 따옴표를 사용하는것을 추천합니다


HTML5 표준은 속성값을 쌍 따옴표로 쓰도록 강제하지 않는다.

XHTML같이 더 꼼꼼한 표준은 쌍 따옴표를 꼭 써야하는 이유도 있지만,

쌍 따옴표가 꼭 필요한 속성들은 이것을 지켜주지 않을 경우 오작동 할 우려가 있다.


<a href=http://www.w3schools.com>


<p title=About DK-projects>


위의 예에서, href 속성은 쌍따옴표가 없어도 잘 동작한다.

하지만 title 속성은 About 밖에 표시되지 않아서,

원래 의도대로 About DK-projects를 tool-tip에 띄우려면 쌍 따옴표가 꼭 필요하다.




따옴표? 쌍 따옴표?


속성 값 양 옆으로 쌍 따옴표를 사용하는 것이 HTML에서는 일반적이지만, 그냥 따옴표를 사용할 수도 있다.

가끔, 속성 값으로 쌍 따옴표가 필요한 경우가 있는데, 이 때 따옴표를 사용한다


<p title='John "ShotGun" Nelson'>


혹은 반대로 아래처럼 사용하기도 한다.


<p title="John 'ShotGun' Nelson">


tool-tip에 표시될 때, 위는 John "ShotGun Nelson으로 표시되고, 아래는 John 'ShotGun' Nelson으로 표시된다.




요약


- 모든 HTML element는 속성(attribute)를 가질 수 있다.

- title 속성은 추가적인 정보를 표시하는 tool-tip의 내용을 값으로 가진다.

- href 속성은 이동할 링크의 주소를 그 값으로 가진다.

- width, height 속성은 이미지의 크기정보를 그 값으로 가진다.

- alt 속성은 스크린 리더를 위한 텍스트를 그 값으로 가진다.

- 소문자 작성 추천

- 따옴표 사용 추천




다른 HTML 속성들...


 Attribute

 Description 

 alt

 이미지가 화면에 표시될 수 없을 때, 이미지를 대신할 텍스트를 값으로 가진다.

 disabled

 input element를 사용하면 안될 때 사용하는 속성.

 href

 이동할 링크의 URL을 그 값으로 가진다.

 id

 element의 고유한 ID 값을 부여할 때 사용한다.

 src

 이미지의 경로 혹은 웹 주소를 값으로 가진다.

 style

 element에 CSS 스타일을 부여할 때 사용한다.

 title

 element의 추가 정보를 툴팁으로 화면에 표시할 때 사용한다.





아래의 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_attributes.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 문단(HTML Paragraphs)  (0) 2016.08.25
HTML 제목(HTML Heading)  (0) 2016.08.24
HTML 요소(HTML Elements)  (0) 2016.08.22
HTML 기본 예제  (0) 2016.08.21
HTML 소개(HTML Introduction)  (0) 2016.08.20
'프로그래밍' Related Articles more