div {
display: block;
}
span {
display: inline;
}
p {
display: block;
}
div
와 p
는 block
속성이며, span
은 inline
속성이다.
만약 책장을 window display라고 치면, block은 책장의 한 줄이라고 비유할 수 있을지도 모르겠다.
독자적인 존재감이 있는 상태로, 해당하는 요소들은 화면 내에서 새로운 줄을 만들어 위치하며, 가로 크기가 부모 요소의 100%를 차지한다. 즉, 화면 내 특정 구역을 차지하는 형태로 볼 수 있다.
가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 한 줄을 그대로 전부 차지한다는 특징을 가진다.
block 속성을 기본 값으로 가지는 요소는 대표적으로 div
, p
등이 있다.
block
이 책장이라면, inline
은 책장에 꽂혀있는 책으로 비유할 수 있다.
존재감이 약한 녀석으로, 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸는 형태로 보여진다.
가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정된다.
대표적인 inline 요소로는 span 이 있다.
위에서도 언급했지만 둘의 차이는 명확히 아래와 같다.
<!-- HTML -->
<body>
<div>div 입니다</div>
<p>p 입니다</p>
<span>span 입니다</span>
</body>
/* css */
div, p, span {
background-color: yellow;
}
위와 같이 각 요소를 작성한 후 화면에서 비교해보면, 아래와 같이 각 요소의display 속성 특징이 드러난다
반면, div
와 p
는 span
을 품을 수 있다 (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)을 비교해보면 각 특성을 확실히 알 수 있다.
세번 째 줄을 보면 div
를 span
으로 묶어도, display:block
인div
의 존재감이 훨씬 크기에 span
이 div
에 덮혀 색이 보이지 않는 것이 확인 된다.
반면, 두번째 줄 처럼 div
로 span
을 감싼 경우 span
이 inline
요소로 글자가 적혀있는 부분만 영역으로 잡히기에, div
가 span
의 남는 부분을 채우고 있는 것을 볼 수 있다.
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
가 감싸진 모습을 볼 수 있다.
block 속성과 inline 의 속성을 섞어 놓은 것. block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있다.
https://dasima.xyz/div-vs-span-vs-p-차이는-블록-요소와-포함-유무/
http://triki.net/css-display-block-inline-inline-block
<p>
에<div>
가 포함될 수 없다는 거 몰랐었는데... 👍 감사합니다!!