기초공사 (html,css,javascript)
float-p태그와div 본문
//
div들 있을떄 보니 사각형은 겹치지만 그 안에 있는 글씨는 블럭요소의 특징으로. 밀려난다.
//
** 플롯이 적용된 요소를 뒤따라오는 요소들이 달려든다.
역시 이부분도 block1를 float:left로 하면 p태그는 block1를 무시하고 달려든다.
보면 위의 주황색부분 p태그의 영역이다. 겹쳐있다.
하지만 p태그안에 글씨는 밀려난다.
float:left를 적용하면 다음 애가 안잡힌다. 잘 나오게 하라면.
부모인 div class="img-p-container clearfix 에 준다.
.clearfix::after {
content: "";
clear: both; /* 부동 요소의 영향을 제거 */
display:block;/* 블록 요소로 표시하여 공간 확보 */
}<div class="img-p-container clearfix">
<div class="img-p-box">
<div class="block1"></div>
<!-- <img src="http://placehold.it/100X100" alt=""> -->
<p>adipisicing elit. Libero nemo rem eveniet
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero nemo rem eveniet
debitis ab, corrupti fuga nesciunt
pariatur recusandae tempore veniam error,
numquam quisquam. Quaerat commodi rerum nihil soluta aspernatur!
</p>
</div>
<div class="img-p-box">
<img src="http://placehold.it/100X100" alt="">
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero nemo rem eveniet
debitis ab, corrupti fuga nesciunt
pariatur recusandae tempore veniam error,
numquam quisquam. Quaerat commodi rerum nihil soluta aspernatur!
</p>
</div>
</div>
//전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background: lightgrey;
/* clearfix를 적용하기 위해 클래스 추가 */
}
.block1 {
background: Grey;
float: left; /* 부동 요소 */
width: 100px;
height: 100px;
}
.block2 {
background: gold;
/* 위의 형제가 float를 했을떄 안으로 들어가는지 보기위해해. */
width: 150px;
height: 100px;
}
.img-p-box{
display:inline-block;
float:left;
border:1px solid salmon;
}
img{
float:left;
display:block;
}
p{
background:beige;
}
.block3 {
background: green;
/* 블록 요소 */
width: 100px;
height: 100px;
}
/* Clearfix CSS */
.clearfix::after {
content: "";
clear: both; /* 부동 요소의 영향을 제거 */
display:block;/* 블록 요소로 표시하여 공간 확보 */
}
</style>
</head>
<body>
<div class="container">
<div class="block1">
블록 1
</div>
<div class="block2">
블록 2
</div>
<div class="img-p-container clearfix">
<div class="img-p-box">
<div class="block1"></div>
<!-- <img src="http://placehold.it/100X100" alt=""> -->
<p>adipisicing elit. Libero nemo rem eveniet
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero nemo rem eveniet
debitis ab, corrupti fuga nesciunt
pariatur recusandae tempore veniam error,
numquam quisquam. Quaerat commodi rerum nihil soluta aspernatur!
</p>
</div>
<div class="img-p-box">
<img src="http://placehold.it/100X100" alt="">
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero nemo rem eveniet
debitis ab, corrupti fuga nesciunt
pariatur recusandae tempore veniam error,
numquam quisquam. Quaerat commodi rerum nihil soluta aspernatur!
</p>
</div>
<div class="img-p-box">
<img src="http://placehold.it/100X100" alt="">
<p>Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Libero nemo rem eveniet
debitis ab, corrupti fuga nesciunt
pariatur recusandae tempore veniam error,
numquam quisquam. Quaerat commodi rerum nihil soluta aspernatur!
</p>
</div>
</div>
<div class="block3">
블록 3
</div>
</div>
</body>
</html>
// 전체이미지
