web publishing_HTML&CSS_Example 03

장봄·2020년 1월 14일
0

HTML&CSS_Example

목록 보기
3/3

01. table - 테이블 작성

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		caption{display: none;}

		/*style*/
		.tbl {width: 800px; margin: 0 auto;}
		.tbl table {width: 100%}
		.tbl table th,.tbl table td {padding: 4px 0; border: 1px solid #ccc; color: #777; text-align: center;}
		.tbl table thead th {padding: 6px 0; background-color: #efefef; color: #666;}
		.tbl table tfoot th, .tbl table tfoot td {padding: 6px 0; background-color: #efefef; color: #666; font-weight: bold;}
	</style>
</head>
<body>

<div class="tbl">
	<!-- UI Object -->
	<table>
		<caption>메이져리그 2007시즌 1위~6위 팀순위입니다.</caption>
		<colgroup>
			<col width="10%">
			<col>
			<col width="10%">
			<col width="10%">
			<col width="10%">
			<col width="10%">
			<col width="10%">
			<col width="10%">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">순위</th>
				<th scope="col">팀</th>
				<th scope="col">경기수</th>
				<th scope="col">승</th>
				<th scope="col">패</th>
				<th scope="col">승률</th>
				<th scope="col">승차</th>
				<th scope="col">최근</th>
			</tr>
		</thead>		
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>콜로라도</td>
				<td>163</td>
				<td>90</td>
				<td>73</td>
				<td>0.552</td>
				<td>-</td>
				<td>9승-1패</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>샌디에이고</td>
				<td>163</td>
				<td>89</td>
				<td>74</td>
				<td>0.546</td>
				<td>1</td>
				<td>4승-6패</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>뉴욕M</td>
				<td>163</td>
				<td>88</td>
				<td>74</td>
				<td>0.543</td>
				<td>1.5</td>
				<td>4승-6패</td>
			</tr>
			<tr>
				<th scope="row">4</th>
				<td>애틀랜타</td>
				<td>163</td>
				<td>84</td>
				<td>78</td>
				<td>0.519</td>
				<td>5.5</td>
				<td>5승-5패</td>
			</tr>
			<tr>
				<th scope="row">5</th>
				<td>밀워키</td>
				<td>163</td>
				<td>83</td>
				<td>79</td>
				<td>0.512</td>
				<td>6.5</td>
				<td>5승-5패</td>
			</tr>
			<tr>
				<th scope="row">6</th>
				<td>LAD</td>
				<td>163</td>
				<td>82</td>
				<td>80</td>
				<td>0.506</td>
				<td>7.5</td>
				<td>3승-7패</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>우승</th>
				<td>콜로라도</td>
				<td>845</td>
				<td>448</td>
				<td>511</td>
				<td>0.521</td>
				<td>-</td>
				<td>-</td>
			</tr>
		</tfoot>
	</table>
	<!-- //UI Object -->
</div>

</body>
</html>

위 코딩이 적용된 웹화면

02. form, login - 로그인 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>login</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		caption{display: none;}
		legend,.blind{display:block;position:absolute;left:0;top:-999em;overflow:hidden;}

		/*style*/
		.login {
			position: relative;
			width: 384px;
			margin: 20px auto;
			border:2px solid #555;
		}
		.login fieldset {
				padding: 28px 28px 10px;
		}
		.login fieldset .field {
			margin-bottom: 5px;
		}
		.login fieldset .field .inp_field {
			border:1px solid #b7b7b7;
			border-color: #b7b7b7 #e1e1e1 #e1e1e1  #b7b7b7;
			color: #767676;
			font:bold 11px/28px verdana,sans-serif;
			width: 326px;
			height: 28px;
			text-indent: 9px;
		}
		.login fieldset .area {
			padding-top: 5px;
			*zoom:1;
		}
		.login fieldset .area:after {
			content: '';
			display: block;
			clear: both;
		}
		.login fieldset .chk_field {
			float: left;
			margin-top: 7px;
			color: #767676;
			font: 11px '돋움',dotum,helvetica,sans-serif;
		}
		.login fieldset .chk_field input {
			vertical-align: middle;
		}
		.login fieldset .btn_area {
			float: right;
			margin-right: 4px;
		}
		.login fieldset .btn_area .btn_submit {
			background: none;
			border:0;
			padding-left: 40px;
			background: url(img/btn_login.gif) no-repeat 0 0;
			cursor: pointer;
		}
		.login fieldset .btn_area .btn_submit span {
			display: block;
			position: relative;
			right: -4px;
			height: 32px;
			padding-right: 20px;
			background: url(img/btn_login.gif) no-repeat 100% 0;
			color: #fff;
			font-weight: bold;
			line-height: 32px;			
		}
		.login .nav {
			padding: 14px 0;
			background-color: #fafafa;
			border-top: 1px solid #d9d9d9;
			text-align: center;
		}
		.login .nav ul {}
		.login .nav ul li {
			display: inline;
			margin-right: 7px;
			padding-right: 10px;
			border-right: 1px solid #c3c3c3;
		}
		.login .nav ul li.last {
			margin-right: 0;
			padding-right: 0;
			border: 0;
		}
		.login .nav ul li a {
			color: #767676;
		}
		.login .btn_close {
			position: absolute;
			right: 0;
			top: 0;
		}
		.login .btn_close button {
			width: 26px;
			height: 26px;
			background: none;
			border:0;
			color: #cacaca;
			font: bold 12px/26px verdana,sans-serif;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>

<div class="login">
	<form action="#" method="post">
		<fieldset>
			<legend>로그인</legend>
			<p class="field">
				<label for="user_id" class="blind">ID</label>
				<input type="text" id="user_id" name="user_id" value="" placeholder="ID" class="inp_field">
			</p>
			<p class="field">
				<label for="user_pw" class="blind">PASSWORD</label>
				<input type="password" id="user_pw" name="user_pw" value="" placeholder="PASSWORD" class="inp_field">
			</p>
			<div class="area">
				<p class="chk_field">
					<input type="checkbox" id="stay" name="stay" value="">
					<label for="stay">로그인유지</label>
				</p>
				<p class="btn_area">
					<button type="submit" class="btn_submit"><span>로그인</span></button>
				</p>
			</div>
		</fieldset>
		<div class="nav">
			<ul>
				<li><a href="#">아이디/비밀번호찾기</a></li>
				<li><a href="#">회원가입</a></li>
				<li class="last"><a href="#">Open ID</a></li>
			</ul>
		</div>
	</form>
	<p class="btn_close"><button type="button">X</button></p>
</div>

	
</body>
</html>

위 코딩이 적용된 웹화면

03. layout - 레이아웃 실습_01

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>layout, 2column</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		
		/*style*/
		#wrap {
			width: 970px;
			margin: 0 auto;
			background-color: gray;
		}
		#header {
			padding: 20px;
			background-color: pink;
		}
		#container {
			padding-bottom: 30px;
			*zoom:1;
			background-color: lime;
		}
		#container:after {
			content: '';
			display: block;
			clear: both;
		}
		#container #content {
			float: right;
			width: 600px;
			background-color: blue;
		}
		#container #content .inn {
			padding:20px;
		}
		#container .aside {
			float: left;
			width: 370px;
			background-color: green;
		}
		#container .aside .inn {
			padding: 20px;
		}
		#footer {
			padding: 20px;
			background-color: silver;
		}
	</style>
