2014. 10. 25. 00:31
float:left;(float:right;)는
블록 레벨 요소(세로 방향으로 위치하는 요소)를 나란히(가로 방향) 배치하게 만드는 프로퍼티 이다.
신문 지면에서 사진 옆에 텍스트가 표시되도록 하는 것과 같다. 이것을 웹페이지에서 구현하게 만든다.
이론적 설명으로는 CSS float 프로퍼티는 잘 이해가지 않는다.
기준이 되는 예를 암기하는 것이 개념을 빨리 잡게 만든다.
1. 기준으로 삼을 예제
(1) 부모 요소 안에 4개의 블록 레벨 요소가 자식 요소로 있다.
(2) float:left;(float:right;)는 width 값과 함께 사용 한다.
ㆍ두번째 자식 요소에 float:left;(float:right;)와 width 값을 적용하여 그 결과를 확인해 보자.
(명시적으로 보이게 하기 위하여 border값을 주었다)
ㆍ아래 그림에서 result를 클릭하여 확인해 보면
두번째 자식요소가 왼쪽에 위치하고 뒤 따르는 세번째, 네번째 요소가 오른쪽에 위치하는 것을 볼 수 있다.
2. 웹사이트의 레이아웃을 만드는데 float:left;(float:right;)를 사용 한다.
(1). 부모 요소의 가로폭을 정한다.
(2) 3개의 자식 요소에 float:left;(float:right;)와 width 값을 적용하여 나란히(가로 방향)으로 배치해 보자.
Comments, Trackbacks