HTMLページの作成


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="default.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div id="wrapper">
	<div id="header-wrapper">
		<div id="header" class="container">
			<div id="logo"> 
				<h1><a href="#">smrit</a></h1>
				<p>좋은 회사</p>
			</div>
		</div>
	</div>
	<div id="menu-wrapper">
		<div id="menu" class="container">
			<ul>
				<li class="current_page_item page_item1"><a href="index.html">홈으로</a></li>
				<li class="page_item1"><a href="page1.html">About</a></li>
				<li class="page_item1"><a href="page2.html">Blog</a></li>
				<li class="page_item1"><a href="#">Portfolio</a></li>
				<li class="page_item1"><a href="#">Contact</a></li>
			</ul>
		</div>
	</div>
	<div id="banner"></div>
	<div id="page" class="container">
		<div id="content">
			<div class="title">
				<h2>html과 css에 관한 이야기</h2>
				<span class="byline">html에 css를 어떻게 적용하는 것이 이쁜게 적용할 지 배워봅시다.</span>
			</div>
			<p>
				불법 번식장에서 구조된 고양이들 소유권 정리와 아이들 치료등으로 구조 후 두달정도의 시간이 흘렀습니다. 구조당시 정말 몸이 성한 아이가 없을 정도로 다들 좋지 않아 입원하여 치료를 받았습니다. 현재 퇴원을 하고 쉼터에서 지내고 있습니다. 
			</p>
			<p>
				아이들 이제 새 묘생을 향해 나아가야겠지요?아이들이 대체로 다 순하고 이뻐요.나이는 평균 3~5세 정도 추정이며, 더 어린 친구들도 있습니다.하루라도 빨리 가족 찾아 보호받으며 편안히 쉬어가도록 공유와 관심 부탁드립니다.
			</p>
		</div>
		<div id="sidebar">
			<div class="box2">
				<div class="title">
					<h2>메뉴를 만들어봐요</h2>
				</div>
				<ul class="style">
					<li><a href="#">메뉴1</a></li>
					<li><a href="#">메뉴2</a></li>
					<li><a href="#">메뉴3</a></li>
					<li><a href="#">메뉴4</a></li>
					<li><a href="#">메뉴5</a></li>
					<li><a href="#">메뉴6</a></li>
					<li><a href="#">메뉴7</a></li>
					<li><a href="#">메뉴8</a></li>
				</ul>
			</div>
		</div>
	</div>
  </div>
  <div id="portfolio-wrapper">
  <div id="portfolio">
	<div id="column1">
		<div class="title">
			<h2>포트폴리오1</h2>
		</div>
		<a href="#" class="image image-full"><img src="images/img1.jpg" /></a>
		<p>포트폴리오 내용을 자세히 더 보시려면 아래 Read More를 클릭하시오. </p>
		<a href="#" class="button">Read More</a>
	</div>
	<div id="column2">
		<div class="title">
			<h2>포트폴리오2</h2>
		</div>
		<a href="#" class="image image-full"><img src="images/img2.jpg" /></a>
		<p>포트폴리오 내용을 자세히 더 보시려면 아래 Read More를 클릭하시오. </p>
		<a href="#" class="button">Read More</a>
	</div>
	<div id="column3">
		<div class="title">
			<h2>포트폴리오3</h2>
		</div>
		<a href="#" class="image image-full"><img src="images/img3.jpg" /></a>
		<p>포트폴리오 내용을 자세히 더 보시려면 아래 Read More를 클릭하시오. </p>
		<a href="#" class="button">Read More</a>
	</div>
	<div id="column4">
		<div class="title">
			<h2>포트폴리오4</h2>
		</div>
		<a href="#" class="image image-full"><img src="images/img4.jpg" /></a>
		<p>포트폴리오 내용을 자세히 더 보시려면 아래 Read More를 클릭하시오. </p>
		<a href="#" class="button">Read More</a>
	</div>
	</div>
  </div>
  <div id="footer-wrapper">
	<div id="footer" class="container">
		<div id="box1">
			<div class="title">
				<h2>제목1</h2>
			</div>
			<ul class="style1">
				<li><a href="#">내용1</a></li>
				<li><a href="#">내용2</a></li>
				<li><a href="#">내용3</a></li>
				<li><a href="#">내용4</a></li>
				<li><a href="#">내용5</a></li>
			</ul>
		</div>
		<div id="box2">
			<div class="title">
				<h2>제목2</h2>
			</div>
			<ul class="style2">
				<li><a href="#">내용12</a></li>
				<li><a href="#">내용22</a></li>
				<li><a href="#">내용32</a></li>
				<li><a href="#">내용42</a></li>
				<li><a href="#">내용52</a></li>
			</ul>
		</div>
		<div id="box3"><div class="title">
				<h2>Follow Us</h2>
			</div>
			<ul class="style3">
				<li><a href="#">Twiter</a></li>
				<li><a href="#">FaceBook</a></li>
				<li><a href="#">Dribbble</a></li>
				<li><a href="#">Pinterest</a></li>
				<li><a href="#">Cacao</a></li>
			</ul>
			<a href="#" class="button">Read More</a>
		</div>
	</div>
  </div>
  <div id="copyright">
	<address>주소 : 경기도 성남시 분당구 | 연락처 : 010-1234-1234 | <a href="index.html" >smrit</</address> 
  </div>
 </body>
