5. id를 이용하는 방법
.NET프로그래밍/CSS 2.0 2009. 7. 27. 22:51 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>다섯번째 방법 - id를 이용</title>
<style type="text/css">
#notice { color:blue; width:100px;height:100px;background-color:Pink; }
#free { color:green; width:100px;height:100px; }
</style>
</head>
<body>
<div id="notice">공지사항</div>
<div id="free">자유게시판</div>
<!-- 데모예제: JavaScript 활용예제 -->
<input type="button" value="숨기기"
onclick="document.getElementById('notice').style.visibility='hidden';" />
</body>
</html>
<!--
- 형식 : <head>
<style type="text/css">#id이름 { id속성 }</style> ==> <style>태그 안에 id(이름)와 id속성 정의
</head>
<body>
<태그명 id="#으로 선언된 id이름"> ~ </태그명> ==> 태그 안에 id 선언
</body>
- id는 중복되지 않도록 한다. 고유값으로 지정해야 함. id가 중복될 경우 뒤의 것을 인식하지 못한다.
- <div>태그 : 눈에 보이지 않는 영역(레이어) 지정. 많이 쓰임.
-->
< 실행결과 >
< 데모예제 실행결과 - '숨기기' 버튼을 누른 후 결과화면 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 7. 중첩클래스 (0) | 2009.07.27 |
|---|---|
| 6. 스타일시트에서의 우선순위 (0) | 2009.07.27 |
| 4. class를 이용하는 방법 (0) | 2009.07.27 |
| 3. 태그에 직접 적용 (0) | 2009.07.27 |
| 2. <link>태그와 외부에 스타일시트파일 선언 (0) | 2009.07.27 |