버튼 안에 툴팁 absolute 포지션으로 배치할때 툴팁 텍스트가 줄바꿈이 되어 헷갈렸다. absolute 만을 생각하여 분리된놈이라고 생각했기 때문이다. 하지만 버튼의 자식이기 때문에 버튼 컨텐트의 줄바꿈 속성에 영향을 미치므로 absolute라도 상위 Container 를 생각해야한다는 점을 깨달았다.
after 요소에 width, height 지정하고 background를 지정해서 줄을 구현한다. 위치는 margin-bottom 을 마이너스로 하거나 translateY 로 하자!! 그것이 훨씬 Content 의 Spacing 을 일관성 있게 보호하는 길이라고 생각한다! 밑줄을 고려하지 않고 padding, margin 을 줄 수 있으니까!!!
이것은 space, enter 와 br 등의 화이트스페이스를 어떻게 처리할 것인지 정하는 속성이 아닐까?
Float 속성을 사용하면 해당 박스에서 normal-flow 를 빠져 새로운 flow 를 생성한다. float 객체가 계속 이어지는 한 float 로직은 계속 이어지며
float 이 아닌것이 이어지면 inline인 객체는 float-flow 속의 객체의 빈공간에 스며들고, block인 객체들은 Float flow를 무시하고 기존 normal-flow 를 이어서 진행한다.
또한 normal-flow 에 의해 box size 가 결정되므로 float 만 사용시, 박스의 height 가 0 가 되는 불상사가 발생할 수가 있는데, 이를 해결하기 위해서는 박스 안의 마지막 객체에 clear 속성을 줘서 박스를 정리하면 된다.
앞서 말했듯 normal-flow 에 의해 사이징 되기 때문에 inline 요소가 뒤에 오기만 해도 굳이 clear 하지 않아도 정리가 되는데, 이는 예상치못한 수정에 문제가 발생하여 대응하기가 어려워질 수도 있다.
따라서 무조건 float 박스가 생성됐으면 마지막 객체에서 무조건 clear 를 하여 박스를 정리하는 습관을 지녀야 하는데, 마지막 객체에 주기엔 또 유지보수가 용이하지 않고 별로 직관적이지 않으므로
::after 가상 요소에다가 clear 를 하는것이 좋다. 이 때 ::after 를 block 으로 설정해주는 것이 중요하다!!
block 은 기본적으로 Width:100% 로 전부 차지한다. 이걸 모르고 있었다니.. 외우자.