</head>
<body>
 
<div id="wrap">
	<!-- header -->
	<div id="header">
		<h1>logo</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod illo, saepe sed nam? Fugit eaque earum adipisci aliquam dolorem, sunt culpa autem, qui laudantium maxime laboriosam pariatur. Repellat consectetur aut possimus sequi provident qui ipsum, itaque quia. Possimus necessitatibus quas eligendi quaerat doloremque. Quam, est. Praesentium recusandae dolore inventore delectus?</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<!-- content -->
		<div id="content">
			<div class="inn">
				<h2>content</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
			</div>
		</div>
		<!-- //content -->
		<!-- aside -->
		<div class="aside">
			<div class="inn">
				<h2>aside</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa error officiis nesciunt veritatis quod laboriosam tenetur deleniti ducimus eum beatae.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestiae, dolore iste deserunt sed tempore itaque iusto totam, qui facere accusantium et ratione dolorem porro sapiente animi dicta, culpa earum veritatis quibusdam? Consequatur, debitis odio sequi ipsum, labore harum veniam quos iusto sed nemo expedita perspiciatis in, perferendis libero officiis.</p>
			</div>
		</div>
		<!-- //aside -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<address>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, eveniet.</address>
		<p>Copyright &copy;</p>
	</div>
	<!-- //footer -->
</div>

	
</body>
</html>

