🤔 블록 서식 맥락

박상은·2021년 10월 8일

BNF 블록 서식 맥락

🪄 CSS 🪄

목록 보기

1/6

🤔 블록 서식 맥락 ( Block Format Context )

블록 서식 맥락을 이후 BNF로 사용하겠다.

MDN정의

블록 서식 맥락(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.

위와 같이 정의되어 있지만 이 텍스트만 보고는 무슨 의미인지 전혀 알 수 없다고 생각한다.

구글링해서 여러 정보를 찾아본 결과 BNF는 아직 정확히 모르겠으나 사용 이유는 어느정도 이해했다.

사용 이유

float로 사용하고 부모가 자식의 영역을 모두 담지 못하는 경우와 마진상쇄를 없애기 위해 사용한다.

1. 부모가 자식을 모두 담지 못하는 경우 ( float사용 )

html

<!-- 모두 생략하고 body부분만 작성함 -->
<body>
  <div class="container bnf">
    <div class="float__box">float-box!!</div>
    container!!
  </div>
</body>

.container {
  border: 5px dashed black;
  padding: 40px;
  margin: 10px;
}

.float__box {
  float: left;
  background-color: red;
  width: 100px;
  height: 500px;
  padding: 20px;
  margin: 10px;
  border: 5px dashed black;
}

.bnf {
  overflow: hidden;
}

위와 같은 코드로 실행시켜보면 container가 float__box를 모두 담지 못해 float__box의 height가 container보다 커지게 된다.

이 때 bnf를 container의 클래스에 추가해주면 float__box를 포함한 크기만큼 커지게 된다.

2. 마진상쇄 제거

html

<body>
  <div class="top">top!</div>
  <!-- <div class="bnf"></div> -->
  <div class="bottom">bottom!!</div>
</body>

.top {
  padding: 10px;
  background-color: red;
  margin: 100px 0;
}

.bottom {
  padding: 10px;
  background-color: blue;
  margin: 100px 0;
}

.bnf {
  overflow: hidden;
}

css의 마진상쇄라는 특성때문에 top과 bottom에 각각 마진을 부여했지만 마진끼리 겹쳐서 100px만큼만의 마진이 생기게 됩니다.
이런 현상을 막기 위해서는 BNF를 적용시키면 마진상쇄현상이 없어지게 됩니다.

위처럼 마진상쇄가 일어나는 태그 사이에 BNF를 적용시킨 태그를 넣어어 되고 아래처럼 감싸도 됩니다.

<body>
  <div class="top">top!</div>
  <div class="bnf">
    <div class="bottom">bottom!!</div>
  </div>
</body>

👇 참고한 사이트

박상은

...

다음 포스트