<span> 태그

대표적인 인라인inline 요소. 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도.

 

하나의 글자처럼 취급되고, inline요소라서 줄바꿈 기능이 없어서 연달아 출력하면 그대로 한줄에 전부 출력된다.

 

<span>hello</span>

<span>world</span>

 

이런식으로 작성하면 출력은 'hello world'로 출력된다. 띄어쓰기는 span태그가 줄이 다른 상태에서 연달아 출력되면서 자동으로 띄어진거다.

 

만약 픽셀 크기를 바꾸고 싶어서 css파일에 

 

span {

    font-size:100px;

}

 

을 작성하면 100px짜리 'hello world' 문자가 나오지만 띄어쓰기 부분은 폰트 사이즈가 그대로라서 띄어쓰기 부분이 매우 좁아진다.

 

대신

 

body {

    font-size:100px;

}

 

을 작성하면 띄어쓰기 부분도 100px로 적용된다.

 

만약 span 태그를

 

<span>hello</span><span>world</span>

 

이런식으로 줄바꿈 없이 작성하고 출력한다면 span태그는 글자처럼 취급되기 때문에 중간에 공백 없이 'helloworld'로 출력될 것이다.

 

또한 inline 요소라서 줄바꿈이 안되는 것과 더불어 width, height 속성을 지정하지 못한다. 

 

백그라운드 색상이나 테두리, 볼드, 이탤릭 등은 적용 가능하다.

 

여백도 위아래는 적용 안되고 좌우면 적용된다.

 

<span><div></div></span> 처럼 사용할 수는 없다. 인라인 요소 안에 블록요소를 사용할수 없다.

 

<div>태그는 대표적인 블록 요소이고 블록요소는 기본적으로 가로 공간을 전부 채워 다음에 올 요소가 줄바꿈되어 나타난다. span태그와 달리 width, height 속성을 지정 가능하다.