레이아웃스타일3
<title>09_레이아웃 스타일3</title>
</head>
<body>
<h1>요소 정렬 스타일(float/ clear)</h1>
<pre>
float(띄우다) : 요소를 띄워서 좌/우로 정렬하는 속성
clear : float로 인해서 띄워져 있는 상태를 해제하는 속성
(float 사용 시 겹침 문제가 발생하는데 이를 해결할 수 있음)
</pre>
<h3>기본형태</h3>
<div class="test">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>Hello</div>
<div>World</div>
<div>5</div>
</div>
<hr>
<h3>float : left</h3>
<div class="test">
<div class="float-left">1</div>
<div class="float-left">2</div>
<div class="float-left">3</div>
<div class="float-left">4</div>
<div>Hello</div>
<div class="clear">World</div>
<div class="float-left">5</div>
<div class="float-left">6</div>
</div>
<hr>
<h3>float : right</h3>
<div class="test">
<div class="float-right">1</div>
<div class="float-right">2</div>
<div class="float-right">3</div>
<div class="float-right">4</div>
<div class="clear">Hello</div>
<div class="clear">World</div>
<div class="float-right">5</div>
<div class="float-right">6</div>
</div>
<hr>
<hr>
<hr>
<hr>
<h2>float를 활용한 좌우 2분할</h2>
<div class="container">
<div class="div-1 bg-1"></div>
<div class="div-1 bg-3"></div>
</div>
<hr>
<h2>float를 이용한 4분할</h2>
<div class="container">
<!-- 1행 -->
<div class="row">
<div class="div-1 bg-1"></div>
<div class="div-1 bg-2"></div>
</div>
<!-- 2행 -->
<div class="row">
<div class="div-1 bg-3"></div>
<div class="div-1 bg-4"></div>
</div>
</div>
<hr>
<div class="container-3">
<div class="row">
<div class="div-1">
<div class="row bg-1">
<input type="text" class="input">
</div>
<div class="row bg-7">
<input type="password" class="input">
</div>
</div>
<div class="div-1 bg-5">
<button class="button">로그인</button>
</div>
</div>
<div class="row bg-3"></div>
</div>
<br><br><br>
<!-- 보라색 정사각형 -->
<div class="container-3">
<!-- 파란색박스 1 -->
<div class="row">
<!-- 노란색박스 1 -->
<div class="div-1">
<div class="row"></div>
<div class="row"></div>
</div>
<!-- 노란색박스 2 -->
<div class="div-1"></div>
</div>
<!-- 파란색박스 2 -->
<div class="row bg-3"></div>
</div>
개발자준비생