웹디자인 기능사 시험예제/2) 구조 만들기

레이아웃 (6) Float 속성의 사용

frogOlis 2019. 7. 29. 04:49

FLOAT 속성의 설명 : 띄우기

 

1. 이미지의 형태에 맞는 텍스트 요소 붙이기

 

 

See the Pen float 속성의 사용(1) by ++EXP (@pp_exp) on CodePen.

 

 

2. block 요소의 좌우 배열에 사용한다. 

 

See the Pen block 요소의 좌우 배열에 사용하기 by ++EXP (@pp_exp) on CodePen.

 

 

3. float와 clear 속성의 사용. 레이아웃 배치시 사용되는 방법들.

 

 

See the Pen float 속성 : 분할배열하기(1) by ++EXP (@pp_exp) on CodePen.

 

 - float:속성에 사용할 수 있는 값들 - left / right

 - flaoat:속성 뒤에 맞는 clear 속성 만들기 :left :right :both

 

 

See the Pen float 분할배열 만들기 by ++EXP (@pp_exp) on CodePen.

 

 - 부모 요소에 float속성 사용

 - 부모 요소에 overflow:hidden 속성의 사용