Source : http://yongja.tistory.com/15

 

1. div 와 span

div와 span은 모두 공간과 관련된 태그입니다.

div와 span의 차이를 보여주는 예

clip_image001

   1: <div id="div1">
   2:   <span class="span1"></span>
   3:   <span class="span2"></span>
   4: </div>
   5: <div id="div2">
   6: </div>

그림에서 보여지는 것과 같이 div와는 달리 span은 줄 바꿈이 생기지 않습니다.

div와 span의 차이를 보여주는 또 다른 예

카테고리

posted in 2009/01/22 21:00

/div를 이용한 스타일 지정/

   1: <div class="category">
   2:   카테고리
   3: </div>
   4: <div class="date">
   5:   posted in 2009/01/22 21:00
   6: </div>

카테고리posted in 2009/01/22 21:00

/span를 이용한 스타일 지정/

   1: <span class="category">
   2:   카테고리
   3: </span>
   4: <span class="date">
   5:   posted in 2009/01/22 21:00
   6: </span>

span은 텍스트의 속성 등 자잔한 구성요소들의 스타일을 지정할 때, div는 전체적인 레이아웃을 구성할 때 사용할 수 있습니다.

2. id와 class

id와 class는 html을 이루고 있는 구성요소에 속성을 지정해 주기 위해 사용합니다. skin.html

   1: <div id="header">
   2:   <div class="title">
   3:   </div>
   4: </div>

style.css

   1: #header {padding:3px; margin:3px; border-bottom:1px dotted #FFFFFF;}
   2: .title {font:18px Verdana; color:#FFFFFF;}

id와 class의 차이점은

1. 하나의 id는 한 문서에 한 번 밖에 사용될 수 없습니다.

2. 하나의 class는 한 문서에서 반복적으로 사용이 가능 합니다.

3. id의 속성이 class보다 우선시 됩니다.

4. 따라서 id 속성은 해당 element에 부여된 class와 관계 없이 작동합니다.

사용 예 skin.html

   1: <div id="container">
   2:   <div id="sidebar">
   3:     <div class="black">블로그타이틀</div>
   4:   </div>
   5:   <div id="content">
   6:     <div class="black">본문 타이틀</div>
   7:     <span class="black">카테고리</span>
   8:     <span class="red">날짜</span>
   9:   </div>
  10: </div>

style.css

   1: #container {width:600px;}
   2: #sidebar {width:200px; float:left}
   3: #content {width:200px; float:left;}
   4: .black {color:black; font:12px Verdana}
   5: .red {color:red; font:10px Tahoma}
신고

+ Recent posts