display 속성 - inline, block, inline-block

9268 단어 CSSCSS

display

CSS에서 display 속성은 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 상호배치 되는지를 결정합니다.
inline block inline-block 을 속성값으로 사용할 수 있습니다.

display : inline

  • 콘텐츠의 흐름을 끊지 않고, 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다.
  • inline은 해당 태그가 마크업 하는 content의 크기만큼만 공간을 차지하기 때문에 width와height 속성을 지정해도 변화가 없습니다.
  • margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않습니다.
  • 대표 엘리먼트 <span> <a> <em> 등

<style>
span {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}
</style>

<body>
before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after
</body>

display : block

  • 요소의 전 후 줄바꿈이 들어가기 때문에 항상 새 줄에서 시작합니다.
  • width height margin padding 속성이 모두 반영됩니다.
  • <div> <p> <h1>
<style>
div {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}
</style>

<body>
before
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
after
</body>

display: inline-block

  • inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전 후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다.
  • ✔️width height margin padding 속성의 상하 간격 지정이 가능합니다. 이것이 inline 요소와의 차이점입니다.
  • inline-block 엘리먼트는 명시적으로 스타일을 display:inline-block 으로 지정해줘야 합니다.
  • 한 줄에 여러 개의 엘리먼트를 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.
  • <button> <input> <select> 등

<style>
span {
  display: inline-block;
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}
</style>

<body>
before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after
</body>

참고 https://www.daleseo.com/css-display-inline-block/

WET_3 | SystemCheckError
[2차프로젝트] AirBitAndBite 후기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage