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

Question

안녕하세요! 질문드립니다. 부모 태그에 overflow:hidden의 효과가 첫 번째, 부모 태그의 영역을 넘어가는 부분을 숨겨주는 것과 두 번째, 자식 태그가 float:left로 인해서 공중에 떴을 때 부모 태그의 높이값이 사라졌을 때 높이값을 자동으로 찾아준다 이렇게 대표적으로 두 가지로 알고 있으면 될까요? 또 overflow:hidden은 visibility:hidden처럼 영역을 차지하되 보이는 것만 숨겨준 효과라고 보면 될까요?

코딩웍스(Coding Works) · Answer

안녕하세요. 코딩웍스입니다. 첫번째, 두번째 정확히 이해하고 계십니다. 단, 첫번째에 ' 부모 태그의 영역을 넘어가는 부분을 숨겨주는 것' 이라고 하셨는데 부모 태그가 아니라 자기 자신의 영역을 넘어가는 것을 숨겨주는 것으로 이해하시는게 더 정확합니다. overflow:hidden과 visibility:hidden의 차이는... overflow:hidden은 자기 자신의 영역 밖을 숨기는 것이고 visibility:hidden은 자기 자신을 숨기는 것 입니다. 물론, display: none 과 달리 숨겨지긴 하는데 최초의 영역은 유지한채 숨겨지는 것입니다. 결론은 overflow:hidden과 visibility:hidden은 사용 용도가 전혀 다릅니다.