[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) (2)
|
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 |
댓글을 달아 주세요
이해가 팍팍 되네요 감사요.
이해하기 쉽다니 기분 좋네요. 감사합니다^^