🤔 컨테이닝 블록

박상은·2021년 10월 8일

컨테이닝 블록

🪄 CSS 🪄

목록 보기

3/6

🤔 컨테이닝 블록

컨테이닝 블록이란 요소의 위치와 크기를 지정하는 데 사용하는 블록을 의미합니다.

이게 무슨 말이냐면 상대적인 값이나, 요소의 위치를 지정하는 기준이 필요할 때 사용한다는 의미힙니다.

이게 또 무슨 말이냐면 position: absoulte;나 font-size: 2em;같은 값을 결정하는 데 기준이 필요한 속성들의 기준 즉, 대상을 결정하는 데 사용하는 것이 컨테이닝 블록입니다.

1. 컨테이닝 블록 조건

position이 absolute인 경우에는 static제외한 가장 가까운 조상
position이 fixed인 경우에는 뷰포트

2. 예시

<body>
  <div class="outer">
    outer
    <div class="inner">width: 50%</div>
  </div>
</body>

.outer {
  position: static;
  display: inline;
  width: 100px;
  height: 100px;
  background-color: red;
}

.inner {
  width: 50%;
  background-color: blueviolet;
}

일단 outer는 display: inline;이기 때문에 width는 무시되고 자신의 크기만큼 영역을 차지한다.

그리고 inner는 outer내부에 존재하므로 inner의 컨테이닝 블록이 outer가 되고 outer의 width의 50%만큼 크기를 차지한다고 생각할 수 있지만 실제로 실행시켜보면 뷰포트를 기준으로 width값이 결정된다.

outer의 display: inline-block으로 바꾸면 inner의 컨테이닝 블록이 outer가 되어 50px만큼의 width를 차지하게 된다.

👇 참고한 사이트

박상은

...

이전 포스트

🤔 박스 모델

다음 포스트

🤔 컨테이닝 블록

🪄 CSS 🪄

🤔 컨테이닝 블록

1. 컨테이닝 블록 조건

2. 예시

👇 참고한 사이트

🤔 박스 모델

🤔 마진 상쇄

0개의 댓글