display : inline, inline-block, block

Moolbum·2021년 11월 3일
0

css

목록 보기
3/3
post-thumbnail

Display

display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태
grid : grid template의 속성
flex : flexbox 속성

inline 속성

inline 상태는 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
ex) span, a, b ...

<span>inline</span>
span {
  background-color:yellow;
}

block 속성

가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

ex) div, p, li ...

<span>inline</span>
<div>block</div>
<div>block</div>

span {
  background-color:yellow;
}
div {
  background-color:skyblue;
  margin-top:1px;
}

inline-block 속성

block과 inline의 중간 형태라고 볼 수 있습니다.
줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.

<span>inline</span>

<div>block</div>
<div>block</div>

<p>inline-block</p>

span {
  background-color:yellow;
}
div {
  background-color:skyblue;
  margin-top:1px;
}

p {
  width:50px;
  display:inline-block;
  background-color:pink;
}

profile
Junior Front-End Developer 👨‍💻

0개의 댓글