○ float
- 세로배치(기본)된 요소를 가로배치로 변경
- 왼쪽이나 오른쪽으로 배치가능
- 형식 : float : left | right ;
<head>
<style>
div {border: 2px solid darkblue; width: 100px; height: 100px; float: left;}
.box4 {float: right;}
</style>
</head>
<body>
<div>BOX 1</div>
<div>BOX 2</div>
<div>BOX 3</div>
<div class="box4">BOX 4</div>
</body>
○ clear
- float 속성 해제
- folat 속성을 해제하지 않으면 모든 요소들이 앞의 요소의 옆에 줄줄이 따라오므로 clear를 이용해 해제해 준다
- clear : left | right | both ;
○ z-index
- 레이어 순서 정하기
- 가장 큰 수가 위로, 레이어 순서값은 음수도 허용
<head>
<style>
#aa {background: brown; width: 100px; height: 100px;
position: absolute; left: 0; top: 0; z-index: 3;}
#bb {background: burlywood; width: 80px; height: 200px;
position: absolute; left: 0; top: 0; z-index: 0;}
#cc {background: cadetblue; width: 60px; height: 300px;
position: absolute; left: 0; top: 0; z-index: -1;}
</style>
</head>
<body>
<div id="aa">aa</div>
<div id="bb">bb</div>
<div id="cc">cc</div>
</body>
○ 전체 레이아웃 구성하기
- position(배치방법), float(수평정렬), clear(float해제), z-index(레이어순서)를 사용해 화면 레이아웃을 구성
<head>
<style>
.container{
border: 2px solid burlywood;
width: 900px;
margin: auto;
}
header{
border: 2px solid darkturquoise;
height: 150px;
width: 100%;
line-height: 150px;
text-align: center;
}
.inner section {
border: 2px solid salmon;
width: 300px;
height: 300px;
float: left;
padding: 20px;
box-sizing: border-box;
}
footer{
border: 5px solid darkmagenta;
height: 100px;
width: 100%;
clear: both;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="inner">
<section>Section1</section>
<section>Section2</section>
<section>Section3</section>
</div>
<footer>Foooter</footer>
</div>
</body>
'Frontend > CSS' 카테고리의 다른 글
| 08. CSS Transform (0) | 2022.04.06 |
|---|---|
| 07. CSS display 속성 (0) | 2022.04.01 |
| 05. CSS Positioning (position 속성) (0) | 2022.03.30 |
| 04. CSS Reset (0) | 2022.03.29 |
| 03. 다양한 선택자(Selector) (0) | 2022.03.28 |
댓글