2015. 6. 9. 18:32
CSS float 속성 기본
float: left가 적용된 html 요소는 화면에서 맨 왼쪽에 위치 한다.
html 순서적으로, float: left가 적용된 요소의 다음 요소는 float: left가 적용된 요소의 오른쪽에 놓인다.
float: right가 적용된 html 요소는 화면에서 맨 오른쪽에 위치 한다.
html 순서적으로, float: right가 적용된 요소의 다음 요소는 float: right가 적용된 요소의 왼쪽에 놓인다.
CSS float 속성 응용
float 속성을 이용하여 레이아웃을 만들어 보자.
header영역을 상단에, 바로 밑에 contents영역과 sidebar영역을 나란히 두고, 맨 밑에 footer영역을 놓는 레이아웃을 예제로 만들어 본다.
1. 아래와 같이 HTML을 코딩 한다.
2. 아래와 같이 CSS를 코딩 한다.
(1) header 영역 : 너비를 400px, 높이를 30px , 백그라운드 하늘색
(2) contents 영역 : 너비를 300px, 높이를 100px, float를 left로, 백그라운드 녹색
(3) sidebar 영영 : 너비를 100px, 높이를 100px, float를 left로, 백그라운드 오렌지색
(4) footer 영역 : 너비를 400px, 높이를 30px, float를 left로, 백그라운드 핑크색
Comments, Trackbacks