HTML-11일차 overflow,float

 

overflow

내용이 태그의 크기에서 벗어 났을때 보여지지 않게 하거나 스크롤을 생성하여 볼 수 있게 하는 속성

 

1. overflow:hidden

태그의 가로값 세로값범위 밖으로 나가있는 이미지,글자 기타내용이 보이지 않게 하는 속성

2. overflow:scroll

태그의 가로값 세로값 범위 밖에 내용을 스크롤을 만들어서 볼 수 있게 하는 속성

3. overflow-x(y):hidden

overflow:scroll 로 만들어진 스크롤중 선택하여 없애줄 수 있다. x축(y축)

4.overflow:auto

overflow:scroll과 동일하게 스크롤이 생성되지만 불필요한 스크롤은 생성되지 않는다. 보편적으로 사용.

 

float

display:block 속성 태그를 가로 배치 시킬때 사용하는 속성

float:left / float:right (왼쪽 부터 정렬 / 오르쪽 부터 정렬)

 

 

float 을 사용하면 무조건 다른 태그와 겹치는 현상이 발생한다. 이는 float속성의 고유 성질로 float속성이 사용된 태그 바로 아래 태그를 끌어 당기고 사용된 태그가 위쪽으로 정렬 되려는 성질때문이다.

이를 방지하기위해 감싸는 태그에 다음과 같은 클래스를 적용시켜준다.

.clearfix:after{content:"";display:block;clear:both} * display:block 속성의 태그를 가로정렬 할 때 반드시 사용하는 클래스*

해당 클래스사용 태그 이후의 태그에 display:block 속성을 해제하겠다는 속성