[css] 컨테이닝 블록

dee·2022년 7월 30일
iframe 반응형컨테이닝 블록

css

목록 보기
1/1
post-thumbnail

iframe은 width와 height값이 지정되어야하는 요소로 width에 따라 자동으로 height가 설정되지 않아 반응형으로 어떻게 구현해야되는지 의문이 들었고 해당 부분에 대해 검색해본 결과 아래와 같은 코드를 찾게 되었습니다. 

<div class="iframeContainer">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/XCAwSBdeejU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.iframeContainer {
  position: relative;
  padding-bottom: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
}

위의 코드를 분석한 결과,
iframe가 position: absolute로 설정하여 position: relative를 가진 컨테이너 넓이와 높이에 영향을 받아 비율을 유지하며 렌더링하고 있었습니다. padding-bottom의 값이 비율을 유지하고 있는 키포인트인데, 이 원리는 컨테이닝 블록과 연관이 있었습니다.


🤔컨테이닝 블록 왜 알아야 하는가?

컨테이닝 블록은 요소를 담고 있는 블록입니다.

만약 <p> 요소가 있고 이를 <div>가 감싸고 있다면, <div>가 <p>의 컨테이닝 블록입니다. <p>에 width값을 백분율로 주면, 컨테이닝 블록인 <div>를 기준으로 값을 계산합니다. 이처럼 특별한 요인이 없다면 대부분 자신의 블록 요소인 부모를 기준으로 계산되는 값을 예측할 수 있습니다.

하지만 항상 블록 요소인 부모가 컨테이닝 블록이 아니기에 계산된 값을 예측할 수 있도록 컨테이닝 블록이 결정 요인들에 대해서 알아보았습니다.


1. 컨테이닝 블록 영향 요인

요소의 일부 속성 값을 어떻게 지정하냐에 따라 컨테이닝 블록에 영향을 받게 됩니다. 아래의 경우들이 자신의 컨테이닝 블록을 기준으로 계산하여 적용합니다.

  1. width, height, padding, margin 속성 값을 백분율로 사용할 경우

  2. position의 값이 absolute, fixed 등과 같이 절대적 위치로 설정되어 있는 요소의 오프셋 속성(left, top, bottom, right) 값일 경우



2. 컨테이닝 블록 결정 요인

컨테이닝 블록 결정 요인은 한 번에 이해하기 어려웠습니다. 하지만 position: absolute와 position: relative의 관계를 생각하며 보았더니 오히려 이 두 속성들을 지정함에 따라 왜 레이아웃이 부모, 자식 관계를 가지는지 좀 더 명확하게 알 수는 있었습니다.

  1. position 속성이 static , relative , sticky 중 하나일 경우

    • 가장 가까운 조상 블록 컨테이너가 컨테이닝 블록
      (inline-block, block, list-item 등의 요소)
    • 가장 가까우면서 서식 맥락을 형성하는 조상 요소
      (table, flex, grid, 아니면 블록 컨테이너 자기 자신)

  2. position 속성이 absolute인 경우

    • 컨테이닝 블록은 position 속성 값이 static이 아닌 가장 가까운 조상의 내부 여백 영역.
      🏷️ position: relative 가 부모가 되는 이유!!!

  3. position 속성이 fixed인 경우

    • 컨테이닝 블록은 뷰포트나 페이지 영역(페이지로 나뉘는 매체인 경우).
      🏷️ Modal 레이아웃 적용시 fixed를 쓰는 이유!!

  4. position 속성이 absolute나 fixed인 경우

    • 아래 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도있음.
      i. transform이나 perspective 속성이 none이 아님.
      ii. will-change 속성이 transform이나 perspective임.
      iii. filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
      iv. contain 속성이 paint임.

    🏷️ 4가지 조건 중 filter는 none이 default값 -> 고로 가장 가까운 조상의 내부 영역이 대부분 컨테이닝 블록이 될 수 있다!!



3. 컨테이닝 블록으로 속성 백분율값 계산하기

이제 앞서 의문이 들었던 속성 값으로 백분율로 주었을 경우에 대해 조사한 내용입니다. 여기서 주의할 점이 있다면 padding, margin은 상하좌우 모두가 컨테이닝 블록의 width를 기준으로 값이 계산된다는 것입니다.

  1. height, top, bottom 속성

    • 컨테이닝 블록의 height를 사용해 백분율을 계산.
    • 컨테이닝 블록의 height가 auto이거나, position이 relative거나 static이면 계산값은 0.

  2. width, left, right, padding, margin 속성

    • 컨테이닝 블록의 width를 사용해 백분율을 계산.


4. 예시

위의 요인들이 어떻게 적용되는 지를 구현해 보았습니다.

두 개의 <div> 요소가 중첩 구조를 이루고 position 속성을 적용하지 않았으니, .child-block의 컨테이닝 블록은 가장 가까운 블록 레벨 요소는 .containing-block입니다. 

<!-- index.html --> 
<div class="containing-block">
	<div class="child-block"></div>
</div>
/* style.css */
.containing-block {
	width: 300px;
    height: 500px;
    background-color: lavender;
}

.child-block {
	padding-top: 50%;
	width: 50%;
    background-color: pink;
}

여기서 .child-block에 width : 50%의 값을 주었을 경우, 해당 요소의 컨테이닝 블록의 넓이 값 300px 기준으로 width값이 계산됩니다.
(예상했던 결과값인 300px x 0.5 = 150px이 적용.)

padding-top을 주었을 경우, .containing-block의 height 기준으로 계산하여 250px이 적용되는 것이 아니라, width를 기준으로 150px이 계산되어 적용되는 것을 볼 수 있습니다.




🍑 오늘의 공부 일기

padding-top의 백분율 값을 적용 원리를 공부하면서 컨테이닝 블록이라는 새로운 것을 알게 되어서 mdn을 보는 재미를 알게 되었다. 또한 공식처럼 외우고 있던 position의 relative와 absolute의 관계를 머리로 이해하게 되서 css에 더 가까워지는 기분이 들었다.
그리고 처음 퍼블리셔 공부를 했을 때가 생각이 나면서 반성하게 되었다. 그 당시 강의를 들을 때 height가 백분율이 예측한 대로 결과값이 나오지 않는다고 백분율을 지양하라고 배웠었다. 지금 공부하면서 그 당시에 강사님 말을 받아들이기만 하고 따로 찾아보지 않았던 내 자신이 부끄러워졌고 앞으로는 의문점이 든다면 파고들면서 원리에 대한 공부를 해야겠다.



출처
https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block

profile
dee
웹 프론트엔드 개발자

0개의 댓글