본문 바로가기
제가 쓴 책/HTML5, CSS3 and JavaScript

1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법

by edupicker(체르니) 2013. 7. 31.

1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법


HTML5에서 요소(Element)들은 집으로 생각하면 집, 집을 구성하는 벽, 기둥, 식탁, 의자, TV, 컴퓨터와 같이 하나의 독립적으로 존재하는 객체(object)라고 할 수 있습니다.
하지만 지금 설명하는 속성(Attribute)은 요소(Element)처럼 독립적으로 움직이는 형태가 아닌 요소(Element)와 함께 사용되는 것으로 요소(Element)에 종속적입니다.
예를 들어 컴퓨터(Element)를 생각해보면 컴퓨터를 분류할 때 노트북 형태, 데스크탑 형태, 검은색 노트북, 흰색 노트북, … 등 컴퓨터의 형태, 색상 등과 같이 컴퓨터라는 요소(Element)를 구분하는데 도움을 주는 역할을 하는 것이 바로 속성(Attribute)입니다.
속성은 시작 태그 내에 다음과 같은 형식으로 하나 이상 사용할 수 있습니다.


<요소이름 속성이름=”속성값” [속성이름=”속성값” …]></요소이름>
<
요소이름 속성이름=’속성값’ [속성이름=’속성값’ …]></요소이름>


위에서 속성이름=”속성값의 형태로 이중 따옴표(“”)나 홑따옴표(‘ ‘)를 이용해서 사용이 가능하며
만일 속성값 중 이중 따옴표를 포함하거나 홑따옴표를 포함하는 경우에는 다음과 같은 형식으로 사용하면 됩니다.


다음으로 현재 HTML5 Draft 문서를 보면 속성(Attribute)에는 “true” 혹은 “false” 값을 갖는 속성들을 종종 보게 되는데 이러한 형태의 속성을 설정하는 방법은 방금 전과 조금 다릅니다.


<요소이름 속성이름></요소이름>
<
요소이름 속성이름=””></요소이름>
<
요소이름 속성이름=”속성값”></요소이름>


예를 들어 뒤에 배우게 될 video 요소를 이용하여 동영상 파일을 재생할 때 자동 실행되도록 하는 autoplay 속성을 예로 들면 이 autoplay 속성은 자동 실행하거나”, 자동 실행하지 하지 않는” 2 가지 값의 형태, “true” 혹은 “false”와 같은 Boolean 속성으로 자동 실행할 경우는 다음과 같이 3 가지 형태로 사용이 가능합니다.


<video src=”동영상 파일autoplay></요소이름>
<
video src=”
동영상 파일autoplay=””></요소이름>
<video src=”
동영상 파일autoplay=”autoplay”></요소이름>


- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로 그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌상업적인 용도의 사용은 삼가해주시기 바랍니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.