box1 - 박스가 서로 다른 컨텐츠 때문에 어긋났음box2-서로다른 콘텐츠에도 어긋나지않고 한줄로 반반씩 나눠서 위치, box3-::after가 없으면 핑크배경이 보이지 않지만 after::써주면 핑크배경이보임
<!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 예제</title>
<style>
/*
- div태그의 가로 기본값은 부모 요소 가로의 100%
- float 속성은 왼쪽과 오른쪽으로 요소들을 나눌 때 사용
- left : 왼쪽에서 차례대로 붙임
- right : 오른쪽으로 차례대로 붙임
- float 속성을 적용하면 다 block태그로 처리
*/
.box1 .left-box{width: 50%; height: 400px; background-color: coral; display: inline-block;}
.box1 .right-box{width: 50%; height: 400px; background-color: cornflowerblue; display: inline-block;}
.box2 .left-box{width: 50%; height: 400px; background-color: darkred; float: left;}
.box2 .right-box{width: 50%; height: 400px; background-color: darkolivegreen; float: right;}
/* float속성이 적용된 요소의 부모요소에 ::after를 이용하여 부모 높이를 자식 높이만큼 잡아준다 */
.box2::after{content: ''; display: block; clear:both;}
.box3{height: 50px; background-color: deeppink;}
</style>
</head>
<body>
<!--
- box 요소 안에 있는 두 요소를 이등분 하기 위해 inline-block을 이용하면
잘되는 것 처럼 보이지만, 요소 안에 있는 컨텐츠에 따라 어긋날 수도 있다
-->
<!--
- left, right를 한 줄로 써야 하는게 포인트, 둘을 나눠서 2줄로 쓰게되면 html에선 enter를 공백으로 인식하니까
50:50으로 나눈 곳에서 공백값을 더해서 한 줄이 밀리게 됨
- 한쪽 박스에 글자를 넣고, 한쪽에는 넣지 않을 경우 반반으로 나뉘는게 아니라 박스가 위/아래로 어긋나게 됨;
-->
<div class="box1">
<div class="left-box">1</div><div class="right-box"></div>
</div>
<div class="box2">
<div class="left-box">1</div><div class="right-box"></div>
</div>
<div class="box3">수요이이일점심시간</div>
</body>
</html>
