[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)

[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)

얼마 전에 float 속성에 대해 배웠는데요

float는 오른쪽, 왼쪽으로 객체를 띄워서 정렬하는 속성이라고 했습니다.

사진에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로

돌러싼 형태가 됩니다.

사진 주위로 글자가 따라 붙지 않게 하려면 어떻게 해야 할까요?

바로 clear 속성을 사용하면 됩니다...

clear는 '취소하다'라는 뜻으로 left는 float:left값을 취소하고 right는 float:right값을 취소합니다

clear: none는 기초값으로 clear를 설정하지 않은 것과 같습니다

clear: left 왼쪽을 취소

clear: right 오른쪽을 취소

clear: both 오른쪽 왼쪽을 취소

그럼 실제 html을 작성하여 실행화면을 보겠습니다.

internal 스타일로 작성했습니다 (아래 링크 글도 같이 참조해주세요)

1. clear 속성을 적용하지 않을 때

<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>

<p>1. clear 속성을 적용하지 않을 때 </p>

</body>
</html>

실행화면입니다.

먼저 이 사진은 float:left 상태인데요.. clear를 설정하지 않으면 글자가 아래처럼 둘러싼 형태가 됩니다

2. float:left, clear:left 설정했을 때

<html>
<head>
<style type="text/css">
img
{
float:left;
}
p#left
{
clear:left;
}

</style>
</head>

<p>2. clear:left 했을 때</p>
<img src="leaf.png" width="200px" height="200px">
<p id="left">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>

</body>
</html>

사진이 float:left 상태인데 clear:left를 해 주면 글자가 아래로 내려갑니다...

3.float:right, clear:right 설정했을 때

<html>
<head>
<style type="text/css">
img
{
float:right;
}
p#right
{
clear:right;
}

</style>
</head>

<p>3. clear:right 했을 때</p>
<img src="leaf.png" width="200px" height="200px">
<p id="right">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.
</p>
</html>

사진이 float:right 상태에서 clear:right로 하면 글자가 아래로 내려갑니다

4. clear:both 설정했을 때

<html>
<head>
<style type="text/css">
div#left
{
float:left;
}

div#right
{
float:right;
}
p#both
{
clear:both;
}

</style>
</head>

<p>4. clear:both 했을 때</p>
<div id="left">
<img src="leaf.png" width="200px" height="200px"></div>

</body>
</html>

사진 두개 중 하나가 float:left, 다른 하나가 float:right 상태에서 clear:both 하면

clear 설정한 객체는 모두 줄바꿈 됩니다.

[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) (11)	2014.04.01
[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (1)	2014.03.31
[html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0)	2014.03.25
[html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) (1)	2014.03.24
DIV 태그를 이용하여 레이아웃 만들기 (1)	2014.03.19