|
스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 |
|
환경: Eclipse Mars, CSS3 |
float 속성을 이용해서 텍스트와 이미지를 배치할 때는 문제가 발생할 일이 별로 없습니다. 하나의 컨테이너 안에 float 속성이 적용된 두 개의 다른 태그가 있다면 높이 값이 적용되지 않습니다. 그래서 다음에 오는 객체와 겹쳐집니다. 높이 값을 제대로 반영하려면 float 를 제거할 수 있는 clear 속성을 사용해야 합니다.
▼ clear 속성 문법은 다음과 같습니다. clear 속성으로 쓰이는 값 중 both 가 제일 많이 쓰입니다. both 는 float 가 사용된 left, right 모두 효과를 제거해 주기 때문입니다. 한 쪽 방향만 하고 싶다면 left, right 중 하나를 고르세요. none 은 기본값으로 clear 효과를 반영하지 않습니다.
|
<style type="text/css"> 선택자 { clear : none, left, right, both, inherit 값 중 하나 } </style> |
▼ 그럼 clear 속성을 반영하지 않았을 때 어떻게 되는지 알아 볼까요? 소스를 반영하고 제일 마지막 div 가 줄 바꿈이 되면서 바로 아래에 표시 될 거라고 예상할 겁니다. 그런데 위에 float 가 반영된 div 의 높이를 인식하지 못해서 겹쳐졌습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#con #float1 {
float:left;
width: 150px; height: 100px;
background-color: #F9F249;
padding: 10px;
}
#con #float2 {
float:left;
width: 150px; height: 50px;
background-color: #69F354;
padding: 10px;
}
#last {
width: 200px; height: 120px;
background-color: #36FFFF;
padding: 10px;
}
</style>
</head>
<body>
<div id="con">
<div id="float1">clear example 1</div>
<div id="float2">clear example 2</div>
</div>
<div id="last">clear example 3</div>
</body>
</html>
▼ 샘플에서 두 개의 div 사이에 clear 속성이 반영된 태그를 넣었습니다. 태그는 다음과 같습니다. <div id="clear1"></div> 를 넣으니까 마지막 박스는 바로 위에 있는 태그와 구분해서 정확하게 아래에 표시가 됩니다. 높이를 인식한 것입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#con #float1 {
float:left;
width: 150px; height: 100px;
background-color: #F9F249;
padding: 10px;
}
#con #float2 {
float:left;
width: 150px; height: 50px;
background-color: #69F354;
padding: 10px;
}
#last {
width: 200px; height: 120px;
background-color: #36FFFF;
padding: 10px;
}
#clear1 {clear:both;}
</style>
</head>
<body>
<div id="con">
<div id="float1">clear example 1</div>
<div id="float2">clear example 2</div>
</div>
<div id="clear1"></div>
<div id="last">clear example 3</div>
</body>
</html>
▼ HTML 태그에 <div id="clear1"></div> 제거해서 좀 더 깔끔하게 만들려면 after 속성을 이용해야 합니다. after 은 content 에 값을 넣고 태그 내부에 있는 텍스트 끝에 첨부할 수 있는 기능을 가지고 있습니다. 이런 가상 선택자 after 를 이용해서 마지막에 clear 속성을 추가하는 것입니다. 결과는 위와 동일합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#con:after {
content: "";
display: block;
clear: both;
}
#con #float1 {
float:left;
width: 150px; height: 100px;
background-color: #F9F249;
padding: 10px;
}
#con #float2 {
float:left;
width: 150px; height: 50px;
background-color: #69F354;
padding: 10px;
}
#last {
width: 200px; height: 120px;
background-color: #36FFFF;
padding: 10px;
}
</style>
</head>
<body>
<div id="con">
<div id="float1">clear example 1</div>
<div id="float2">clear example 2</div>
</div>
<div id="last">clear example 3</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
|---|---|
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
