728x90
★ Float
- 원래 출력되던 위치를 벗어나, 라인의 맨 왼쪽(오른쪽) 끝으로 이동
- float : none | left | right
- float 성질 제거 : 새로운 div를 생성해서 clear 부여!
#name1 {
color :blue;
background-color: yellow;
float : left;
}
#name2 {
color : blue;
background-color: yellow;
float : right;
}- 실행 화면
■ ex1) 이미지를 사용한 float
<style>
#pic {
float : left;
}
</style>
<body>
<p><img src="images/man_01.png" id="pic">안녕하세요. <span id="name1">홍길동</span>입니다. 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 @<span id ="name2">아무개</span>@더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터 더미 데이터</p>
</body>- 실행 결과 1
■ ex2) 상위 배너를 이용한 float
- font-varient : small-caps 문자모양을 대소문자 기준으로 예쁘게 만들어줌.
<style>
#title {
color : #555;
font-variant : small-caps; /* 문자 모양을 대소문자 기준으로 예쁘게 만들어줌 */
border : 1px dashed #999;
}
#title > span {
color : tomato;
}
#title > small {
font-size : 1rem;
float : right;
margin-top : 20px;
}
</style>
<body>
<h1 id="title">
<span>M</span>ember list
<small>Table Design</small>
</h1>
</body>- 실행 결과 2
■ ex3) 페이지 레이아웃
- clear : left; = float로 인해서 딸려올라가는 것을 제거하는 함수
- clear는 블럭 태그만 가능함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu {
background-color: orange;
width: 600px;
height: 100px;
}
#submenu {
background-color: yellow;
width: 150px;
height: 300px;
float : left;
}
#content {
background-color: blue;
width: 450px;
height: 300px;
float : left;
}
#footer {
background-color: green;
clear : left;
width: 600px;
height: 100px;
}
#main {
width : 600px;
/* border : 10px solid black; */
}
</style>
</head>
<body>
<h1>페이지 레이아웃</h1>
<div id="main">
<div id="menu">주메뉴(orange)</div>
<div id="submenu">보조메뉴(yellow)</div>
<div id="content">콘텐츠(blue)</div>
<div id="footer">하단(green)</div>
</div>
</body>
</html>- 실행 결과 3
■ ex4) 이미지를 이용한 float
- float 성질 제거 : 새로운 div를 생성해서 clear 부여!
<style>
img {
float : left;
}
</style>
<body>
<h1>인라인 요소 배치</h1>
<img src="images/rect_icon01.png">
<img src="images/rect_icon02.png">
<img src="images/rect_icon03.png">
<img src="images/rect_icon04.png">
<img src="images/rect_icon05.png">
<div style="clear:left"></div>
<!-- 딸려올라가는 것을 방지하기 위해 div를 생성하여 clear -->
</body>- 실행 결과 4
★ float 문제
- 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border : 10px solid black;
}
#box > img {
float : left;
}
</style>
</head>
<body>
<div id="box">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
</div>
</body>
</html>- 실행결과
- 이렇게 float를 주는 순간 영역을 튕겨나가는 현상이 발생함.
- 이유 : 부모가 줄어들면서, 자식도 딸려올라갔기 때문.
- 해결방법
<div id="box">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
<div style = "clear:left"></div>
<!-- clear를 통해 float를 제거 -->
</div>- 실행결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 13 - Position (0) | 2023.04.17 |
|---|---|
| CSS STEP 12 - Reset CSS (0) | 2023.04.17 |
| CSS STEP 10 - Display (0) | 2023.04.17 |
| CSS STEP 9 - 적용 예제 (0) | 2023.04.14 |
| CSS STEP 8 - OverFlow&Visibility (0) | 2023.04.14 |
