1. id
w3c에서는 id에 대한 정의는 다음과 같습니다.
이러한 정의로 인해 html 페이지 당 id는 중복 사용을 할 수 없습니다.a unique identifier to an element
(한 element의 고유한 식별자)
잘못된 사용법
<html>
<head></head>
<body>
<div id="example"></div>
<div id="example"></div>
</body>
</html>
<html>
<head></head>
<body>
<div id="example"></div>
<div id="example"></div>
</body>
</html>
보통 html 레이아웃 작업 시 id를 사용하게 됩니다.
<div id="haed"></div>
<div id="content"></div>
<div id="footer"></div>
<div id="content"></div>
<div id="footer"></div>
id 에도 스타일을 적용시킬 수 있습니다.
main.css
#head{width:1000px;}
#content{color:#000;}
#footer{margin:10px;}
#head{width:1000px;}
#content{color:#000;}
#footer{margin:10px;}
예를 보시면, id를 표시해주는 방법은 html에서 지정해준 id name 앞에 ' # '을 붙여주시면 됩니다.
2. class
class는 id와 달리 하나 이상을 html 페이지에서 사용 할 수 있습니다.
<html>
<head></head>
<body>
<div class="example"></div>
<div class="example"></div>
</body>
</html>
<head></head>
<body>
<div class="example"></div>
<div class="example"></div>
</body>
</html>
class를 가장 많이 사용 할 때는, 같은 css 속성을 가지고 있는 것들을 적용할 경우 사용합니다.
css에서 class를 지정해주는 방법은 class name 앞에 ' . ' 을 붙여주시면 됩니다.
<style type="text/css">
.red{color:red;}
.green{color:green;}
</style>
<p class="red">이 글씨는 빨간색입니다.</p>
<p class="green">이 글씨는 초록색입니다.</p>
<p class="red">여긴 빨강 <span class="green">여긴 녹색</span></p>
.red{color:red;}
.green{color:green;}
</style>
<p class="red">이 글씨는 빨간색입니다.</p>
<p class="green">이 글씨는 초록색입니다.</p>
<p class="red">여긴 빨강 <span class="green">여긴 녹색</span></p>
3. 자주하는 실수
id 설명에도 있듯이, id는 한 페이지에 한번만 사용 할 수 있습니다.
html 작업을 하시는 퍼블리셔 또는 html 페이지를 개발하시는 개발자분들께서 자주 하는 실수 입니다.
예를 들어, javascript에서 document.getElementId 를 이용한 id 를 찾을 수 있습니다.
이로 인해서, html 페이지에 임의로 id를 추가하게 됩니다.
한페이지 안에 똑같은 기능을 하는 경우에 해당 엘리먼트에 같은 id를 부여하는 실수를 하게 됩니다.
[블로그 꾸미기 추천 책]
댓글을 달아 주세요
3번 자주하는 실수에 정말 공감;ㅂ ;
2009/05/29 21:29 [ ADDR : EDIT/ DEL : REPLY ]복사해서 붙여넣기하다가 나도모르게 그만 -_ -
ㅋㅋ 그러니 자주하는 실수지.
2009/05/29 23:17 [ ADDR : EDIT/ DEL ]ㅋㅋ 좋은정보라 가지구 갔는데 덧글남기는거 깜빡했네요...원하지 않으시면 삭제할께요~
2009/07/17 16:36 [ ADDR : EDIT/ DEL : REPLY ]아니에요 ^^ 출처만 남겨주시면 감사하겠습니다.^^
2009/07/17 16:39 [ ADDR : EDIT/ DEL ]