Float 속성을 이용하여 레이아웃을 제작할 때 Clear를 사용하게 된다.
일반적으로 clear는 float 속성을 가진 하위 레이아웃에 사용되는데 이렇게 사용될 경우 float속성을 가진 레이어에서 margin값이 적용이 안된다던지 하는 문제가 발생한다.
이때 after 선택자를 이용하여 clear를 적용하는 경우 위와 같은 문제를 해결할 수 있다.
** 선택자에 대한 설명 **
before : 해당 레이어 컨텐츠의 앞에 적용토록 한다.
after : 해당 레이어 컨텐츠의 뒤에 적용토록 한다.
<!doctype html>
<html lang="utf-8">
<head>
<title>제목</title>
<style type="text/css">
/* Clearfix 속성 */
.clearfix:before,.clearfix:after {content: '\0020'; display: block; width: 0; height: 0; overflow: hidden; visibility: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
/* Layout */
.span6 {position: relative; display: inline-block; width: 50%; margin: 0; padding: 20px 0; float: left; font-size: 20px; text-align: center; }
.backBlue {color: #000; background: #19cff0;}
.backOrange {color: #fff; background: #f7851f;}
.underContent {width: 100%; padding: 20px 0; font-size: 20px; color: #fff; text-align: center; background: #000;}
</style>
</head>
<body>
<div class="clearfix" style="margin: 0 0 15px;">
<div class="span6 backBlue">float 1</div>
<div class="span6 backOrange">float 2</div>
</div>
<div class="underContent">float속성이 해제된 이후 내용입니다.</div>
</body>
</html>
위의 예제에서 보시다시피 clearfix가 적용된 class에서 하단의 마진값이 잘 적용됨을 알 수 있다.
이렇게 기본 css(stylesheet)에 before와 after 선택자를 이용한 clear속성값을 넣어주면 float속성을 좀 더 편리하게 이용할 수 있다.
'Web + 디자인 > Publishing + 코딩' 카테고리의 다른 글
| Highlight Code JavaScript TEST (0) | 2016.04.29 |
|---|---|
| Javascript를 이용한 주소(URL)변경. (0) | 2016.04.27 |
| Tistory '#2' 스킨 수정 및 기능추가 (0) | 2016.04.27 |
| jQuery length와 slideToggle 예제 (0) | 2016.03.25 |
| jQuery toggleClass() Methods (0) | 2015.05.11 |
