태그의 속성
개요
태그는, 태그 내부에 값을 넣을 수 있을 뿐만 아니라, 태그마다 속성을 부여할 수 있습니다.
태그의 속성은 <태그 속성="값"> 의 형태로 사용하며, 태그마다 여러 속성을 부여 할 수도 있습니다.
HTML에서는 태그의 속성 또한 미리 정의되어 있으며, 태그 속성에 맞는 값을 입력하면 특별한 기능을 하게 됩니다.
<html>
<head>
<link type="text/css" href="my_style.css">
</head>
<body>
<font color="red" face="Dotum">Hello</font>
<font color="yellow">World</font>
</body>
</html>
위의 예제를 보면 link 태그에 type, href 라는 속성을 사용하였고 각각의 속성은 link의 종류가 무엇인지, 파일 위치가 어디인지를 정의합니다.
또 font 태그에서는 색상을 정의하는 color와 글꼴을 정의하는 face가 쓰인 것을 볼 수 있습니다.
id, class 속성
모든 태그에는 id 속성과 class 속성을 지정해 줄 수 있는데, 이를 이용하면 CSS나 JavaScript에서 태그를 좀더 쉽게 다룰 수 있습니다.
id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으며, class는 하나의 class를 여러 태그에 적용 할 수 있습니다.
예시
<div id="my-box1"></div>
<div id="my-box2" class="boxes"></div>
<div id="my-box3" class="boxes"></div>
<div class="boxes"></div>
style 속성
style 속성은 태그의 스타일, 즉 보이는 형태를 정의하는 속성입니다.
HTML 자체의 기능이라기 보다는 CSS의 속성들을 HTML 문서 내에서 태그에 직접 설정할 때 쓰이는 속성입니다.
이와 관련해서 자세한 설명은 CSS 입문 강의를 봐주시기 바랍니다.
예시
<div style="width:500px; height:300px"></div>
<div style="height:40px; border: 1px solid green">mybox</div>