CSS_display

display 속성

: 화면에 어떻게 보여질지 결정하는 속성
-html 태그는 기본적으로 block과 inline 요소 둘 중에 하나를 기본 값으로 가짐

• inline
  -span, a, img 태그와 같이 내용물(content)만큼만 공간이 할당됨.
  -content 만큼 공간을 할당하기 때문에, width, height, padding, margin 사용 불가
  -줄바꿈 없이 바로 옆에 배치

• block
  -div, p, ul, ol 태그와 같이 한 줄을 다 차지함
  -inline 요소와 달리 width, height, padding, margin 사용 가능

• inline-block
  -block 요소처럼 크기 지정을 하되 inline 요소처럼 다른 내용들과 같은 줄을 공유하고 싶은 경우
  -block과 inline 요소의 장점을 가짐

<style>
  .d-inline1 {
  	display: inline;
  	background-color: lightblue;
  }

  .d-inline2 {
    display: inline;
    background-color: lightcoral;
  }

  .d-block1 {
    display: block;
    background-color: lightblue;
  }

  .d-block2 {
    display: block;
    background-color: lightcoral;
    /* width: 200px;
    height: 200px; */
  }
</style>
<div class="d-inline1">d-inline1 클래스를 갖고 있는 div.</div>
<div class="d-inline2">d-inline2</div>
    
<div class="d-block1">d-block1 클래스를 갖고 있는 div</div>
<div class="d-block2">d-block2</div>