블록 서식 맥락(block format context

요소의 박스보다 내용이 길어질 경우 어떻게 보여줄 것인가? 이와 관련된 개념으로 블록 서식 맥락(block format context; 이하 ‘BFC’)에 대해 살펴보고 BFC가 생성되는 overflow의 상황을 살펴보고자 한다.

1. 블록 서식 맥락(block format context)

---

1-1 의미

웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위를 말한다.

1-2 생성

블록 서식 맥락은 다음과 같은 경우에 생성됩니다.

• overflow: visible을 제외한 모든 값
• html root 태그 (body 태그는 만들어지지 않는다)
• none을 제외한 float
• position: fixed, absolute
• display: inline-block, table, table-cell, table-caption
• display: flow-root (일부 브라우저만 동작함)
• display: flex, inline-flex, grid, inline-grid

1-3 특징

1-3-1 : BFC는 레이아웃 안의 작은 레이아웃이라고 생각하면 된다.

BFC 내부의 모든 요소는 이 블록 안에 속한다. 내부 요소가 float 상태라 하더라도 마찬가지다. 그래서 container에 overflow: hidden; 속성을 부여하면 float 요소는 container 높이에 영향을 준다.

1-3-2 : BFC는 margin collapse를 막는다.

BFC는 margin collapse를 방지한다. 그래서 p와 div의 margin이 서로 상쇄되지 않는다.

• margin collapse: 요소의 margin 값이 겹칠 경우, 값이 더 큰 margin만 적용되는 현상. margin collapse가 발생하기 위해서는 둘 사이에 아무것도(border, padding 포함) 없어야 한다.

2. overflow

---

2-1 의미

특정 자식요소가 그 부모요소의 범위를 초과할 경우 어떻게 처리할지 정할 수 있는 속성.

.parent { overflow: visible | hidden | scroll | auto; }

2-2 overflow의 속성(value) 값

- overflow: visible  //특정 요소가 박스를 넘어 가더라도, 그대로 보여줌.
- overflow: hidden   //부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리.
- overflow: scroll   //부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만,
                     그 대신 사용자가 확인 할 수 있도록 스크롤바를 표시 해줌.

- overflow:auto     //부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우
                      해당 부분을 보이지 않도록 처리하고,
                      사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시.

2-3 overflow-x 와 overflow-y

• overflow 속성은 가로 부분과 세로 부분 모두에 일괄적으로 적용되는 속성 값입니다.
• 그런데 가로부분의 넘치는 부분은 감추는 부분은 감추고, 세로 부분의 넘치는 부분은 그대로 보여주어야 할 때 :overflow-x 와 overflow-y 를 아래와 같이 사용.

.parent { overflow-x: hidden; overflow-y: visible; }

3. text-overflow

3-1 의미

박스 안의 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성이다.

주의! text-overflow는 다음 2가지 조건을 모두 충족할 때 적용된다.

1. overflow 속성값이_ hidden, scroll, auto_ 중 1개 일때 (visible제외).
2. white-space: nowrap (텍스트가 길어도 줄바꿈이 되지않음) 또는 텍스트가 다음줄로 이동하지 않는 비슷한 경우

3-2 속성

text-overflow: clip| ellipsis| fade;

1)  clip
: default(기본값).
: 텍스트를 잘라낸다.

2) ellipsis
: 텍스트가 잘렸다는 것을 표현하기 위해 말줄임표(...)를 표시한다.

3) fade
: 넘쳐나는 인라인 내용을 잘라 내고,
상자의 가장자리 근처에 페이드 아웃 효과를 적용하여 가장자리의 투명성을 높임.