display속성
display속성이란 요소의 박스타입(유형)을 설정하는 속성입니다. 박스타입(유형) 설정을 통해 요소가 화면에 어떻게 보여지는지를 결정합니다.
이번 포스팅에서는 display 속성값 중 inline,inline-block,block에 대해 알아보겠습니다.
inline
inline요소는 말 그대로 요소끼리 줄바꿈 없이 나란히 배치됩니다.
<span>,<a>,<img> 등이 inline 요소에 해당하는 태그들입니다.
<span>월요일</span>
<span>화요일</span>
<span> 태그를 통하여 작성하였을 경우
월요일 화요일 이렇게 요소끼리 줄바꿈 없이 배치됩니다.
inline요소의 경우 태그에 작성된 내용의 크기만큼 공간을 차지하기 때문에 width나 height,margin등의 값을 지정하더라도 적용되지 않는다는 점을 주의해야합니다.
blcok
block요소의 경우 기본적으로 width가 자신의 컨테이너의 100%가 됩니다. 여기서 block은 이 요소 바로 옆(좌우측)에 다른 요소를 붙일 수 없다는 것을 의미합니다. 즉, 혼자 한 줄을 다 차지합니다.
<div>,<p>,<h1>,<header>,<footer>,<table> 등 대부분의 HTML태그들이 block요소입니다.
<div>수요일</div>
<div>목요일</div><div> 태그를 통하여 작성하였을 경우
월요일
화요일
이렇게 줄바꿈이 되어 화면에 보여집니다. block요소는 inline요소와 달리
width,height,margin 등의 값을 지정하면 모두 적용이 됩니다.
기본적으로 inline/block요소더라도 display를 통해서 변경이 가능합니다.
<div>월요일</div>
<div>화요일</div>div {display: inline;}block요소인 <div>를 display를 통해서 inline으로 변경하면
월요일 화요일 이렇게 줄바꿈 없이 배치됩니다.
inline-block
inline-block의 경우 inline과 block의 특성을 합쳐놓았다고 볼 수 있습니다. 기본적으로는 inline요소의 특징을 가지고 있지만 inline요소와 달리 width,height,margin 등의 값을 지정하면 적용됩니다.
