반응형
특정 영역(또는 레이어, 박스라고 표현)에 스타일 적용하는 방법입니다.
<DIV>와<SPAN>이 사용되며 차이점은 다음과 같습니다.
<DIV>와<SPAN>이 사용되며 차이점은 다음과 같습니다.
| <div> : 특정 문단에 적용(해당 문단 전체 영역), 고정됩니다 <span> : 해당 문단의 택스트까지만 적용( 해당 택스트 영역), 자동 줄 바꿈이 가능합니다. |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
안녕하세요.
<div style="width:100%;
background-color:Yellow;">반갑습니다.</div>
또 만나요.<hr />
안녕하세요.
<span style="width:100%;
background-color:Blue;">반갑습니다.</span>
또 만나요.<hr />
</body>
</html>
| 결과 화면 입니다. div - 태그는 자동 줄 바꿈, 해당 영역 전체 스타일 적용 span - 해당 영역만 스타일 적용 |
이번에는 현업에서 사용되는것을 해보는 것으로
영역을 지정하고 스타일 적용시켜보도록합니다.
<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; }
.content{ margin-left:-20px; }
</style>
</head>
<body>
<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>
09.영역설정.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 11.CSS - 정렬관련스타일 (0) | 2009.07.28 |
|---|---|
| 10.CSS - 폰트관련스타일 (0) | 2009.07.28 |
| 08.CSS - 중첩태그 (0) | 2009.07.28 |
| 07.CSS - 중첩클래스 (0) | 2009.07.28 |
| 06.CSS - 우선순위 (0) | 2009.07.27 |
Comments