위 코딩이 적용된 웹화면

04. layout - 레이아웃 실습_02

  • header와 footer에 내부 영역을 지정해서 크기조절을 적용.
  • header와 footer에 최소 너비를 적용.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>layout, 2column</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		
		/*style*/
		#wrap {
			background-color: gray;
		}
		#header {
			min-width: 970px;
			/*최소 너비지정*/
			padding: 20px 0;
			background-color: pink;
		}
		#header .header-area {
			width: 970px;
			margin: 0 auto;
		}
		#container {
			width: 970px;
			margin: 0 auto;
			padding-bottom: 30px;
			*zoom:1;
			background-color: lime;
		}
		#container:after {
			content: '';
			display: block;
			clear: both;
		}
		#container #content {
			float: right;
			width: 600px;
			background-color: blue;
		}
		#container #content .inn {
			padding:20px;
		}
		#container .aside {
			float: left;
			width: 370px;
			background-color: green;
		}
		#container .aside .inn {
			padding: 20px;
		}
		#footer {
			min-width: 970px;
			padding: 20px 0;
			background-color: silver;
		}
		#footer .footer-area {
			width: 970px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
 
<div id="wrap">
	<!-- header -->
	<div id="header">
		<div class="header-area">
			<h1>logo</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod illo, saepe sed nam? Fugit eaque earum adipisci aliquam dolorem, sunt culpa autem, qui laudantium maxime laboriosam pariatur. Repellat consectetur aut possimus sequi provident qui ipsum, itaque quia. Possimus necessitatibus quas eligendi quaerat doloremque. Quam, est. Praesentium recusandae dolore inventore delectus?</p>
		</div>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<!-- content -->
		<div id="content">
			<div class="inn">
				<h2>content</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
			</div>
		</div>
		<!-- //content -->
		<!-- aside -->
		<div class="aside">
			<div class="inn">
				<h2>aside</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa error officiis nesciunt veritatis quod laboriosam tenetur deleniti ducimus eum beatae.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestiae, dolore iste deserunt sed tempore itaque iusto totam, qui facere accusantium et ratione dolorem porro sapiente animi dicta, culpa earum veritatis quibusdam? Consequatur, debitis odio sequi ipsum, labore harum veniam quos iusto sed nemo expedita perspiciatis in, perferendis libero officiis.</p>
			</div>
		</div>
		<!-- //aside -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<div class="footer-area">
			<address>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, eveniet.</address>
			<p>Copyright &copy;</p>
		</div>
	</div>
	<!-- //footer -->
</div>

	
</body>
</html>

위 코딩이 적용된 웹화면

05. layout - 레이아웃 실습_03

  • content와 aside에 %를 적용해서 화면이 사이즈가 작아지면 유동적으로 화면내용이 들어있는 공간이 줄어든다. 너비가 고정되지 않아서 좌우로 이동하는 스크롤이 생기지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>layout, 2column</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		
		/*style*/
		#wrap {
			background-color: gray;
		}
		#header {
			padding: 20px;
			background-color: pink;
		}
		#container {
			padding-bottom: 30px;
			*zoom:1;
			background-color: lime;
		}
		#container:after {
			content: '';
			display: block;
			clear: both;
		}
		#container #content {
			float: right;
			width: 62%;
			background-color: blue;
		}
		#container #content .inn {
			padding:20px;
		}
		#container .aside {
			float: left;
			width: 38%;
			background-color: green;
		}
		#container .aside .inn {
			padding: 20px;
		}
		#footer {
			padding: 20px;
			background-color: silver;
		}
	</style>
</head>
<body>
 
<div id="wrap">
	<!-- header -->
	<div id="header">
		<h1>logo</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod illo, saepe sed nam? Fugit eaque earum adipisci aliquam dolorem, sunt culpa autem, qui laudantium maxime laboriosam pariatur. Repellat consectetur aut possimus sequi provident qui ipsum, itaque quia. Possimus necessitatibus quas eligendi quaerat doloremque. Quam, est. Praesentium recusandae dolore inventore delectus?</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<!-- content -->
		<div id="content">
			<div class="inn">
				<h2>content</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
			</div>
		</div>
		<!-- //content -->
		<!-- aside -->
		<div class="aside">
			<div class="inn">
				<h2>aside</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa error officiis nesciunt veritatis quod laboriosam tenetur deleniti ducimus eum beatae.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestiae, dolore iste deserunt sed tempore itaque iusto totam, qui facere accusantium et ratione dolorem porro sapiente animi dicta, culpa earum veritatis quibusdam? Consequatur, debitis odio sequi ipsum, labore harum veniam quos iusto sed nemo expedita perspiciatis in, perferendis libero officiis.</p>
			</div>
		</div>
		<!-- //aside -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<address>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, eveniet.</address>
		<p>Copyright &copy;</p>
	</div>
	<!-- //footer -->
