[html] 웹 페이지의 기본 뼈대 - div 와 span

 

▶ div 와 span

div 와 span 의 차이

 

① 줄 바꿈 

div 는 자동으로 줄 바꿈을 해주지만  span은 연달아 나온다. 

 

② 영역의 차이 

div 태그는 박스 형태로 영이 설정 되어 지고 span 은 줄 단위로 영역이 설정 된다. 

 

따라서. css style 을 적용 할때도 div는 스타일이 태그 다음의 text에 스타일이 입혀져 각각 따로 지정한 객체처럼 보인다. 하지만 span 은 줄 단위 영역이기 떄문에 앞선 text 에 영향을 받기 때문에 크기에 제약이 있다.  

<h3> <영역 설정> </h3> 
가나다 <div style = "width :200px; height :200px; background-color : green"> 자동으로 줄바꿈 라마바 </div> 
abc <span style = "width :200px; height :200px; background-color : blue" > asdf </span>

div 는 block 속성이기 때문에 박스 형태로 영역 구간이 잡히면서 다음 컨텐츠 태그가 자동으로 개행이 되는 속성이다. 

반대로 span 은 Inline 속성으로 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향을 가지고 있다.