본문 바로가기
front-end/html

CSS 효과를 주기 위해서 쓰는 아무 의미도 없는 태그

by Dreaming Coder 2021. 1. 25. 09:47

 


이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 


 

 

 

<div>와 <span> 태그

 

웹페이지의 어느 특정 부분을 CSS로 꾸며주고 싶을 때, 그 특정 부분을 감싸고 있는 어떤 태그가 필요합니다.

그렇다고 제목도 아닌 곳에 <h1> 같은 태그를 쓸 수도 없고, 링크도 아닌 곳에 <a> 태그를 쓸 수도 없는 일이죠.

그런 때 쓰는 어떠한 기능도 없고 어떠한 의미도 없는 태그가 <div> 태그와 <span> 태그입니다.

 

 

 

<div>와 <span>의 차이

 

<div></div>로 감싸는 태그들은 block 속성을 가지고 있어서, 한 줄 전체를 차지하면서 자동 줄 바꿈이 되고,

<span></span>으로 감싸는 태그들은 inline 속성을 가지고 있어서 줄바꿈이 되지 않습니다.

 

 

 

 

CSS, inline과 block

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다.

gogogameboy.tistory.com

inline과 block 속성을 혹시 배운적이 없으시거나 가물가물 하신 분들은 위의 포스트를 참고해주세요.

 

 

 


이 글이 도움이 됐다면 하단의 공감 버튼을 꾹 눌러서
빨간 하트로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 


 


댓글