Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

float 과 clear 의 개념 본문

css

float 과 clear 의 개념

제뉴어리맨 2022. 6. 5. 18:03

clear의 개념과 clear가 왜 필요한지에 대해 알아보자

 

그러기 위해선 float의 개념을 알고 있어야한다.

모른다면 아래를 참고하자.

https://januaryman.tistory.com/323

 

float의 기본 개념

float 속성이란 웹브라우저상의 기본 흐름에서 벗어나 요소를 왼쪽 혹은 오른쪽으로 띄워 주는 속성이다. 사용 예시를 살펴보자. 코드 <!DOCTYPE html> CSS float 속성 Ex et adipisicing voluptate aliqua cupida..

januaryman.tistory.com

 

내가 만약 아래와 같은 레이아웃을 구현을 하고싶다면 어떻게 해야할까

 

제목과 이미지 그리고 해당 이미지에 대한 설명이 한쌍으로 된 레이아웃이다.

위에 float 개념에 대한 글을 읽은 사람이라면 너무나 쉬울것이다.

순서는 다음과 같다.

 

1. 제목은 그냥 <h1>과 같은 태그로 출력함.

2. 이미지에 float : left 속성을 적용하여 띄운다.

3. 이미지에 대한 내용을 입력한다.

 

코드로와 결과 화면은 아래와 같을 것이다.

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		.section {
			padding:5px;
		}
		#box{
			background:#ffd800;
			float: left;
			height: 200px;
			width: 400px;
			margin-right: 10px;
		}
		p{
			font-size: 40px;
		}
	
	</style>
</head>
<body>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
</body>
</html>

 

  • 결과화면

그런데 위와 같은 레이아웃 형태를 아래로 쭉 여러개 출력하고 싶다.

그럼 단순히 "section 클래스가 적용된 div를 여러개 쭉 추가하면 되겠네" 라고 생각할것이다.

그럼 그렇게 해보도록 하자.

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		.section {
			padding:5px;
		}
		#box{
			background:#ffd800;
			float: left;
			height: 200px;
			width: 400px;
			margin-right: 10px;
		}
		p{
			font-size: 40px;
		}
	
	</style>
</head>
<body>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
</body>
</html>

 

  • 결과화면

그렇다. 우리가 생각하던 그런 모습이 아니다.

두번째 세번째 div의 제목 부분이 상위 div의 이미지 설명 부분에 들어가 있다.

왜냐하면 "이미지 설명" 을 출력하고 "이미지 설명" 태그의 padding, margin등을 계산한 뒤 다음 요소가 출력될 위치가 해당 위치이기 때문이다. 

만약 이미지부분이 float : left로 적용이 되어 있지 않았다면 <h1> 태그는 블록 레벨이기 때문에 깔끔하게 이미지 출력 다음 줄부터 "제목" 부분이 출력 됬을것이다.

하지만... 이미지 부분에 float : left 스타일을 적용하지 않으면 이미지 설명 부분이 이미지 우측으로 출력 되지 않을 것이다..

그렇다면 어떻게 해야하는것일까? 

우리가 원하는것은 .section 클래스를 적용한 div 영역이 끝날때마다 새로운 라인에서 시작하고 싶다.

이럴때 필요한것이 clear 속성이다.

이미지 부분에 적용된 float : left 속성을 .section 클래스를 적용한 div가 시작할때마다 clear 해주는것이다.

   .section {
            padding:5px;
        }

부분에 clear: left; 만 추가해주면 된다.

코드와 결과 화면은 아래와 같다.

 

  • 코드
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		.section {
			padding:5px;
			clear: left; /* 추가된 부분 */
		}
		#box{
			background:#ffd800;
			float: left;
			height: 200px;
			width: 400px;
			margin-right: 10px;
		}
		p{
			font-size: 40px;
		}
	
	</style>
</head>
<body>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
	<div class="section">
		<h1>제목</h1>
		<div id="box">이미지</div>
		<p>이미지 설명</p>
	</div>
</body>
</html>

 

  • 결과 화면

정확하게 우리가 원하는 결과가 보여진다.

float 이란 속성은 특정 요소에게 한번 적용을 하면 그 요소는 계속 float된 상태이다. (계속 띄워져 있는 상태인것이다.)

그래서 모든 요소들이 이미지 영역은 block레벨임에도 해당 요소를 둘러싸게 된다.

그래서 "제목" 부분이 이미지 옆에 출력이 된것이다.

그러나 clear: left; 가 적용된 요소의 출력 이후부터는 (clear가 적용된 해당 요소도 포함) float이 적용된 요소들을 띄우지 않고 원래 출력 흐름상으로 내려놓는다. 그래서 새로운 .section div를 출력하려는데 "이미지"부분 또한 띄워지지 않은 일반적인 흐름에 있는 block 레벨 요소이므로 다음줄부터 새로운 .section div를 출력하게 되고 위와같이 우리가 원하는 결과가 만들어지는 것이다. 

 

 

'css' 카테고리의 다른 글

[CSS] CSS Position (relative, absolute) 한 방에 정리!  (0) 2022.06.06
이미지 위에 텍스트 출력, 텍스트 위에 이미지 출력  (0) 2022.06.06
float의 기본 개념  (0) 2022.06.05
[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)  (0) 2022.06.05
div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기  (0) 2022.06.04
'css' Related Articles more