• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

overflow:hidden 속성에 대해 질문합니다

21.04.27 22:52 작성 조회수 148

1

24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)

13분을 들으면 포지션값을 줘서 부모요소인 tabs가 높이값을 못잡아웠다고 설명하셨는데요. 한 초반강의를 보면 float:left의 경우 높이값을 못잡을때 부모요소에 oveflow:hidden값을 주면 높이값이 잡아졌는데. 포지션 앱솔루트는 예외인가요?

답변 1

답변을 작성해보세요.

4

밀크티님의 프로필

밀크티

2021.04.28

그 부분은 float의 속성과 position의 속성에 대해서 이해하셔야 해용

float 속성과 position:absolute 속성모두 자식 요소들을 마치 공중에 띄운 것 처럼 위치를 조정하므로서

부모가 자식요소의 크기값을 인지하지 못하게 되니까 부모가 자식요소의 크기값 만큼

자신 스스로의 크기 값을 유지하지 못하기 때문에 높이값을 유지하지 못하는 것은

글쓴이 분이 말씀하신 것 처럼 동일 합니다.

position속성을 사용할 경우 position:relative; 속성과 position:absolute 속성을 통해

직접적인 부모관계를 설정하는 인과관계가 있는 속성입니다.  프로그래밍적으로 그렇게 관계가 설정되어있어요.

따라서, 부모요소(relative 상태)의 크기값을 지정해주어야

absolute속성이 된 자식이 기준점이 된 부모요소의 크기값에 근거하여 움직이게 되는 것이죠.

그렇기 때문에 overflow:hidden; 속성으로 높이값을 찾아줄 수 없습니다.

반면에 float속성을 사용할때 부모요소의  overflow:hidden; 을 사용하는 이유는

내가 갖고 있는 영역에서 넘친 요소만큼은 숨긴 처리를 하겠다! 는 의미가 있기 때문에

자기 자신이 갖고있는 영역을 유지하려고 하죠.. 그래서 float에는 overflow: hidden;을 사용하여

크기값을 유지 시키려 하는 것입니다.

다만 absolute 속성은 relative라는 속성이 짝꿍이기 때문에

부모요소에 relative를 쓰고, 자식요소가 뛰어놀 수 있는 만큼의 놀이방 크기를 지정해준다! 라고 생각하시면 편하실 것 같아용.

float 해제 속성에 대해 공부하시려면

float overflow:hidden;

float clear:both;

float clearfix 라고 구글에 검색해보시면 더욱 많은 자료를 찾아보실 수 있으실 거에요.

무웅 님~ 언제나 감사합니다.^^