JunO3O
유동 속성
유동 속성
2023. 3. 21. 03:05ㆍCSS
유동 속성
ㅁ float 속성
: float 속성을 이용하면 태그를 오른쪽이나 왼쪽에 붙일 수 있습니다.
: 일정한 위치에 고정하는 등 웹 페이지의 레이아웃을 잡을 때 자주 사용합니다.
| 키워드 | 설명 |
| left | 태그를 왼쪽에 붙임 |
| right | 태그를 오른쪽에 붙임 |
ㅁ 기본적인 페이지 모습
: float 속성을 사용하지 않은 기본적인 모습은 아래와 같습니다.
ㅁ float 속성 사용
: float 속성을 사용하면 그림을 글자 옆에 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="/Files/winter.jpg" />
float 속성을 사용하면 그림을 글자와 함께 나열할 수 있습니다.
</body>
</html>
ㅁ float 속성을 적용할 대상 만들기
: float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<div class="box">가</div>
<div class="box">나</div>
</body>
</html>
ㅁ left 키워드 적용하기
: float 속성에 left 키워드를 적용하면 해당 태그가 왼쪽에 위치합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px;
padding: 10px;
float: left; /* 태그를 왼쪽으로 붙이기 */
}
</style>
</head>
<body>
<div class="box">가나다</div>
<div class="box">ABC</div>
<div class="box">123</div>
</body>
</html>
ㅁ float 속성에 right 키워드 적용하기
: float 속성에 right 키워드를 적용하면 div 태그가 오른쪽에 정렬됩니다.
: 다만, 박스가 오른쪽에 정렬되는 것이지 글자는 기본 속성인 왼쪽 정렬이 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px;
padding: 10px;
float: right; /* 태그를 왼쪽으로 붙이기 */
}
</style>
</head>
<body>
<div class="box">가나다</div>
<div class="box">ABC</div>
<div class="box">123</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 수평 / 중앙 / one true 레이아웃 (0) | 2023.03.21 |
|---|---|
| 그림자 / 그레이디언트 속성 (0) | 2023.03.21 |
| 위치 속성 (0) | 2023.03.21 |
| 글자 속성 (0) | 2023.03.21 |
| 배경 속성 (0) | 2023.03.21 |