하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

9. Float 이해하기

페이지 정보

작성자 관리자 댓글 0건 조회 532회 작성일 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>



1.PNG



스타일을 추가한다.


<style>

.img1 {

float:left;

}

</style>



2.PNG


스타일을 수정한다.


<style>

.img1 {

float:right;

}

</style>



3.PNG


스타일을 수정한다.


<style>

.img1 {

float:right;

}

.img2{

float:left;

}

.img3{

float:right;

}

</style>



4.PNG


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>



5.PNG



스타일을 추가한다.


<style>

.box {

float:left;

margin:20px;

padding:10px;

width:200px;

}

.box3{

clear:both;

}

</style>


box3은 빈여백에 따라 붙지 않게 하기 위해 Float을 제거해야 한다.

clear:both;  /* left / right / both */



6.PNG


브라우저 사이즈를 늘려보면 레이아웃이 자동으로 바뀐 것을 볼 수 있다.


7.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.