DIV 구성

 별사탕님의 블로그를 참조하여 링크를 걸었습니다

 

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>

 

 

 

별사탕님의 DIV 소스보기   <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

별사탕님의 DIV 소스보기	별사탕님의 DIV 소스보기
별사탕님의 DIV 소스보기	별사탕님의 DIV 소스보기