-
float프로그래밍/HTML&CSS 2022. 9. 9. 20:14728x90
float 속성은 HTML 요소를 수평으로 정렬하고자 할 때 사용하는 방법으로 다른 요소들과 자연스럽게 어울리도록 만들어준다. float를 적용받은 요소들은 right, left 방향을 결정하게 되고 속성값을 적용받으면 float를 적용 받은 요소의 다음 요소들은 끌어 올려지게 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>float - 1</title> <style> #left-apple{ float:left; margin-right: 20px; width: 250px; } p{ font-size: 18px; line-height: 1.5; } </style> </head> <body> <img id="left-apple" src="./apple.png" alt="사과"><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, in mollitia. Itaque placeat quod beatae blanditiis recusandae, labore fugiat ratione, eligendi cumque quasi eveniet doloribus dicta nesciunt corrupti velit. Deleniti! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, in mollitia. Itaque placeat quod beatae blanditiis recusandae, labore fugiat ratione, eligendi cumque quasi eveniet doloribus dicta nesciunt corrupti velit. Deleniti! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, in mollitia. Itaque placeat quod beatae blanditiis recusandae, labore fugiat ratione, eligendi cumque quasi eveniet doloribus dicta nesciunt corrupti velit. Deleniti!</p> </body> </html>
float : left 예제
float 속성을 사용해 웹 페이지 상에 요소를 왼쪽이나 오른쪽으로 배치하면 그 다음 요소도 위로 딸려 올라게 된다. 이러한 특성을 없애주기위해서는 clear: both를 사용하여 플로팅을 종료 시켜주면된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clear</title> <style> body{ margin: 20px 30px; max-width: 800px; } p{ padding:10px; text-align: justify; font-size: 15px; margin-bottom: 20px; } #p1{ width: 38%; background-color: gold; float: left; } #p2{ width: 54%; background-color: greenyellow; float: left; } #p3{ clear: both; /* float 종료시 사용하면 아래부터 다시 시작 가능*/ background-color: deepskyblue; } </style> </head> <body> <div id="p1"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quisquam quibusdam! Facere eum nostrum voluptate et alias neque earum delectus placeat. Similique magni corrupti nemo adipisci, quod repellat quis ipsum?</p> </div> <div id="p2"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quisquam quibusdam! Facere eum nostrum voluptate et alias neque earum delectus placeat. Similique magni corrupti nemo adipisci, quod repellat quis ipsum?</p> </div> <div id="p3"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quisquam quibusdam! Facere eum nostrum voluptate et alias neque earum delectus placeat. Similique magni corrupti nemo adipisci, quod repellat quis ipsum?</p> </div> </body> </html>
clear 예제 728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
z-index (0) 2022.09.11 position (0) 2022.09.10 디스플레이(display) (0) 2022.09.08 박스 사이징(box-sizing) (0) 2022.09.07 마진(margin) (0) 2022.09.06