css float 속성 해제 after 대한 이해

안녕하세요. float는 정말 자주 사용하는 속성입니다. 

float를 태그요소에 적용하면  block 속성을 없애버리는 특성을 가졌습니다. 

그리고 자신의 크기만큼만 공간을 차지하며 투명인간처럼 무시되게 되는 속성입니다.

이에 대한 자세한 설명은 제 블로그의 다음 글을 

html css float 속성 정리 참고하시길 바랍니다.

아무튼 이런 성질로 인해 다음 요소들이 딸려서 위로 올라오게 됩니다. 보통 웹 페이지의 네비게이션 바의 메뉴를 float:left 로 많이 만들어서 잘못해서 아래 요소들이 딸려올라오는 문제을 자주 겪는 것 같습니다.

제 경우는 메뉴바 또는 기타 웹의 전체 구성 등을 만들 때 diplay: flex;를 사용해서 float를 자주 쓸일이 없습니다. 개인적으로 flex는 반응형 웹을 깔끔한 코드로 만들 수 있다고 생각합니다.

그럼에도 이 글을 쓰는 이유는 after라는 의사요소를 선택하는 선택자 때문입니다.  after를 잘 사용하면 툴팁이나 기타 다양한 활용을 할 수 있습니다.

우선 float를 사용하여 문제가 발생하는 예제를 살펴보고 after로 해결하는 방법을 설명하고자 합니다.

float 문제 발생

nav 내부에 div 태그가 있고 모두 float: left 속성을 주었습니다. 결과는 다음과 같습니다.(img 속성은 block 속성이 아니어서 float을 적용하는 의미가 없기 때문에 div로 감싼 후 실험했습니다. 이미지를 버튼이라고 생각하면 편합니다. block에 대해 잘 모르시면 다음 글을 참고하세요

레이아웃 속성(display, inline, block)

 

float:left가 적용되었을 때

글들이 영향을 받아 위로 딸려올라갔습니다. 

그럼버튼(그림)에 float 속성을 주지 않았을 때의 결과를 우선 살펴보고 해결해보도록 하죠.

float 속성이 없을 때

원래 글들은 버튼(이미지)과 다른 라인에 있어야 정상인데 이상합니다.

심지어 nav 내부에 있는 요소들에게 적용된 float 속성이 그 외부의 다음 요소까지 영향을 주고 있습니다. 이 때 우리는 영향을 받은 외부 요소에서 

clear: left;

를 적용하여 해결할 수 있습니다.

해결이 간단히되었지만 보통 이렇게 하면 완벽한 해결책이 아닙니다. nav에 있는 요소가 원인인데 해결을 외부에서 했다면 외부 환경이 변했을 때 그 문제는 다시 발생하게 됩니다. 쉽게 말해 글들이 다른 요소로 대체된다면 대체될 요소에도 clear: left를 적용해야합니다. 위 예제는 간단하지만 많은 요소들이 복잡하게 얽혀있을 땐 원인 파악도 힘들고 복잡해 지죠.

문제는 문제가 발생한 곳에서 해결하기

이 문제를 해결하는 방법은 4~5가지 정도가 됩니다. overflow hidden은 제가 쓴 글에도 있습니다. 그런데 저도 다 알지 못합니다. 알 필요도 없구요. 다 알려고 하는 순간 개발자는 다칩니다. 그냥 필요한 것만 키핑하기에도 바쁜게 개발자입니다.

제가 볼 때 after를 활용한 해결책이 가장 직관적으로 보였습니다. 다음이 그 코드입니다.

여기에서 after는 간단히 설명하면 의사요소입니다. 가상의 요소입니다. 가상의 요소를 붙여서 거기에 clear: after를 한 겁니다.

그런데 이상하건 왜 float가 적용된 요소의 부모(nav)에 가상요소 선택자를 사용했을까요?

가상 요소 선택자 after는 적용된 요소 내부에 가상요소를 만들기 때문입니다. 크롬 브라우저를 사용하시면 F12를 눌러보셔서 확인해 보실 수 있습니다.

야스오가 아닌 야스오의 부모에 after를 적용하면 야스오의 형제가 하나 생깁니다.

이렇게 가상 요소에  clear: left가 적용되어 float로 인한 오류는 깔끔하게 해결되었습니다.

가장 혼동하시는 부분이 바로 after 적용시 가성요소의 생성위치인 듯 보입니다. 적용된 요소의 내부에 생기는 것을 기억하시기 바랍니다.