9. Float 이해하기
페이지 정보
작성자 관리자 댓글 0건 조회 1,168회 작성일 22-01-06 22:42본문
9. Float 이해하기
float 개념: "떠 있다"
실습 : float.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Float 이해하기</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div class="img1">
<img src="https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png" width="138" height="82">
</div>
<p>플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기플롯 연습하기</p>
<div class="img2">
<img src="https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png" width="138" height="82">
</div>
<div class="img3">
<img src="https://www.kunsan.ac.kr/images/001kunsan/new_main/common/logo.png" width="138" height="82" >
</div>
</body>
</html>
스타일을 추가한다.
<style>
.img1 {
float:left;
}
</style>
스타일을 수정한다.
<style>
.img1 {
float:right;
}
</style>
스타일을 수정한다.
<style>
.img1 {
float:right;
}
.img2{
float:left;
}
.img3{
float:right;
}
</style>
Float을 이용하여 레이아웃 설정시 도움이 된다.
실습2 : float2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Float 이해하기</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div class="container">
<div class="box">
<h2>제목</h2>
<p>문단내용문단내용문단내용문단내용문단내용문단내용문단내용문단내용문단내용문단내용</p>
</div>
<div class="box">
<h2>제목2</h2>
<p>문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용문단2내용</p>
</div>
<div class="box3">
<h2>제목3</h2>
<p>문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용</p>
</div>
<div>
<h2>제목4</h2>
<p>문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용문단3내용</p>
</div>
</div>
</body>
</html>
스타일을 추가한다.
<style>
.box {
float:left;
margin:20px;
padding:10px;
width:200px;
}
.box3{
clear:both;
}
</style>
box3은 빈여백에 따라 붙지 않게 하기 위해 Float을 제거해야 한다.
clear:both; /* left / right / both */
브라우저 사이즈를 늘려보면 레이아웃이 자동으로 바뀐 것을 볼 수 있다.
댓글목록
등록된 댓글이 없습니다.