[css3] float - 왼쪽,오른쪽 배치

티스토리 뷰

[개발]프로그래밍/css3

좋은 블로그 2021. 5. 7. 12:00

1. 개념

float - 왼쪽,오른쪽 배치

float는 해당하는 요소를 왼쪽이나 오른쪽 구석에 배치하게 됨
이 속성을 사용하게 될 때 float을 사용한 요소가 왼쪽이나 오른쪽으로 오게 되면 주변 다른 요소가 감싸게 됨

2. 태그

float

html5 코드

<! DOCTYPE html>

<head>

</head>

<style>

div

{

border : 1px solid #000 ;

width : 100px ;

height : 100px ;

}

</style>

<body>

</body>

</html>

결과 화면

코드 설명

div ..... /div

float에 대한 설명을 위해 처음 div에는 float이 없는 것을 예제로 담아보았습니다.
지금 보시면 div는 블럭의 요소이기 때문에 한줄 전체를 차지하게 됩니다.
그리고 이후에 h1과 h2 요소가 아래로 이어서 나오게 되는 것입니다.

<float : left ;

float을 left로 설정을 하게 되면 div는 왼쪽 가장 자리로 놓이게 됩니다.
이후에 다른 요소에 주변에서 감싸게 됩니다.
여기서 보면 h1과 h2 요소가 div 옆으로 오게 되는 것입니다.

공지사항

최근에 올라온 글

최근에 달린 댓글