9. 영역설정태그- <div>와 <span>태그
.NET프로그래밍/CSS 2.0 2009. 7. 28. 00:47 |<!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>영역/박스/레이어</title>
<style type="text/css">
#main { color:Black; }
#notice { font-size:9pt; }
.title{ font-weight:bold; }
.content { margin-left:-25px; }
</style>
</head>
<body>
안녕하세요. <div style="width:100px;background-color:Yellow;">반갑습니다.</div> 또 만나요.
<hr />
안녕하세요.<span style="color:Red;">반갑습니다.</span> 또 만나요.
<hr />
<div id="main">
<div id="notice">
<div class="title">공지사항</div>
<div class="content">
<ul>
<li>Visual Web Developer 2008 설치</li>
<li>SQL Server 2008 설치</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!--
- <div>태그 : 레이어, 박스, 영역 태그
<span>태그와의 차이점 : <div>태그는 (자동)줄바꿈이 됨. 고정된 영역을 사용해서 텍스트가 밀려나지 않는다.
- <span>태그 : 텍스트용. 특정 부분만 스타일시트 사용하고 싶을 때. (자동)줄바꿈이 안됨. 웹브라우저 크기를 작게 하면 텍스트가 밀려남.
- 위에 있는 <style>태그 내의 .content { margin-left:-25px; }에서 'margin-left'는 왼쪽으로의 여백을 말함.
-->
< 실행결과 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 11. 정렬관련스타일 (0) | 2009.07.28 |
|---|---|
| 10. 폰트관련스타일 (0) | 2009.07.28 |
| 8. 중첩태그 (0) | 2009.07.28 |
| 7. 중첩클래스 (0) | 2009.07.27 |
| 6. 스타일시트에서의 우선순위 (0) | 2009.07.27 |