[CSS] Box Type

hyesom·2021년 11월 25일
0

CSS

목록 보기
4/18
post-thumbnail

Box

display: box type을 결정짓는 css속성

① display: block;

  • 쉽게 생각하면 다른 요소들을 옆에 못오도록 막는다고(영역) 생각!
 <div class="content_parent">
    <div class="content1">
      content1
    </div>
    <div class="content2">
      content2
    </div>
 </div>
* {
      box-sizing: border-box;
      margin: 0;
    }
.content_parent {
      background-color:bisque;
    }
.content1, .content2 {
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-indent: 20px;
    }
.content1 {
      width: 500px;
      background-color: blue;
    }
.content2 {
      width: 100px;
      background-color: red;
    }
  • 따로 width의 값을 선언하지 않은 경우, width는 부모의content-box의 100% 값이 된다.
  • 따로 width의 값을 선언한 경우, 남은 공간은 margin으로 자동으로 채워진다.
  • 따로 부모의 height를 선언하지 않을 경우,
    자식 요소의 height의 합 = 부모의 height

    👩‍💻 참고) margin: 0 auto; : block일 경우 가운데정렬을 할 때 사용

② display: inline;

  • 쉽게 생각하면 옆에 요소들이 계속 오는 흐름(선) 이라고 생각!
  • width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom이 ❌사용불가❌
  • 대표적인 inline요소로는 <span>이 있다.

③ display: inline-block;

  • 쉽게 생각하면 block + inline
  • 하지만 inline에서 쓰지못했던 width, height, margin, padding속성의 상하 간격 지정이 가능해진다.
  • 대표적인 inline-block요소로는 <button>, <input>, <select>태그 등이 있다.

④ display: flex;

profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글