레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout)

FrontEnd/HTML

by H_Develop 2022. 6. 21. 17:45

박스 중앙 배치

좌측에서 우측 방향으로 진행

margin : 0 auto;

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

	#box1, #box2, #box3 {width : 400px;
    					margin : 0 auto;	/* auto 중앙정렬, 좌 우 위 아래 여백을 지정하지 않는다. */
                        border : solid 3px red;
                        padding : 20px;}
                        
	#box2 {text-align : right;}
    
    #box3 {text-align : center;}

</style>
</head>
<body>

	<div id="box1">
    	<img src="orange.jpg">
    </div>
	<div id="box2">
        <img src="orange.jpg">
    </div>
    <dix id="box3">
    	<img src="orange.jpg">
	</div>

</body>
</html>

float

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

	div {width : 100px;
    	height : 50px;
        margin : 10px;
        color : white;
        text-align : center;}
        
	#a, #b {background-color : green;}
	#c {float : right;
    	background-color : red;}
	#d {float : left;
    	background-color : blue;}
        
	/* float를 주지않은 #a, #b는 default 값으로 display:inline-block 값을 갖는다. */
    
</style>
</head>
<body>

	<div id="a">요소 A</div>
	<div id="b">요소 B</div>
	<div id="c">요소 C</div>
        
</body>
</html>

clear

float 영향을 받지 않고, 새로운 줄에 배치하려면 clear를 사용

(block 값을 갖는다.)

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

	div {float : left;
    	background-color : black;
        width : 100px;
        height : 100px;}
        
	h3 {clear : left;}

</style>
</head>
<body>

	<div></div>
    <h3 style="border : solid 1px red;">Orange</h3>
    <p style="border : solid 1px red;">OOOOOO</p>

</body>
</html>

웹 페이지 레이아웃 (Layout)

전체 윤곽을 잡는 작업

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

	#wrap {width : 800px;
    		margin : 0 auto;}
	#header {height : 60px;
    		background-color : #dddddd;}
            
    #section #sidebar {width : 200px;
                        height : 300px;
                        float : left;}
                        
	#sidebar {background-color : orange;}
	#section {background-color : skyblue;}
    #footer {clear : both;
    		height : 60px;
            background-color : #dddddd;}
	#header, #sidebar, #section, #footer {font-size : 20px;
    									text-align : center;
                                        padding-top : 30px;}

</style>
</head>
<body>

	<div id="wrap">
    	<h2>div 요소를 이용한 레이아웃</h2>
    	<div id="header">
        	상단 헤더
        </div>
        <div id="sidebar">
        	사이드 바
        </div>
        <div id="section">
			메인 섹션
        </div>
        <div id="footer">
        	하단 푸터
        </div>
	</div>
</body>
</html>

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

float, position (relative, absolute, fixed) (0)	2022.06.22
HTML 레이아웃 요소 (header, sidebar, section, footer) (0)	2022.06.22
예제 (0)	2022.06.21
Table, Display, 목록 꾸미기 (0)	2022.06.20
CSS 배경 이미지, repeat, background-position (0)	2022.06.20