프로그래밍/HTML5

css float 속성 해제 after 대한 이해

콘파냐 2020. 11. 19. 23:19
반응형

안녕하세요. 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:left가 적용되었을 때

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

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

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 적용시 가성요소의 생성위치인 듯 보입니다. 적용된 요소의 내부에 생기는 것을 기억하시기 바랍니다.

반응형