display 속성

display 속성

• inline-block, inline, inline-flex

  • 너비 : 너비 설정 x -> 너비가 최소한으로 줄어든다.
  • 높이 : 높이 설정 x -> 높이가 최소한으로 줄어든다.
  • 본질 : 글자화
  • line 사용 : 한 줄에 최대한 여러개가 나온다.
  • 정렬 : 부모의 text-align에 의해서 정렬

• block, flex

  • 너비 : 너비 설정 x -> 너비가 최대한으로 줄어든다.
  • 높이 : 높이 설정 x -> 높이가 최대한으로 줄어든다.
  • 본질 : 블록화
  • line 사용 : 한 줄을 무조건 혼자 쓴다.
  • 정렬 : 스스로 margin-left, margin-right를 사용해서 정렬

• none

  • 너비, 높이: 다 사라진다. (아예 사라진다.)

  예외

• a, span 엘리먼트: display - inline(기본 값)

• img 엘리먼트: display- inline-block(기본 값)

• inline 요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

---

display 속성표 만들기

HTML
<table border="1">
  <thead>
    <tr>
      <th>display</th>
      <th>너비</th>
      <th>높이</th>
      <th>한줄 혼자 사용</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>block</th>
      <td>지정되지 않으면, 최대한 넓어진다.</td>
      <td>지정되지 않으면,최소한으로 줄어든다.</td>
      <td>혼자 사용(세로로 나열)</td>
    </tr>
    <tr>
      <th>inline-block</th>
      <td>지정되지 않으면, 최소한으로 좁아진다.</td>
      <td>지정되지 않으면, 최소한으로 줄어든다.</td>
      <td>최대한 여럿이 사용(가로로 나열)</td>
    </tr>
  </tbody>
</table>

<ul>
  <li>div, section, nav, article의 display 속성 기본값은 'block'이다.</li>
  <li>div, section, nav, article의 width 속성 기본값은 'auto'이다.</li>
  <li>div, section, nav, article의 height 속성 기본값은 'auto'이다.</li>
</ul>

CSS
table {
  border-collapse: collapse;
}
th,
td {
  padding: 10px;
  font-size: 1.5rem;
}