본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ
IT기술/html

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

by 미노드 2017. 3. 23.

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

 

 

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

 

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

 

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

 

돌러싼 형태가 됩니다.

 

 [css 기초] float 속성에 대하여

 

 

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

 

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

 

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

 

 

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

 

clear: left 왼쪽을 취소

 

clear: right 오른쪽을 취소

 

clear: both 오른쪽 왼쪽을 취소

 

 

 

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

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

 

[HTML, CSS 기초] class, id 선택자

 

HTML과 CSS의 차이, CSS 작성법)

 

 

 

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

 

 

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

 

<body>
<h1>
애국가
</h1>

 

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

<img src="leaf.png" width="200px" height="200px">
<p>
동해물과 백두산이 마르고 닳도록  하느님이 보우하사 우리나라 만세. 
</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>

 

<body>
<h1>
애국가
</h1>


<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>

 

<body>
<h1>
애국가
</h1>


<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>

 

<body>
<h1>
애국가
</h1>


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

<div id="right">
<img src="leaf.png" width="200px" height="200px"></div>

<p id="both">
동해물과 백두산이 마르고 닳도록  하느님이 보우하사 우리나라 만세. 
남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세.
가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편 단심일세.
이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세.
후렴 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세
</p>

</body>
</html>

 

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

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

 



저작자표시 비영리 변경금지

'IT기술 > html' 카테고리의 다른 글

z-index 속성으로 배치 순서 결정하기  (0) 2017.03.23
overflow 속성 (overflow: visible, hidden, scroll, auto 차이)  (0) 2017.03.23
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)  (0) 2017.03.23
float 속성에 대하여  (0) 2017.03.23
span, div 2  (0) 2017.03.23

관련글

티스토리툴바