float 속성
float는 웹 페이지를 만들 때 가장 많이 사용하는 속성입니다. 원래는 부유하는 대상을 만들려고 개발했지만, 현대에는 레이아웃을 잡을 때 많이 사용합니다. 조금 어렵지만 정말 중요하므로 차근차근 살펴봅시다. float 속성에는 [그림 6-32]의 키워드를 입력할 수 있습니다. 다양한 키워드가 있지만 주로 [표 6-9]의 키워드만 사용합니다.
img {
float: hide, inherit, initial, intrude, left, multicol, next, none
}
표 6-9 이 책에서 다루는 float 속성 키워드
키워드 설명
left 태그를 왼쪽에 붙이기
right 태그를 오른쪽에 붙이기
기본 예제 6-16 float 기본 속성
1. HTML 페이지 만들기 다음 코드를 실행하면 이미지와 글이 분리된 결과 화면이 출력됩니다. img는 인라인 형식의 태그이고 p는 블록 형식의 태그이므로 이미지와 글자가 분리되어 나타나는 것입니다.
코드 6-44 기본 HTML 페이지 생성
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Style Property</title>
<style>
</style>
</head>
<body>
<img src="hanbit.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>In hac habitasse platea dictumst. Donec lobortis augue a metus.</p>
</body>
</html>
2. img 태그에 float 속성 적용하기 float 속성을 처음 개발했을 때는 img 태그에 적용하는 것이 기본이었습니다. img 태그에 float 속성을 적용하면 이미지와 글이 어우러진 형태로 출력됩니다.
코드 6-45 img 태그에 적용
<style>
img {
float: left;
}
</style>
이미지가 글자 위에 부유하고 있습니다. float 속성을 사용하면 이렇게 그림을 글자 위에 띄울 수 있습니다.
원래 float 속성은 부유하는 대상을 만들려고 개발했는데 현대에는 웹 페이지의 레이아웃을 만들 때 더 많이 사용합니다.
TIP : '부유'라는 표현이 정확하지는 않지만 float 속성을 떠올릴 수 있게 이 표현을 사용했습니다.
기본 예제 6-17 수평 정렬
1. float 속성을 적용할 대상 만들기
float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다. float 속성을 사용해 수평 정렬할 때 주의할 점을 살펴보려고 다음 코드처럼 div 태그에 각 태그를 구분할 수 있는 숫자를 입력합니다ㅏ.
코드 6-46 수평 정렬할 대상 생성
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Style Property</title>
<style>
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
2. float 속성이 left 키워드일 때 확인하기 float 속성에 left 키워드를 적용합니다. 첫 번째에 위치한 div태그가 왼쪽에 붙습니다. 이어서 두 번째에 위치한 div 태그가 그 옆에 붙습니다. 순서대로 왼쪽에 붙으므로 수평 정렬 됩니다.
코드 6-47 left 키워드 적용
<style>
.box {
width: 100px; height: 100px
background-color: red;
margin: 10px; padding: 10px;
/* 태그를 왼쪽으로 붙입니다. */
float: left;
}
</style>
3. float 속성이 right 키워드일 때 확인하기
float 속성을 right 키워드로 수정하고 코드를 실행합니다. 결과만 얼핏 보고 '오른쪽에 달라 붙어 수평 정렬되었구나!'로 끝나면 안 됩니다. div 태그를 구분하는 숫자를 살펴보세요. 1번 div 태그가 오른쪽에 위치했습니다. 첫 번째에 위치한 div 태그가 오른쪽에 붙고 두 번째에 위치한 div 태그가 그 옆에 붙은 것입니다 .여러 태그의 float 속성에 right 키워드를 적용할 때는 순서에 주의하세요.
코드 6-48 right 키워드 적용
<style>
.box {
width: 100px; height: 100px;
background-color: red;
margin: 10px; padding: 10px;
/* 태그를 오른쪽으로 붙입니다. */
float: right;
}
</style>
