<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#wrapper{
		width:500px;
		height:500px;
		margin:auto;
		background:black;
	}
	#content1{
		width:50%;
		height:400px;
		background:yellow;
		float:left;
	}
	#content2{
		width:50%;
		height:400px;
		background:red;
		float:left;
	}
	#footer{
		width:100%;
		height:100px;
		background:blue;
		clear:left;/*float으로 생긴 빈틈으로 <들어가지 않게> 하는 속성*/
	}
</style>
</head>
<body>
	<pre>
		<h3>float과 clear에 대해 학습한다.</h3>
	</pre>
	
	<div id="wrapper">
		<div id="content1">좌측 영역</div>
		<div id="content2">우측 영역</div>
		<div id="footer">아래 영역</div>
	</div>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - position 속성  (0) 2020.08.29
css - box의 이해  (0) 2020.08.29
css - layout 연습  (0) 2020.08.29
css - block의 이해  (0) 2020.08.29
css - 태그의 테두리 제어  (0) 2020.08.29 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#wrapper{
		width:600px;
		height:500px;
		overflow:hidden;
		margin:auto;
	}
	#section{
		background-color:green;
		width:100px;
		height:100%;
		float:left;
		
	}    
	#header{
		background-color:yellow;
		width:100%;
		height:100px;
	}
	#center{
		background-color:blue;
		width:100%;
		height:300px;
	}
	#footer{
		background-color:red;
		width:100%;
		height:100px;
	}
	#content{
		width:500px;
		height:500px;
		float:left;
	}
    
</style>
</head>
<body>
	<div id="wrapper">
		<div id="section"></div>
		<div id="content">
			<div id="header">	</div>
			<div id="center"></div>
			<div id="footer"></div>
		</div>
	</div>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
css - block의 이해  (0) 2020.08.29
css - 태그의 테두리 제어  (0) 2020.08.29
HTML의 기본적인 table 태그  (0) 2020.08.26
  • 모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다.
    1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없으며 너비와 높이를 가질 수 있다.
    2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능하며 너비와 높이를 가질 수 없다.
  • float을 이용하여 Box를 띄워주어 같은 행에 존재할 수 있도록 할 수 있다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>block, inline 속성</title>
<style>
	#box1{
		background-color:red;
		width:200px;
	}
	#box2{
		background-color:LightGray;
		width:400px;
	}
</style>
</head>
<body>
	<!-- 모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다.
		1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없다.
						너비와 높이를 가질 수 있다.
		2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능
						너비와 높이를 가질 수 없다.
	-->
	<div id="box1">box1</div>
	<div id="box2">box2</div>
</body>
</html>


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>block, inline 속성</title>
<style>
	#box1{
		background-color:red;
		width:200px;
		float:left; /*현재의 태그 요소를 띄운다.*/
	}
	#box2{
		background-color:LightGray;
		width:400px;
		float:left;
	}
</style>
</head>
<body>
	<!-- 모든 태그는 박스이면서, 이 박스들은 두가지 유형으로 분류된다.
		1. block형 : 자신과 같은 행에, 그 어떠한 태그도 존재할 수 없다.
						너비와 높이를 가질 수 있다.
		2. inline형 : 자신과 같은 행에, 다른 태그 요소와 공존이 가능
						너비와 높이를 가질 수 없다.
	-->
	<div id="box1">box1</div>
	<div id="box2">box2</div>
</body>
</html>

 

'프로그래밍 > html_css' 카테고리의 다른 글

css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
css - layout 연습  (0) 2020.08.29
css - 태그의 테두리 제어  (0) 2020.08.29
HTML의 기본적인 table 태그  (0) 2020.08.26

+ Recent posts

티스토리툴바