블로그 이름을 입력해주세요

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

CSS

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

Dev_jihoon8730 2022. 5. 24. 17:24

 

inline

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

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

 

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

 

inline-block

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

 

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

 

block

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

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

div, h1, p{
  background-color: yellow;
  
}
<body>
  <div>AAAA</div>
  <h1>BBBB</h1>
  <p>CCCC</p>
</body>

 

'CSS' 카테고리의 다른 글

[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
'CSS' Related Articles more