① 소스 내용
<?xml version="1.0" encoding="EUC-KR" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>CSS 2</title>
<style type="text/css">
div {
border: medium solid blue;
height: 100px;
}
.red {
/* "."은 클래스, "#"은 ID*/
color : red;
}
#center {
text-align: center;
}
.back {
background-color: yellow;
}
div p{
/* div안의 p(div의 자식 p) */
border: thick solid black;
color: navy;
}
/* 방문하지 않았던 링크(LINK)와 방문했던 링크(VISITED)가 표시되는 효과*/
a:LINK, a:VISITED {
text-decoration: none; color: black;
}
/* 마우스 커서를 올렸을 때 색깔이 바뀌도록*/
a:HOVER {
text-decoration: underline; color: #0F0; font-weight: bold;
}
/* 마우스 버튼을 눌렀을 때 */
a:ACTIVE {
text-decoration: none; color: black;
}
</style>
</head>
<body>
<!-- inline css : 태그에 직접 적용, 우선순위가 높다.-->
<div style="height: 200px;">
<a href="http://pizzahut.co.kr">오늘 뭐 먹지???</a>
</div>
<!-- 클래스를 여러개 줄 수 있다. -->
<div class="red back">
몽골용단, 털광필
<p>배고파! 배고파! 배고파!</p>
</div>
<!-- class는 여러개 줄 수 있지만 id는 하나씩만 쓰자.! 자바스크립트에서 문제! -->
<p class="red" id="center">
레드
</p>
<h1 class="red">빠알간색</h1>
</body>
② 실행화면
'WEB > CSS' 카테고리의 다른 글
| WEB 2일차 여섯번째) div로 레이아웃 잡기 (0) | 2012.09.13 |
|---|---|
| WEB 2일차 다섯번째) div (0) | 2012.09.13 |
| WEB 2일차 세번째) CSS 첫번째 (0) | 2012.09.13 |
모데스티