css의 display 속성은 페이지 상의 엘리먼트들이 어떻게 보여지고 배치되는지를 선택하는 속성입니다.
여러 가지 display 의 속성 중 inline / block / inline-block 속성에 대해서 알아보겠습니다.
block
대부분의 HTML element는 block의 요소입니다.
<header>, <footer>, <p>, <li>, <div>, <table>, <h1> , ...등의 태그들이 block 요소에 해당됩니다.
block 속성은 바로옆에 다른 요소를 붙여넣을 수 없다는 뜻이고, inline 속성과는 반대로 그 자체로 한 줄을 완전히 차지하게됩니다. 따라서 요소 앞 뒤로 줄바꿈이 됩니다.
- height와 width 값을 지정 할 수 있다.
- margin 및 padding을 지정 할 수 있다.
<body>
<div>div</div>
<p>pppp</p>
<h1>h1</h1>
<h2>h2</h2>
</body>
실행 결과
width 값과 margin을 설정 했을 때 직접 지정한만큼 적용이 되었습니다.
inline
inline 으로 지정된 요소는 blcok의 요소와 성질이 반대입니다.
<span>, <a>, <em>, <img>, ...등의 태그들이 inline 요소에 해당됩니다.
inline 뜻 그대로 요소는 서로 한 줄, 바로 옆에 위치 할 수 있다는 뜻입니다. block 속성과는 반대로 요소들이 한 줄에 나란히 배치되게 됩니다. 또한 요소 앞 뒤로 줄바꿈이 되지 않습니다.
- height와 width를 지정 할 수 없다.
- 위 아래로는 margin, padding 값이 적용 되지 않는다.
<body>
<a>AAA</a>
<span>span</span>
<a>BBB</a>
</body>
실행 결과
width, height를 지정했지만 적용되지 않았고 margin, padding값은 좌우에만 반영되고 상하에는 적용되지 않습니다.
inline-block
inline과 block의 특징을 모두 가진 요소입니다.
외부는 inline 이지만 내부는 block 처럼 표시할 수 있습니다.
inline에서 불가능하던 width와 height 지정 및 margin, padding 의 상하 간격 지정이 가능해집니다.
inline-block을 이용하면 여러 개의 요소들을 한 줄에 원하는 너비만큼 배치 가능 하기 떄문에 레이아웃을 구성할 때 활용할 수 있습니다.
- 줄바꿈이 되지 않습니다.
- block 속성처럼 width, height를 지정 할 수있습니다.
inline에서 썻던 코드에서 display: inline-block만 추가하였습니다.
실행 결과
width와 height, margin, padding 값이 지정한 대로 적용되었습니다.
참고
위에서 예를 들었던
<div>, <p>, <h1> , ...등의 기본적으로 block 요소를 가진 태그들에도 display 속성을 지정해주면 설정한 속성으로 사용할 수 있습니다.
display:inline 을 적용하면 다음과 같이 block의 속성을 가졌더라도 변경할 수 있습니다.
