코딩 공부/HTML + CSS
[HTML+CSS] 15_Float속성
chocbi
2020. 5. 9. 18:32
Float 속성
#01. Float 속성의 기본 특성
1) Float 속성
- Float속성은 뉴스 페이지와 비슷하다.
- 이미지나 박스를 화면의 우측 혹은 좌측에 고정시켜 놓고 텍스트가 그 옆에 흐르듯이 지나가도록 하는 것을 Floating 처리라 한다. 이 때 사용되는 속성이 float속성이다.
- Float 속성은 Block-Level 요소를 부모 박스 안에서 왼쪽이나 오른쪽에 고정시키는 것이 원래의 기능이지만, 다른 박스들과 함께 Floating처리를 하게 되면 다양한 효과를 얻을 수 있다.
2) Float 속성에 적용할 수 있는 값
| 값 | 설명 |
|---|---|
| float: left; | 요소를 부모 박스 안에서 왼쪽에 고정시킨다. |
| float: right; | 요소를 부모 박스 안에서 오른쪽에 고정시킨다. |
| float: inherit; | 부모 요소에 적용된 Float 속성값을 상속 받는다. |
| float: none; | Float속성을 적용하지 않는다. (기본값) |
3) Float 속성 사용시, 주의사항
- width 속성에 대한 auto값을 사용할 수 없게 된다.
- %나 px단위의 값만 사용 가능함.
01-Float속성(1).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<!-- 스타일 시트 -->
<style type="text/css">
#box1 {
width: 300px;
padding: 10px;
border: 1px solid #eee;
margin: 0 0 10px 10px;
/* float는 박스를 좌, 우 위치에 고정시키고, 텍스트가 그 주변에서 흐르도록 처리한다. */
float: right;
}
#box1 img {
width: 100%;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<p>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는
단지 월드 와이드 웹으로만 끝나는 것이 아니라,
인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로
웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다.</p>
<p>이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는
것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더
높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<p> (출처: 위키백과) </p>
</body>
</html>출력결과
02-Float속성(2).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<!-- 스타일시트-->
<style type="text/css">
/**
float의 특성 (2)
- 두 개의 박스가 서로 다른 값을 갖는 경우, 박스가 양쪽에 배치된다.
- 두 박스의 넓이 합이 부모를 가득 채우면, 한 줄을 양분하는 효과를 얻는다.
*/
div#box1 {
width: 150px;
height: 200px;
background-color: #ff00ff;
float: left;
}
div#box2 {
width: 150px;
height: 200px;
background-color: #ff6600;
float: right;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<p>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는
단지 월드 와이드 웹으로만 끝나는 것이 아니라,
인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로
웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다.</p>
<p>이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는
것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더
높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<p> (출처: 위키백과) </p>
</body>
</html>출력결과
03-Float속성(3).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<style type="text/css">
/**
float의 특성 (2)
- 두 개의 박스가 서로 다른 값을 갖는 경우, 박스가 양쪽에 배치된다.
- 두 박스의 넓이 합이 부모를 가득 채우면, 한 줄을 양분하는 효과를 얻는다.
*/
div#box1 {
width: 30%;
height: 200px;
background-color: #ff00ff;
float: left;
}
div#box2 {
width: 70%;
height: 200px;
background-color: #ff6600;
float: right;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<p>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는
단지 월드 와이드 웹으로만 끝나는 것이 아니라,
인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로
웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다.</p>
<p>이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는
것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더
높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<p> (출처: 위키백과) </p>
</body>
</html>출력결과
#02. Float 마감제
1) <이미지+ 텍스트>로 구성된 두 개의 문단 준비하기
<body>
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<div id="box2">
<img src="img/html5.png" />
</div>
<p>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는
단지 월드 와이드 웹으로만 끝나는 것이 아니라,
인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로
웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다.</p>
<p>이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는
것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더
높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<p> (출처: 위키백과) </p>
</body>2) 박스의 크기 설정 및 Float 속성 지정
<style type="text/css">
#box1,
#box2 {
width: 300px;
padding: 10px;
border: 1px solid #eee;
}
#box1 {
margin: 0 10px 10px 0;
float: left;
}
#box2 {
margin: 0 0 10px 10px;
float: right;
}
#box1>img,
#box2>img {
width: 100%;
}
</style>3) Float 속성을 사용 후, 새로운 문단을 시작하기 위해 이전 Float 속성 Off하기
.clear {
float: none;
clear: both;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<!-- 이전 사용했던 float를 끈다 -->
<div class="clear"></div>
<div id="box2">
<img src="img/html5.png" />출력결과
#03. after 가상 클래스
05-after.html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<!-- 스타일시트 -->
<style type="text/css">
div.parent {
width: 250px;
border: 5px solid #f00;
background: #ffff00;
margin: auto;
}
div.child {
width: 200px;
height: 100px;
border: 5px solid #00f;
background: #f60;
margin: auto;
}
/**
[가상클래스 after, before]
특정 요소의 시작태그의 직전과 종료태그의 직후에 가상의 inline-level의 요소를 생성한다.
*/
/**시작태그 직후 */
.parent:before {
content: 'parent의 before';
display: block;
color: red;
}
.parent:after {
content: 'parent의 after';
display: block;
color: red;
}
.child:before {
content: 'after의 before';
display: block;
color: green;
}
.child:after {
content: 'child의 after';
display: block;
color: green;
}
/** 종료태그 직전 */
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div class="parent">
<!-- .parent의 before -->
<div class="child">
<!-- .child의 before -->
박스1
<!-- .child의 after -->
</div>
<!-- .parent의 after -->
</div>
</body>
</html>- after가 태그의 끝에 설정을 해주어서 float기능을 끌수 있게 해주었다
출력결과
#04. after 가상 클래스를 사용한 Float 마감 처리
1) Float속성을 해제하는 두 번째 방법
06-Float마감제(2).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<!-- 스타일 시트 -->
<style type="text/css">
#box1,
#box2 {
width: 300px;
padding: 10px;
border: 1px solid #eee;
}
#box1 {
margin: 0 10px 10px 0;
float: left;
}
#box2 {
margin: 0 0 10px 10px;
float: right;
}
#box1>img,
#box2>img {
width: 100%;
}
/**
[CSS로 Float 마감처리]
1) float영역을 <div class="clear">로 감싼다.
2) .clear: after CSS를 정의한다. (코드 참조);
*/
.clear:after {
content: '';
display: block;
/** float는 block-level에만 적용한다. */
clear: both;
float: none;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.
최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며
웹 디자인, 개발과 관계가 있다.</p>
<div class="clear"></div>
<div id="box2">
<img src="img/html5.png" />
</div>
<p>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는
단지 월드 와이드 웹으로만 끝나는 것이 아니라,
인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로
웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다.</p>
<p>이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는
것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더
높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<p> (출처: 위키백과) </p>
</body>
</html>- after 가상 클래스로 이전에 사용한 Float 속성을 해제한다.
출력결과
#05. 중첩된 HTML 구조에서의 Float 속성 사용하기
1) 중첩된 박스 구조에서의 Float 속성
- Float 속성이 적용된 요소는 부모요소가 감사지 못한다.
- 레이아웃 안에서 다른 요소의 영역을 침범하게 된다.
- 부모요소가 종료하기 전에 Float 마감처리를 추가하면 정상적으로 Float가 적용된 요소를 감쌀수 있다.
07-중첩관계Float(1).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<style type="text/css">
#parent {
border: 5px dotted #000000;
padding: 10px;
}
#box1 {
width: 300px;
padding: 10px;
border: 1px solid #eee;
margin: 0 0 10px 10px;
float: right;
}
#box1 img {
width: 100%;
}
/** 부모 요소가 끝나기 전에 clear처리 필요함 */
.clear {
clear: both;
float: none;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.</p>
<div class="clear"></div>
</body>
</html>
출력결과
2) 빈 HTML 태그를 사용하지 않고, 부모 요소가 Float 속성이 적용된 자식 요소를 감싸도록 처리하기
- 부모 요소의 after 가상 클래스를 사용하여 Float 마감처리를 한다.
08-중첩관계Float(2).html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<style type="text/css">
#parent {
border: 5px dotted #000000;
padding: 10px;
}
#box1 {
width: 300px;
padding: 10px;
border: 1px solid #eee;
margin: 0 0 10px 10px;
float: right;
}
#box1 img {
width: 100%;
}
/** 부모 요소가 끝나기 전을 의미하는 가상클래스 사용 */
.clear:after {
display: block;
content: '';
clear: both;
float: none;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="parent" class="clear">
<div id="box1">
<img src="img/title.jpg" />
</div>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는
공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.</p>
</div>
</body>
</html>
출력결과
#06. 박스 나열하기
1) Float 속성을 사용한 박스의 배치
- 같은 크기를 갖는 박스에게 Float 속성을 동일하게 지정하면 가로로 배치되고 부모의 넓이를 벗어나게 될 경우는 자동으로 줄바꿈 된다.
09-박스나열하기.html
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
<!-- 스타일 시트-->
<style type="text/css">
/* 전체 박스의 크기 지정과 중앙 배치 */
#container {
width: 800px;
border: 5px dotted #cccccc;
padding: 10px;
margin: auto;
}
/** 모든 박스의 크기 일괄 지정 */
#container div {
width: 200px;
height: 200px;
float: left;
}
/** 각 박스에 대한 배경 색상 지정 */
div#box1 {
background-color: #ff00ff;
}
div#box2 {
background-color: #0000ff;
}
div#box3 {
background-color: #00ff00;
}
div#box4 {
background-color: #ff6600;
}
div#box5 {
background-color: #ffff00;
}
/**float 마감제 */
.clear:after {
content: '';
display: block;
float: none;
clear: both;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div id="container" class="clear">
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<div id="box5">박스5</div>
</div>
</body>
</html>
출력결과
