[HTML+CSS] overflow 속성 , float속성

▶ overflow는 내부의 요소가 부모의 범위를 벗어 날 때 처리하는지 여부에 대한 속성임.

 

키워드	설명
hidden	영역을 벗어나는 부분을 보이지 않게 만듬
scroll	영역을 벗어나는 부분을 스크롤로 만듬.

 

 

▶ flot은 부유하는 대상을 만들 때 사용하는 스타일 속성임.

 

키워드	설명
left	태그를 왼쪽에 붙임
right	태그를 오른쪽에 붙임

 

1 .float 속성을 사용한 레이아웃 구성

 

▶ float속성을 사용하는데 있어서 꼭 알아될 공식이 있는데 그 공식은

 

"자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용함"

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

현재 사용 된 방법을 'One True Layout' 방식이라 칭하며 많이 사용되는 것중에 하나입니다. 

 

 

2.  clear:both를 사용한 레이아웃 

 

▶ 레이아웃을 짜는 방법은 많은 방법이 있지만 또 다른 방법중 하나인 clear:both를 활용하여 default레이아웃을 구성해보려 합니다. 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

clear:both 코드를 활용하여 위의 레이아웃과 똑같은 레이아웃을 구성 할 수 있습니다.