float, position (relative, absolute, fixed)

FrontEnd/HTML

by H_Develop 2022. 6. 22. 16:58

Float 속성은 좌측 또는 우측에 배치

Position 속성은 HTML 요소의 위치 지정

- relaive 상대위치

- absolute 절대위치

- fixed 위치고정

relative 상대위치 / 원 위치 유지하며 기준을 잡고 원하는 위치로 요소를 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	#b {position : relative;
    	left : 60px;	/* left에서 60px 떨어지고, */
        top : 30px;}	/* top에서 30px 떨어져라 */
	#a, #b, #c {width : 100px;
    			height : 60px;
                background-color : yellow;
                border : solid 1px black;}

</style>
</head>
<body>

	<h3>상대 위치 지정(position : relative)</h3>
    <div id="a">요소 A</div>
    <div id="b">요소 B</div>
    <div id="c">요소 C</div>

</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	* {margin : 0 auto;}
    #main {background-color : green;
    		width : 600px; height : 600px;}
	#main div {background-color : yellow;
    		width : 100px; height : 100px;
            box-shadow : 2px 2px 10px white;
            text-decoration : underline;
            text-align : center;}
            
	h1 {padding : 50px;}
    p	{padding : 25px;}
    
    #main #one {position : relative; left : 0px; top : 85px;}
	#main #two {position : relative; left : 150px; top : 60px;}
	#main #three {position : relative; left : 150px; top : 115px;}
	#main #four {position : relative; left : 0px; top : 90px;}
	#main #five {position : relative; right : 150px; bottom : 85px;}
	#main #six {position : relative; right : 150px; bottom : 340px; }

</style>
</head>
<body>

	<h1 style="text-align:center;">프로그래밍 강좌</h1>
    <div id="main">
		<div id="one"><p>HTML<br>강좌</p></div>
		<div id="two"><p>파이썬<br>강좌</p></div>
		<div id="three"><p>자바<br>강좌</p></div>
		<div id="four"><p>PHP<br>강좌</p></div>
		<div id="five"><p>C#<br>강좌</p></div>
		<div id="six"><p>CSS<br>강좌</p></div>
	</div>
    
</body>
</html>

absolute 절대위치 / 원 위치 유지않고 페이지 상단, 좌측 끝에서 원하는 위치로 요소를 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	#b {position : absolute;
    	left : 60px;
        top : 30px;}
        
	#a, #b, #c {width : 100px;
    			height : 60px;
                background-color : yellow;
                border : solid 1px black;}

</style>
</head>
<body>

	<h3>상대 위치 지정(position : absolute)</h3>
	<div id="a">요소 A</div>
    <div id="b">요소 B</div>
    <div id="c">요소 C</div>

</body>
</html>

부모가 있는 absolute의 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	#parent {width : 350px;
    		height : 200px;
            position : relative;
            border : solid 1px red;
            padding : 90px 0 0 60px;}
            
	#b		{position : absolute;
    		left : 30px; top : 30px;}
            
	#a, #b, #c {width : 100px;
    			height : 60px;
                background-color : yellow;
                border : solid 1px black;}

</style>
</head>
<body>

	<h3>절대 위치 지정(position : absolute, 부모 요소가 있는 경우)</h3>
    <div id="parent">
    	<div id="a">요소 A</div>
    	<div id="b">요소 B</div>
    	<div id="c">요소 C</div>
    </div>

</body>
</html>
<!-- parent를 position : relative 로 잡지 않으면 #b의 absolute의 기준이 parent로 잡히지 않는다. -->

fixed 위치고정 / 스크롤을 내려도 움직이지 않음 / 부모 만들어도 무시, 웹페이지에서 고정

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	
    #box {width : 10px;
    	height : 1000px;
        background-color : green;}
	#a {position : fixed;
    	right : 20px; top : 20px;
        background-color : red;
        padding : 10px 20px; /* padding 두개만 지정하면 위 아래 지정 */ 
        color : white;}

</style>
</head>
<body>

	<h3>위치 지정(position : fixed)</h3>
    <div id="box"></div>
    <div id="a">요소 A</div>

</body>
</html>

'FrontEnd > HTML' 카테고리의 다른 글

box-sizing, vertical-align (0)	2022.06.22
레이아웃(layout) 활용 및 예제 (0)	2022.06.22
HTML 레이아웃 요소 (header, sidebar, section, footer) (0)	2022.06.22
레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout) (0)	2022.06.21
예제 (0)	2022.06.21