이미지를 삽입할 때, 자연스럽게 안에 넣기 위한 기술인 float에 대해 알아보자.
주로
레이아웃을 잡을때 많이 사용하는 속성이다
- none
- left
- right
- inline-start
- inline-end
p태그의 style에 속성으로 clear : both를 두면 float를 차지하고 있는 영역을 피해 공간을 차지한다
<!doctype html>
<html>
<head>
<style>
img{
width:300px;
float:left;
margin:20px;
}
p{
border:1px solid gray;
}
</style>
</head>
<body>
<img src="sample.mt.jpg" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
<p style="clear:both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
</body>
</html>float속성을 나란히 left로 주면, 왼쪽에서부터 가로방향으로 순서대로 content가 배치된다.
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다