</html>
*{
   margin: 0px;
   padding: 0px;
}
body {
   font:12px "굴림",Gulim;
   font-weight: 300;
   color: #363636;
}
a {
   text-decoration:none;
   color: #171717;
}
a:hover{text-decoration:none;}
li {list-style:none;   }
a img{border: none;}
p{line-height: 190%;}
h1, h2{margin: 0px;   padding: 0px;}
p, ul{margin-top:0px}
#header    {   
   text-align: center;   
}
#logo{
   width: 500px;
   height: 100px;
   margin: 0 auto;
   padding: 20px, 0px;
   text-transform:uppercase;
}
#logo h1{
   letter-spacing: 5px;
   font-size: 30px;
}
#logo p{
   letter-spacing: 5px;
   color: #FFF;
}
#logo a{
   color: #FFF;
}   
#banner {
   height: 330px;
   background:url("images/2.png") no-repeat center;
   background-size: cover;
}
#menu-wrapper{   
   background: #B10058;
}
#menu {   
   height: 75px;
}
#menu li {   
   display: inline-block;
}
#menu ul {   
   text-align: center;
}
#menu a {   
   letter-spacing: 3px;
   padding: 0px 20px;
   text-align: center;
   text-transform: uppercase;
   font-size: 20px;
   border: none;   
   line-height: 75px;   
   color:#fff;
}
#menu .current_page_item
{   
   background: #C0005F;
}
.page_item1:hover {
   background: #C0005F;
}
#header-wrapper{   
   background-size: 100%;   
   padding: 60px 0px 20px 0px;   
   background: #333333;
}
#content{   
   float: right;   /* 왼쪽 메뉴에서 내용을 오른쪽에 붙여서 정렬 */
   width: 790px;
}
#sidebar   {
   float: left;      
   width: 345px;   
}      
#sidebar .title h2   {      
   font-size: 160%;   
}      
#sidebar .box1   {      
   margin-bottom: 30px;   
}
.title h2   {      
   font-weight: 400px;      
   font-size: 20px;      
   color: #B10058;   
}   
.title .byline   {      
   letter-spacing: 2px;      
   text-transform: uppercase;      
   font-weight: 400px;      
   font-size: 20px;      
   color: #6F6F6F;   
}
#page{   
   position: relative;
   overflow: hidden;   
   padding: 30px 10px 20px 10px;
}

#portfolio-wrapper
{
   background: #A80154;
   padding: 40px 10px;
   color: rgba(255,255,255,7);
}

#column1,#column2,#column3,#column4
{
   width: 282px;
}
#column1,#column2
{
   float: left;
   margin-right: 30px;
}
#column3
   {
      float: left;
   }
   
#column4
   {
      float: right;
   }
#portfolio
   {
      overflow: hidden;
   }
#portfolio .title h2{
font-size:20px;
color:#FFF;}

.container{
width:1200px;
margin:0px auto;
}

.button{
display:inline-block;
margin-top:15px;
padding:15px 15px 15px 15px;
background:#BB005D;
letter-spacing: 2px;
text-decoration:none;
text-transform:uppercase;
font-weight:400px;
font-size:19px;
color:#FFF;
}

.image img{
display:block;
width:100%;
}

.image{
display:inline-block;
width:100%;
margin:0 0 20px 0;
}

ul.style1 li{
border-top:solid 1px #E5E5E5;
padding:8px 0px;
}

ul.style1 li:first-child{
border-top:0;
color:#FFF;
}

ul.style2 li{
border-top:solid 1px #E5E5E5;
padding:8px 0px;
color:#FFF;
}

ul.style2 li:first-child{
border-top:0;
}

ul.style3 li{
border-top:solid 1px #E5E5E5;
padding:8px 0px;
color:#FFF;
}

ul.style3 li:first-child{
border-top:0;
}

#box1, #box2{
float: left;
width:354px;
padding-right:30px;
}

#box3{
float:right;
width:354px;
padding-left:40px;
}

#copyright{
text-align:center;
}

#footer-wrapper{
overflow:hidden;
background:#1E1B1A;
padding:50px 0px;

}

footer .title h2{
color:#FFF;
}

ul.style1 li a, ul.style2 li a, ul.style3 li a{
color:#fff;
}

#copyright {
text-align:center;
text-decoration:none;
background:#BB005D;
height:50px;
padding-top:25px;
}

#copyright address{
letter-spacing:5px;
text-align:center;
text-transform:uppercase;
font-size:150%;
color:#FFF;
}