CSS - display 화면에 어떻게 보여질 것 인가를 정해주는 속성

display

화면에 어떻게 보여질 것인가를 정해주는 속성

 

• none
  • 영역이 잡히지 않음
• inline
  • 한 줄로 영역이 잡힘 <span>태그처럼 단, 가로/세로 길이가 조정이 안됨
• block
  • 세로로 영역이 잡힘 <p>태그처럼
• inline-block
  • 한줄로 영역이 잡히고 가로/세로 길이가 조정이 가능함

 

<ul class ="hero">
  <li>Superman</li>
  <li>Batman</li>
  <li>Pororo</li>
</ul>

display: inline;

li {
  display:inline;
  border : 1px solid;
  width:200px; // 적용안됨
}

display: block;

li {
  display:block;
  border : 1px solid;
  width:200px;
}

display: inline-block;

li {
  display:inline-block;
  border : 1px solid;
  width:200px;
}