[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 설정한 객체는 모두 줄바꿈 됩니다.

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)
[html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)
DIV 태그를 이용하여 레이아웃 만들기
'css' 카테고리의 다른 글
[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] clear 속성에 대해 배워 보자 (clear:none, right, left, both) (4)
|
2014.03.26 |
[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 |
이해가 팍팍 되네요 감사요.
답글
이해하기 쉽다니 기분 좋네요. 감사합니다^^
좋은 설명 감사합니다.
답글
설명 정말 감사합니다!!
답글