[CSS, HTML] display(디스플레이) inline, inline-block, block

줄 바꿈 없이 나란히 배치되는 속성을 의미합니다

대표적인 <span>, <a>, <em> 태그가 있습니다

<body>
  <span>AAA</span>
  <a>BBB</a>
  <em>CCC</em>
</body>

inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다

span {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: rgb(118, 83, 29);
}

전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다

대표적으로 <div>, <h1>, <p>가 있습니다

div, h1, p{
  background-color: yellow;
  
}

<body>
  <div>AAAA</div>
  <h1>BBBB</h1>
  <p>CCCC</p>
</body>

[CSS] sass를 사용하는 이유! 네스팅 문법 (0)	2022.07.27
[CSS] margin으로 가운데 정렬 (0)	2022.05.24
[CSS] position(포지션) relative, absolute, fixed (0)	2022.05.24
[CSS] transition을 이용한 검색 창 꾸미기 (0)	2022.02.07
[CSS] position-sticky(스티키)! (0)	2022.02.03

메로나