왕왕중요한 Box Layout을 완벽하게 이해해보자~! | overflow: hidden; / float: left;

footer는 짤림

 

수업을 열심히 듣고 레이아웃을 만들었다.

그런데 저 MENU부분이 왼쪽에 치우친 것이다ㅜㅜㅠㅠㅠ

해당부분의 CSS를 계속 살펴 봤는데도 문제가 없어서

이유가 뭐지ㅠㅠㅠ 하고 강사님께 여쭤봤는데 

 

 

 

ㅋㅋㅋㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋ

ㅋㅋ

ㅋ

ㅋ

 

 

ㅋ

 

 

 

메뉴가 5번까지 있던거랬다~

애꿎은 css만 들여다보고 있으니 당연히 모를 수 밖에~

 

와... 십년묶은 체증이 가시는 기분,,,,

오늘의 교훈: 프로그램은 거짓말을 치지않는다,, 전부 살펴보자~

 

 

 

overflow: hidden;

#section{
  font-family: 'Pinyon Script', cursive;
}
#content{
  width: 95%;
  margin: 5px auto;
  border: 1px solid black;
  overflow: hidden; 
  /* 내 자신의 height값이 없으면 자식 높이로 자동 맞춰진다. 
  단, 자식이 행에서 열(float: left;)로 바뀌면 선이 깨진다. */
}
#content > #section,
#content > #aside{
  height: 1000px;
  border: 1px solid black;
  float: left;
  margin: 5px auto;
  font-weight: bold;
  font-size: 1.3em;
  font-family: 'Script', cursive;

 

overflow: hidden;은 언제 사용할까?

li 요소들을 가로로 배치하기위해 우리는 보통  float: left;를 사용한다.

이때 주의해야할 점이 있는데 부모자식관계에서 부모에게 height값이 없을 때 자식이  float: left;를 적용할 경우 선이 깨지게 된다.

 

그래서 이 경우 해결방법이 바로 overflow: hidden;이다.

부모요소에 overflow: hidden;을 적용하면 선이 깨지지않게 된다.