css overflow 속성에 대한 이해의 전제 조건 : html 요소의 box모델에 대한 이해, float 속성에 대한 이해.
사실 html/css의 여러 요소간에 상호작용은 이론을 배운 것 처럼 간단하지 않다.
어떤 속성이 모든 요소에 적용되는 것은 아니며 또는 요소간 상호작용 역시 상대적으로 일어난다.
또는 요소에 적용된 속성이 바뀌면 요소간 상호작용 성격도 변하기도 한다. 이런 복잡함으로 인해서 많은 경험만이 답인 듯 싶다.
css overflow에 대한 내용을 설명하기 전에 우선 float 속성을 사용했을 때 일반적으로 우리가 간과하기 쉬운 현상을 한가지 소개하고 설명을 이어가겠다.
다음 그림은 html 코드와 결과인데 어떤 CSS 코드가 적용되었는지 생각해 보도록 하자.
css float 속성과 overflow 속성
다음은 여기에 적용된 CSS 코드다.
이렇게 어떤 요소에 float 속성을 주면 다음 요소가 float 속성을 가진 요소의 공간을 차지하는데 이건 box간에만 해당되는 상호작용이다. 내부 텍스트는 이전 속성의 box 공간을 침범하지 못한다. 믿기지 않는다면 첫 번째 div 요소의 Hello 글자를 없애고 width와 height 속성을 준 후 시험해 보자.
이 현상을 물리계의 현상과 점목시켜 이해하려고( 보통 float 속성을 주면 z좌표가 증가한다고 설명한다. ) 하면 어딘가 모순점이 생기기 때문에 경험적으로 이해해야 한다.
이런 점을 제대로 이해하지 않으면 float 속성에 대해서 반쪽만 이해하고 넘어갈 수 있다.
다음은 왜 이런 현상을 이해해야 하는지에 대한 대표적인 예제다.
div 요소 내부에 div 요소를 만들자. 그리고 내부 요소에 float 속성을 줘보겠다.
외부 div에는 padding 값을 10만큼 준 후 결과를 확인해보자.
역시 앞서 예제와 같이 box끼리는 서루 무시된다. 그런데 부모의 padding 값에는 영향을 받는다. 어쨌든 이렇게 내부요소에 float 속성을 주면 위와 같이 부모의 영역 밖으로 넘치는 overflow 현상이 발생할 수 있다.
이 현상을 해결하는 방법은 여러가지가 있는데 가장 흔하게 부모요소에 overflow : hidden; 속성을 주면 해결이 된다.
css overflow hidden 속성을 사용할 때 주의할 점
이 속성을 사용하면 가능한 방법으로 넘치는 현상을 해결해 준다. 위 예처럼 overflow hidden 속성을 가진 요소와 외부로 넘쳐흐르는 자식요소가 있다면 두가지 방법으로 해결할 수 있다.
① 넘쳐 흐르는 자식요소의 넘친 부분을 보이지 않게 한다.
② 넘쳐 흐르는 자식요소를 포함하도록 크기를 늘린다.
부모에 고정된 height 속성이나 width 속성 있을 경우는 ①처럼, 고정된 width, height 속성이 없는 경우는 ②처럼 동작한다.
그런데 문제는 부모에게 width, height 속성이 없더라도 자식 요소에 position : relative 속성을 주어 자식을 부모 밖으로 이동 시키면 ①번 현상이 일어나서 자식 요소가 완전히 화면에서 사라진다. 이렇게 의도적으로 외부로 빼내어 보여주고 싶은 요소까지 전부 지워버리므로 overflow hidden 속성을 사용하는 것은 완전히 깔끔한 방법은 이니다.
- 이 문제를 해결하는 방법
① 부모 요소에 display:inline-box; 속성을 준다.
②내부 요소의 마지막 요소를 강제적으로 만든 후 clear:both; 속성을 주어 float 속성을 없애면 된다.
둘의 결과는 좀 다르지만 결과에 차이가 있다.
① display:inline-box;
여기에 내부 요소를 밖으로 꺼내보도록 하겠다.
② clear:both;
내부 요소를 외부로 꺼내는 것은 직접 테스트 해보길 바란다.
그런데 의미없는 태그를 만드는 것이 별로 좋아 보이지는 않기에 대안으로 다음과 같이 가상선택자 after를 사용할 수도 있다.
결과는 앞 예제와 동일하다.
after 가상선택자는 내부의 가장 마지막 가상 요소를 만들어 내용을 넣을 수 있는 선택자다.
content 속성에 빈 값을 넣어서 아무 내용도 보이지는 않지만 내용을 넣으면 화살표 있는 곳에 내용이 표시될 것이다. 그리고 이 속성은 block 속성이므로 부모에게 인식되고 포함된다.
단 주의할 점은 부모 요소의 width, height 값을 주면 위 작업이 모두 의미없어질 수 있으므로 padding 값으로 내부요소와 거리를 조정하도록 하자.