|
스타일 시트 강좌 - CSS float 속성 |
|
환경: Eclipse Mars, CSS5 |
float 의 값으로 left 나 right 를 설정하면 float 가 적용된 태그를 상위 태그가 감싸게 됩니다. 워드나 한글에서 이미지와 텍스트를 구분해서 배열하는 것처럼 CSS 에서도 가능합니다. 흔히 사이트에서 왼쪽이나 오른쪽에 광고 그림을 배치하고 글이 옆에서 아래로 자동 정렬이 되게 만든 것이 float 속성을 적용한 것입니다.
▼ float 의 속성에는 4가지 값을 가지고 있습니다. inherit, left, right, none 이며 left 는 왼쪽에 태그 요소를 두고 right 는 오른쪽에 둡니다.
¤ inherit : 기본값이며 상위 태그의 상태를 상속받습니다.
¤ left : 태그 요소 박스를 왼쪽에 만들고 오른쪽에 내용이 위에서 아래로 흐르도록 만듭니다. clear 속성이 있으면 달라 집니다.
¤ right : 태그 요소 박스를 오른쪽에 만들고 왼쪽에 내용이 위에서 아래로 흐르도록 만듭니다.
¤ none : float 속성이 적용되지 않습니다.
▼ 아래 샘플은 많이 쓰이는 구조입니다. 광고나 이미지를 왼쪽이나 오른쪽에 두고 설명글을 바로 옆에 배치해서 효과를 극대화 시킵니다. 이렇게 float 는 텍스트와 이미지를 배치하기 위해 만들어 졌지만 레이아웃을 배치할 때도 많이 사용합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
width: 550px; height: 350px;
border: 1px solid; padding: 10px;
background-color: #F9F249;
}
#float1 { float: right; padding: 10px;}
</style>
</head>
<body>
<div>
<img src="float.png" id="float1">
<p>South Korea faces a tough decision over its
economic sanctions against North Korea, as the
public here remains torn over the issue that could
affect voter sentiment ahead of the parliamentary
elections next April.</p>
<p>Seoul maintains that the so-called May 24
sanctions, which were imposed after Pyongyang’s
torpedo attack on the corvette Cheonan in March 2010,
can only be terminated with the regime’s apology for it,
steps to prevent a recurrence and the punishment of the
attackers.</p>
<p>But calls have been rising for Seoul to take a
more flexible approach to the issue to pave the
way for bilateral reconciliation and cooperation,
which would, in turn, ease military tensions
on the peninsula.</p>
</div>
</body>
</html>
▼ 두 번째로 레이아웃을 배치할 때 주로 사용합니다. 보통 div 태그는 연속해서 사용하면 줄바꿈이 되지만 float 속성은 옆 줄에 바로 배치할 수 있습니다. 만약 브라우저를 벗어나면 아래로 배치가 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
width: 200px; height: 100px;
padding: 10px;
}
#float1 {float:left; background-color: #F9F249;}
#float2 {float:left;background-color: #69F354;}
#float3 {float:left;background-color: #36FFFF;}
</style>
</head>
<body>
<div id="float1">float: absolute 1</div>
<div id="float2">float: absolute 2</div>
<div id="float3">float: absolute 3</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
|---|---|
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 (0) | 2018.03.03 |
녹두장군1님의
글이 좋았다면 응원을 보내주세요!
