요소의 박스보다 내용이 길어질 경우 어떻게 보여줄 것인가?
이와 관련된 개념으로 블록 서식 맥락(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
: 넘쳐나는 인라인 내용을 잘라 내고,
상자의 가장자리 근처에 페이드 아웃 효과를 적용하여 가장자리의 투명성을 높임.
참고자료
