별사탕님의 블로그를 참조하여 링크를 걸었습니다
CSS의 TAG, ID, CLASS, 가상CLASS 지정방법
|
* 태그이름을 통해서
모든 태그에 규칙을 적용 |
<style type="text/css">
h1 { color: #ff0000; }
</style>
<h1>스타일 적용 1</h1> |
|
* 여러 요소에 반복 적용가능
* 하나의 요소에 여러 클래스를
중복적용 가능(공백으로 구분) |
<style type="text/css">
.title {color: #00ff00}
.size {font-size: 20px;}
</style>
<h1 class="title">스타일 적용 2</h1>
<div class="title size">스타일적용 2-1</div> |
|
* ID는 HTML 본문상에서
단 하나의 요소에만 적용 |
<style type="text/css">
#content {color: #0000ff; font-size: 15px }
</style>
<div id="content">스타일 적용 3</div> |
|
* 하나의 요소에, 여러가지 경우를
나누어서 지정하는 방식
* 가상클래스요소는 IE6을 제외하고는
모든 태그에 적용가능 |
<style type="text/css">
a:vistited{color:#222222;text-decoration:none;}
a:active{color:#222222;text-decoration:none;}
a:hover{color:#ff6699;text-decoration:underline;}
a:linked{color:#222222;text-decoration:none;}
div:hover{color:#ff6699;text-decoration:underline;}
div에 마우스올라갔을때 적용
</style> |
|
|
<style type="text/css">
#child {
/**박스의 중앙정렬,margin-left:auto는 오른쪽정렬*/
margin: auto;
}
</style> |
<div id="child">
실제 내용 영역
</div> |
|
<style type="text/css">
ul{
/** 목록의 기호를 제거 */
list-style:none;
/** ul은 자동 패딩값이 잡히는데,안쪽여백제거 */
padding:0px;
border: 1px solid black;
}
li{
/** 좌에서 우로 일렬정렬 */
display:inline;
}
</style> |
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul> | |
SAMPLE
