[CSS]css 태그 - div / span

<div> <span>
​두 태그는 HTML 레이아웃 배치에 사용되는 것으로 디자인적으로 컨텐츠를 묶어줄 때 사용되는 무색무취의 태그다.
​

차이점

<div>는 block level element
<span>은 inline level element 라는 점이다

※ blck/inline을 모른다면 아래 링크 참고바랍니다.

[CSS]css display 속성 - block, inline, block-inline

​

1. <div> 태그

block element 성질을 그대로 가진다.

- 컨텐츠가 적힌 줄의 모든 영역 차지
- 자동 줄바꿈
- 4방향 모두 margin 설정 가능
- width, height 설정 가능

div { 
   border: 3px solid red; 
} 

<!-- 한 줄 영역 모두 차지 -->
<div>모두</div>

<!-- 자동 줄바꿈 -->
<div>모두</div> <div>꽃길만 걸으세요</div>

 

 

<!-- 4방향 다 margin 적용 가능 -->
div { 
   border: 3px solid red; 
   margin: 10px; 
} 

<div>모두</div> 
<div>꽃길만 걸으세요</div>

<!-- width, height 설정 가능 -->
div { 
   border: 3px solid red; 
   width: 120px; 
   height: 30px; 
} 

<div>모두</div>
<div>꽃길만 걸으세요</div>

2. <span> 태그

inline element 성질을 그대로 가진다.

- 컨텐츠 크기만큼 영역 차지
- 다른 태그와 나란히 놓임(자동 줄바꿈X)
- 양옆만 margin 설정 가능
- width, height 설정 불가능

<!-- 컨텐츠 크기만큼 영역 차지 -->
span { 
   border: 3px solid red;
} 

<span>오늘도</span>

 

<!-- 줄바꿈 없음 -->
span { 
   border: 3px solid red; 
} 

<span>오늘도</span> 
<span>행복하세요</span>

<!-- 양 옆에만 margin 적용 -->
span { 
   border: 3px solid red; 
   margin: 10px; 
} 

<span>오늘도</span> 
<span>행복하세요</span>