float 속성 정리
1. float 속성
- 요소를 정렬하기 위한 속성
2. float의 속성값
| 용어 | 설명 |
| none | 띄우지 않음 (기본값) |
| left | 왼쪽에 띄움 |
| right | 오른쪽에 띄움 |
| initial | 기본값으로 설정 |
| inherit | 부모 요소로부터 상속 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
.red {
width: 100px;
height: 100px;
background-color: red;
float: left; /* 박스를 왼쪽에 정렬함 */
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
float : right; /* 박스를 오른쪽에 정렬함 */
}
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| flex 관련 속성 정리 2 (0) | 2022.10.30 |
|---|---|
| flex 관련 속성 정리 1 (0) | 2022.10.27 |
| 트랜지션 (Transition) 속성 정리 (0) | 2022.10.20 |
| 가상 요소 (0) | 2022.10.12 |
| 테이블 관련 태그 정리 (0) | 2022.10.12 |