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;
}
Reference
この問題について(HTMLページの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@xyunkyung/HTML-웹-페이지-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol