# float

✨ 과제. div에 그림자 만들기

```css
.box {
    box-shadow: 5px 5px;
}
```

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fyo76uvXqrmr7xgkEFeYl%2FScreenshot_87.png?alt=media&#x26;token=e874d17b-d5dc-409f-9257-c48fb0be4e62" alt=""><figcaption><p>개발자 도구에서 확인하면 더 쉬울듯</p></figcaption></figure>





**html css로 사이트 레이아웃 만드는 법** :

만들고 싶은 레이아웃 디자인 위에 **네모박스를 먼저 그려보고** 바깥 네모부터 \<div> 써서 구현하면 됩니다.

어려워보이는 레이아웃도 네모박스부터 그 위에 그려보고

바깥 네모부분부터 \<div>로 하나하나 만들기 시작하면

그럼 무슨 레이아웃을 가져다주든 알아서 만들 수 있음



**요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성**&#x20;



```html
<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>
```

```css
.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}
```

\- 위의 코드는 박스 두개를 만들어 각각 왼쪽으로 정렬시킵니다.

\- 하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못합니다.&#x20;

(참고) float 속성으로 가로정렬할 땐

영상처럼 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는게 좋습니다.

그래야 모바일에서 안 흘러넘침

**float를 쓰고 나면 항상 clear 속성이 필요합니다.**

```html
<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>
```

```css
.footer {
  clear : both
}
```

clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게 됩니다.

float썼으면 까먹지 말고 항상 넣으시면 됩니다.

안넣으시면 내 의도와는 다른 레이아웃이 반겨줄 것입니다.&#x20;

참고로 float : none 이것도 추가해주는게 나중에 생길 버그예방차원에서도 좋을 수 있습니다.&#x20;



새로운 layout1.html 파일 만들고 시작!



이런 레이아웃 페이지를 만들어 볼껀데&#x20;

처음에 화면을 감싸는div를 warp 혹은 contanier 이런식으로 작명을 많이함.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div></div>
</body>
</html>
```

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FwGECN3uabBDzRPtIaNC6%2FScreenshot_86.png?alt=media&#x26;token=9013a251-bf18-4412-92c5-abd6481af062" alt=""><figcaption></figcaption></figure>







{% code title="layout1.html" %}
```html
<div class="container">
    <div class="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer"></div>
</div>
```
{% endcode %}

{% code title="main.css" %}
```css

.header {
    width: 100%;
    height: 100px;
    background: aquamarine;
}

.left{
    width: 30%;
    height: 400px;
    background: cadetblue;
    float: left;
}
.right{
    width: 70%;
    height: 400px;
    background: coral;
    float: right;

}

.footer {
    width: 100%;
    height: 100px;
    background: gray;
    clear: both;
}
```
{% endcode %}

