[HTML] <div> - float 속성 / clear 속성 / div 폭 계산 / box-sizing

[HTML]
<div> - float 속성 / clear 속성 / div 폭 계산 / box-sizing

---

✔️ float 속성

: 자신을 감싸고 있는 컨테이너의 왼쪽, 오른쪽 등에 배치하도록 설정하는 스타일이다.

: html 요소가 주변 다른 요소와 자연스럽게 배치되도록 만들어준다!

 

✔️ clear 속성

: float 속성이 적용된 이후 나타나는 요소들의 동작을 조절한다.

float 속성이 계속 적용되면 레이아웃을 만드는데 상당히 방해가 되기 때문에... 이후 등장하는 요소들이 float 의 영향을 받지 않도록 clear 해주어 설정해야한다.

 

<div>
	<div class="box" style="background: navy; float: left;">A</div>
	<div class="box" style="background: orange; float: left;">B</div>
	<div class="box" style="background: purple; float: left">C</div>
</div>

<!--  위 float : left; 로 인하여 아래 D는 이상한 현상이 발생함 -->

<div class="box" style="background: red;">D</div>
<br><br>
<hr>

💡 분명... D 블록도 같이 나와야하는데, 나오지 않는다. 이렇게 float 속성이 제거되지 않으면, 이상 현상 발생.

 

<div>
	<div class="box" style="background: navy; float: left;">A</div>
	<div class="box" style="background: orange; float: left;">B</div>
	<div class="box" style="background: purple; float: left">C</div>
</div>

<div class="box" style="background: red; clear: both;">D</div>
<br><br>
<hr>

💡 clear : both 를 설정했더니 D가 A 아래로 붙은걸 볼 수 있다. 

 

 

✔️ div 폭 계산하기

: 하나의 div 폭 : width + border(좌) + border(우)

<div style="background: #eee; height: 56px; width: 468px; ">
	<!--  하나의 div 폭 : width + border(좌) + border(우) = 150+3+3 -->
	<div class="box" style="float: left; border: 3px solid black; color: black;">A</div>
	<div class="box" style="float: left; border: 3px solid orange; color: black;">B</div>
	<div class="box" style="float: left; border: 3px solid purple; color: black;">C</div>
	
	
</div>
<div style="clear: both;"></div>
<br><br>
<hr>

 

<div style="background: #eee; height: 86px; width: 558px; ">
	<!--  하나의 div 폭 : width + border(좌) + border(우) + padding(좌) + padding(우) + margin(좌) + margin(우) -->
	<div class="box" style="float: left; border: 3px solid black; color: black; padding: 10px; margin: 5px;">A</div>
	<div class="box" style="float: left; border: 3px solid orange; color: black; padding: 10px; margin: 5px;">B</div>
	<div class="box" style="float: left; border: 3px solid purple; color: black; padding: 10px; margin: 5px;">C</div>
	
	
</div>
<div style="clear: both;"></div>
<br><br>
<hr>

💡 이 코드에서 div 하나의 폭은 width + border(좌) + border(우) 뿐만 아니라
padding(좌) + padding(우) + margin(좌) + margin(우) 까지 더해야한다.

 

 

✔️ box-sizing

: 요소의 너비 및 높이를 계산하는 방법을 지정하는 속성이다!

✨ content-box : 기본. width = 콘텐츠 너비(150px) (진짜 데이터가 들어가는 영역) + 테두리 포함 등

✨ border-box : 에서 width = 콘텐츠 너비+테두리+안쪽여백 다~ 포함해서 150px 인 것!

💡 여백 계산을 쉽게 하기 위해서 border-box 를 사용하면 편하긴 하다!
💡 border 나 padding 크기에 상관없이 내가 지정한 크기가 유지되어 편하다. (내부적으로 축소됨)