TIL - <span>, <div>, <p>의 차이점

김현재·2021년 8월 2일
1
post-thumbnail

1. display 속성 값이 다르다

div {
	display: block;
}

span {
	display: inline;
}

p {
	display: block;
}

divpblock 속성이며, spaninline 속성이다.

참고) inline vs block

block

만약 책장을 window display라고 치면, block은 책장의 한 줄이라고 비유할 수 있을지도 모르겠다.

독자적인 존재감이 있는 상태로, 해당하는 요소들은 화면 내에서 새로운 줄을 만들어 위치하며, 가로 크기가 부모 요소의 100%를 차지한다. 즉, 화면 내 특정 구역을 차지하는 형태로 볼 수 있다.

가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 한 줄을 그대로 전부 차지한다는 특징을 가진다.

block 속성을 기본 값으로 가지는 요소는 대표적으로 div, p 등이 있다.

inline

block 이 책장이라면, inline 은 책장에 꽂혀있는 책으로 비유할 수 있다.

존재감이 약한 녀석으로, 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸는 형태로 보여진다.

가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정된다.

대표적인 inline 요소로는 span 이 있다.

block과 inline의 차이점

위에서도 언급했지만 둘의 차이는 명확히 아래와 같다.

  1. 요소가 새로운 행(new line)에서 시작하는지
  2. 요소의 크기를 지정할 수 있는지

예시

<!-- HTML -->
<body>
	<div>div 입니다</div>
	<p>p 입니다</p>
	<span>span 입니다</span>
</body>

/* css */
div, p, span {
	background-color: yellow;
}

위와 같이 각 요소를 작성한 후 화면에서 비교해보면, 아래와 같이 각 요소의display 속성 특징이 드러난다



2. span은 inline요소이기에 div, p를 품을 수 없다

반면, divpspan을 품을 수 있다 (block 요소 이기에)

예시

<!-- HTML -->
<body>
    <div><p>p품은 div</p></div>
    <div><span>span품은 div</span></div>
    
	<span><div>div 품은 span</div></span>
    <span><p>p 품은 span</p></span>
</body>

<!-- CSS -->
div {
	background-color: yellow;
}

p {
    background-color: red;
}

span {
    background-color: blue;
}

예시의 두번째 줄(span 품은 div)과 세번째 줄(div 품은 span)을 비교해보면 각 특성을 확실히 알 수 있다.
세번 째 줄을 보면 divspan으로 묶어도, display:blockdiv의 존재감이 훨씬 크기에 spandiv에 덮혀 색이 보이지 않는 것이 확인 된다.
반면, 두번째 줄 처럼 divspan 을 감싼 경우 spaninline요소로 글자가 적혀있는 부분만 영역으로 잡히기에, divspan 의 남는 부분을 채우고 있는 것을 볼 수 있다.



3. 그러나 p는 div를 포함할 수 없다

p : 문자 정보를 표현하는 단락으로, 아래에 어떠한 태그도 기재해서는 안된다. - 오직 인라인 요소만 기재 가능 (ex - span, a, strong 정도..)
div : HTML 문서의 영역을 구분하는 역할로, 해당 태그 아래에 모든 태그를 기재할 수 있다.

정리하면, <p> 태그 안에 작성되는 정보는 텍스트 정보로만 인식되며, <div>태그 안에 작성된 정보는 window 영역을 나누는 용도로 사용되어, 내부에 여러 태그를 담을 수 있다.

예시

<!-- HTML -->
<p>여기에 <div>이제 div가 들어갑니다~</div></p>
<div>위의 div와 <p>p를 뒤집으면 어떠려나?</p></div>

역시나 p 가 인라인 요소이기에 안에 div 가 들어가니까 이상하게 레이아웃이 망가진 모습을 볼 수 있다.
허나, div 의 경우 블록 요소이기에 문제 없이 p 가 감싸진 모습을 볼 수 있다.



덧) inline-block

block 속성과 inline 의 속성을 섞어 놓은 것. block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있다.



참고

https://dasima.xyz/div-vs-span-vs-p-차이는-블록-요소와-포함-유무/
http://triki.net/css-display-block-inline-inline-block

profile
쉽게만 살아가면 재미없어 빙고!

2개의 댓글

comment-user-thumbnail
2021년 8월 2일

<p><div>가 포함될 수 없다는 거 몰랐었는데... 👍 감사합니다!!

1개의 답글