태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

[CSS] before와 after 선택자를 이용하여 Float 속성 해제

8년 전

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>

이렇게 기본 css(stylesheet)에 before와 after 선택자를 이용한 clear속성값을 넣어주면 float속성을 좀 더 편리하게 이용할 수 있다.

추천 목록

번호	제목
2,765	자바스크립트 연습 예제 - 랜덤하게 움직이는 텍스트 만들기
2,764	jQuery Mobile에서 유용한 코드 10가지
2,763	자바스크립트로 복사하기 기능 구현하기
2,762	[JqueryMobile] - Jquery Mobile 화면 강제 회전
2,761	jQuery – 스마트폰 스크린 회전 감지 스크립트
2,760	javascript audio파일 재생
2,759	javascript 변수 scope shadowing 클로저
2,758	javascript 반복문
2,757	javascript 조건문
2,756	javascript 배열
2,755	javascript 연산자와 함수
2,754	javascript 자료형
2,753	javascript 변수
2,752	[jQuery] animate()에서 stop()의 중요성
2,751	javascript audio파일 재생
2,750	[jQuery.$ajax]mysql + php 서버에서 json 데이터 얻어오기
2,749	Daum에서 사용하고 있는 마우스 오른쪽 사용 금지 스크립트
2,748	MP3 링크시 스트리밍 되지 않고 다운로드 되도록 만들기
2,747	jQuery 비동기 Ajax 통신을 해보자!! - JSON방식
2,746	[jQuery] load 를 이용한 실시간 페이지 가져오기
2,745	[jQuery]비동기적으로 JSON파일 로드
2,744	[jQuery]동적으로 원격 페이지 로드
2,743	[jQuery]워터마크 텍스트박스 컨트롤 구현
2,742	[jQuery]트리뷰 컨트롤
2,741	[jQuery]애니메이션 효과 멈추기 - stop()
2,740	[jQuery]여러가지 효과 동시 처리 - animate()
2,739	[jQuery]슬라이드 업
2,738	[jQuery]슬라이드 업/다운 - slideToggle()
2,737	[jQuery] scroll down 과 scroll up 할때 이벤트 적용시키기
2,736	[jQuery]addClass() : 스타일 추가 [removeClass()]