가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 04

Question

안녕하세요! 질문드립니다.

부모 태그에 overflow:hidden의 효과가

첫 번째, 부모 태그의 영역을 넘어가는 부분을 숨겨주는 것과

두 번째, 자식 태그가 float:left로 인해서 공중에 떴을 때 부모 태그의 높이값이 사라졌을 때 높이값을 자동으로 찾아준다

이렇게 대표적으로 두 가지로 알고 있으면 될까요?

또 overflow:hidden은 visibility:hidden처럼 영역을 차지하되 보이는 것만 숨겨준 효과라고 보면 될까요?

Answer

안녕하세요. 코딩웍스입니다.

첫번째, 두번째 정확히 이해하고 계십니다. 단, 첫번째에 '부모 태그의 영역을 넘어가는 부분을 숨겨주는 것' 이라고 하셨는데 부모 태그가 아니라 자기 자신의 영역을 넘어가는 것을 숨겨주는 것으로 이해하시는게 더 정확합니다.

overflow:hidden과 visibility:hidden의 차이는...

overflow:hidden은 자기 자신의 영역 밖을 숨기는 것이고
visibility:hidden은 자기 자신을 숨기는 것 입니다. 물론, display: none 과 달리 숨겨지긴 하는데 최초의 영역은 유지한채 숨겨지는 것입니다.

결론은 overflow:hidden과 visibility:hidden은 사용 용도가 전혀 다릅니다.