float은 선택된 요소를 왼쪽에서부터 또는 오른쪽에서부터 정렬시키고자 할 때 사용되는 CSS 속성입니다. 속성값으로는 보통 left, right이 사용됩니다.
<div>와 <article>의 float 속성값을 입력해보며 float에 대해 알아봅시다!
float 속성 확인
- float을 사용하여 .left를 왼쪽 끝에, .right를 오른쪽 끝에 배치합니다.
- 실행버튼을 누르고 전체화면으로 확장하여 결과를 확인해봅시다.
웹사이트 레이아웃 구조 만들기
- .left와 .right과 관련된 모든 코드들을 주석 처리하고, 주석 처리 되어 있던 코드들은 주석을 해제합니다.
- #left를 맨 왼쪽에 정렬하기 위해 float: left;를 입력합니다.
- main을 #left 바로 옆에 순차적으로 왼쪽 정렬하기 위해 float: left;를 입력합니다.
- #right을 맨 오른쪽에 정렬하기 위해 float: right;를 입력합니다.
- 다시 실행버튼을 눌러 결과를 확인해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>레이아웃에 영향을 미치는 속성 - float</title>
<style>
/*
.left {
width: 300px;
height: 300px;
background-color: yellow;
float:left;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
float:right;
}
*/
header {
width: 100%;
height: 100px;
background-color: yellow;
}
#left {
width: 200px;
height: 200px;
background-color: red;
float:left;
}
main {
width: 300px;
height: 200px;
background-color: green;
float:left
}
#right {
width: 200px;
height: 200px;
background-color: pink;
float:right
}
footer {
width: 100%;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<!--
<div class="left"></div>
<div class="right"></div>
-->
<!-- 전통적인 웹사이트 레이아웃 구조 만들기 -->
<header></header>
<article id="left"></article>
<main></main>
<article id="right"></article>
<footer></footer>
</body>
</html>
결과 화면
'온라인 강의 > HTML' 카테고리의 다른 글
| Block 요소와 Inline 요소 (0) | 2023.04.13 |
|---|---|
| 공간을 만들때 사용하는 태그 (0) | 2023.04.13 |
| 텍스트 입력하기 (0) | 2023.04.13 |
| 링크와 이미지 입력하기 (0) | 2023.04.13 |
| HTML 문서를 구성하는 태그 (0) | 2023.04.13 |