float

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.footer {
  clear : both
}

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

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

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

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

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

이런 레이아웃 페이지를 만들어 볼껀데

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

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

layout1.html

<div class="container">
    <div class="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer"></div>
</div>

main.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;
}

Previousdiv 디자인에 많이 사용하는 CSS 속성 Nextinline-block

Last updated 1 year ago