span 태그 속성 이해하기 (+div와 차이점)

span과 div의 차이점

div	block 요소
span	inline 요소

block / inline의 차이점

속성	줄바꿈	너비,높이 지정	여백 지정
block	o	o	o
inline	x	x	좌우 여백만 가능

 

 

<div>
 <h1>Hello</h1>
 <p>텍스트입니다</p>
</div>

<div>
 <span>Hello</span>
 <span>텍스트입니다</span>
</div>

 

위와 아래는 차이가 있다.

 

h1,p 는 block 요소이기 때문에 자동으로 줄바꿈 처리가 되는 반면, 

span은 줄바꿈 되지않는다.

 

만약 span을 사용해서 줄바꿈 하고싶다면 span의 css에 display:block 혹은 display:inline-block 을 주면 된다.

 

See the Pen Untitled by kimyeaseul (@mog111) on CodePen.

 

 

결론

block 을 주었을 때는 가로 넓이 전체를 차지하며 줄바꿈이 가능하다. 
inline-block은 줄바꿈 안됨(inline 속성), 넓이/높이 지정 가능(block 속성) 하다.

 

---

 

그치만 span태그 안에 텍스트를 사용 할 경우 주의점이 있다. 

 

font-size와 넓이,높이 속성을 같이 주게 되면 오히려 깔끔한 레이아웃을 잡는 데 방해가 될 수 있다. 

span의 넓이를 제한시킨 가운데 내부에 있는 font-size가 너무 작거나 큰 경우가 생기기 때문이다.

 

See the Pen Untitled by kimyeaseul (@mog111) on CodePen.

 

 

 

 

그래서 span태그 사용할 때는 넓이, 높이를 잡기보단 

block속성을 추가해서 padding을 사용하는 편이 더 깔끔할 수 있다.

See the Pen Untitled by kimyeaseul (@mog111) on CodePen.

 

 

이렇게 사용하면 해당 영역과 다른 영역간의 margin값을 더 편하게 조정할 수 있을 것 같다!