</div>

	
</body>
</html>

위 코딩이 적용된 웹화면

06. layout - 레이아웃 실습_04

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>layout, 2column</title>
	<style>
		/*reset*/
		html,body{width:100%;height:100%}
		body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
		body,input,textarea,select,button,table,th,td{font-family:'Malgun Gothic',Dotum,AppleGothic,sans-serif;font-size:12px}
		img,fieldset{border:0}
		img{vertical-align: top}
		table{border-collapse: collapse;}
		ul,ol{list-style:none}
		em,address{font-style:normal}
		a{text-decoration:none}
		a:hover,a:active,a:focus{text-decoration:underline}
		
		/*style*/
		#wrap {
			width: 970px;
			margin: 0 auto;
			background-color: gray;
		}
		#header {
			padding: 20px;
			background-color: pink;
		}
		#container {
			padding-bottom: 30px;
			*zoom:1;
			background-color: lime;
		}
		#container:after {
			content: '';
			display: block;
			clear: both;
		}
		#container #content {
			float: left;
			width: 52%;
			background-color: blue;
		}
		#container #content .inn {
			padding:20px;
		}
		#container .nav {
			float: left;
			width: 24%;
			background-color: purple;
		}
		#container .nav .inn {
			padding:20px;
		}
		#container .aside {
			float: right;
			width: 24%;
			background-color: green;
		}
		#container .aside .inn {
			padding: 20px;
		}
		#footer {
			padding: 20px;
			background-color: silver;
		}
	</style>
</head>
<body>
 
<div id="wrap">
	<!-- header -->
	<div id="header">
		<h1>logo</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod illo, saepe sed nam? Fugit eaque earum adipisci aliquam dolorem, sunt culpa autem, qui laudantium maxime laboriosam pariatur. Repellat consectetur aut possimus sequi provident qui ipsum, itaque quia. Possimus necessitatibus quas eligendi quaerat doloremque. Quam, est. Praesentium recusandae dolore inventore delectus?</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<!-- nav -->
		<div class="nav">
			<div class="inn">
				<h2>Nav</h2>
				<ul>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">portfolid</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</div>
		</div>
		<!-- //nav -->
		<!-- aside -->
		<div class="aside">
			<div class="inn">
				<h2>aside</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa error officiis nesciunt veritatis quod laboriosam tenetur deleniti ducimus eum beatae.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestiae, dolore iste deserunt sed tempore itaque iusto totam, qui facere accusantium et ratione dolorem porro sapiente animi dicta, culpa earum veritatis quibusdam? Consequatur, debitis odio sequi ipsum, labore harum veniam quos iusto sed nemo expedita perspiciatis in, perferendis libero officiis.</p>
			</div>
		</div>
		<!-- //aside -->
		<!-- content -->
		<div id="content">
			<div class="inn">
				<h2>content</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi voluptate nobis, doloremque voluptas iste. Totam officiis quos non sit, ducimus in vel modi. Incidunt libero perspiciatis ab minima ea aliquid, pariatur quo sint nulla eveniet consectetur, odio fuga modi distinctio! Culpa magni hic dicta dolor mollitia nobis aperiam sapiente neque. Adipisci tenetur minus nihil, nostrum, quo repellat eos facere a, blanditiis, beatae officiis voluptate voluptatem natus autem officia quisquam ipsam. Provident est tempora perferendis sed enim ducimus voluptate error vel laudantium accusantium, atque qui doloremque cupiditate, labore possimus nobis quo aliquid, sapiente obcaecati, natus molestias eaque reprehenderit. Ipsam, minus.</p>
			</div>
		</div>
		<!-- //content -->		
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<address>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, eveniet.</address>
		<p>Copyright &copy;</p>
	</div>
	<!-- //footer -->
</div>

	
</body>
</html>

위 코딩이 적용된 웹화면

profile
장봄
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>
이전 포스트

web publishing_HTML&CSS_Example 02

0개의 댓글