| 실행 소스 |
|
<?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 black; height: 100px; } .red { color: red; } #center { text-align: center; } .back { background-color: yellow; } div p { /* div 안에 p (div 자식 p) */ color: green; }
/* 아직 안가본 곳 , 가본 곳 */ 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"> <!-- class 여러개 적용시 한칸 띄운다 --> 털광필, 몽골용단 <p>배고파!!! 배고파!!! 배고파!!!</p> </div> <p class="red" id="center"> 레드!!! </p> <h1 class="red">빠알간색</h1>
<!-- class는 여러개 줄 수 있지만 id는 하나만 사용한다! --> <!-- 자바스크립트에서 문제 생기기 때문에 -->
</body> </html>
|
실행 결과 |
|
|
'Dev. 웹 > CSS' 카테고리의 다른 글
| [CSS] Text - 글자에 지정되는 css 서식 (0) | 2014.10.31 |
|---|---|
| 표준 지원 색상 ( 17가지 기준 색상 포함 - 한글명 표기) (0) | 2014.10.27 |
| [HTML/CSS 예제] 순서없는 리스트 메뉴에 마우스 오버시 색 변경 (0) | 2012.09.12 |
| [HTML/CSS 예제] 구역 위치(position), 이미지 가져오기 (0) | 2012.09.12 |
| [CSS 예제] border, padding, margin, font.. (0) | 2012.09.12 |