CSS - display 속성

요소의 출력 여부나 요소의 앞과 뒤에 줄바꿈을 지정하기 위해 사용합니다.

값	설 명
none	해당 요소를 감춤.
inline	인라인 요소로 표시. <span>와 같은 인라인 요소로 바꿈. 앞 뒤의 요소에 대해 줄바꿈을 하지 않음. (margin-top, margin-bottom, 너비, 높이 조절 불가)
block	블록 요소로 표시. <p>와 같은 블록 요소로 바꿈. 앞 뒤의 요소에 대해 줄바꿈을 함. (마진, 패딩, 보더, 너비, 높이 조절 가능)
inline-block	인라인으로 표시 (마진, 패딩, 보더, 너비, 높이 조절 가능)
list-item	block 과 동일하지만 <li> 요소를 사용한 것처럼 만듦.
inline-table	인라인 요소의 표를 만듦.
table	<table> 요소를 사용한 것처럼 표를 만듦.
table-caption	<caption> 요소를 사용한 것처럼 표의 캡션을 만듦.
table-column-group	<colgroup> 요소를 사용한 것처럼 열 그룹으로 만듦.
table-header-group	<thead> 요소를 사용한 것처럼 만듦.
table-footer-group	<tfoot> 요소를 사용한 것처럼 만듦.
table-row-group	<tbody> 요소를 사용한 것처럼 만듦.
table-cell	<td> 요소를 사용한 것처럼 하나의 셀로 만듦.
table-column	<col> 요소를 사용한 것처럼 하나의 열로 만듦.
table-row	<tr> 요소를 사용한 것처럼 표의 행을 만듦.

<style>
div p{
  display: inline-block;
  margin: auto 20px;
}
</style>

<div>
  <p>홈</p>
  <p>인터넷</p>
  <p>브라우저</p>
</div>

목록을 한줄로 배치합니다.

<style>
ul li {
  border: 1px solid red;

  display: inline;
}
</style>

<ul>
  <li>홈</li>
  <li>인터넷</li>
  <li>브라우저</li>
</ul>