티스토리 뷰
1. 레이아웃 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {margin: 0px;padding: 0px;box-sizing: border-box;font-size: 14px;}
</style>
<title>쿠킹클라스</title>
</head>
<body>
<div id="wrap">
<header>
<nav></nav>
</header>
<!--Start main area --------------->
<main></main>
<!--End main area --------------->
<footer></footer>
</div>
</body>
</html>2. header 작업
html
<header>
<h1><img src="img/logo.png" alt="logo"></h1>
<nav>
<ul class="gnb">
<li><a href="./index.html" >홈</a></li><li><a href="#">회사소개</a></li><li><a href="#">제품소개</a></li>
</ul>
</nav>
</header>
css
body {background: #ffeeee;}
header {background: #ffffff;}
main {background: #efefef;min-height:550px;}
nav {display: inline-block;width: 680px;}
section, aside {padding:10px;display: block;}
h1 {width: 300px;display: inline-block;padding: 5px 10px;}
h2 {font-size:1.5em;border-bottom: 1px dotted #333333;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/base.css">
<title>쿠킹클라스</title>
</head>
<body>
<div id="wrap">
<header>
<h1><img src="img/logo.png" alt="logo"></h1>
<nav>
<ul class="gnb">
<li><a href="./index.html" >홈</a></li><li><a href="">회사소개</a></li><li><a href="">제품소개</a></li>
</ul>
</nav>
</header>
<!--Start main area --------------->
<main>
<section id="mainbg">
<a href="#" class="btn01">신청하러가기</a>
</section>
<section id ="content" class="fl_r col03 mt20" >
<h2>제품목록</h2>
<ul class="item mt10">
<li><img src="./img/bread1.png"></li>
<li class="subject">도너트 만들기[3]</li>
<li class="date">21.09.30</li>
</ul>
<ul class="item mt10">
<li><img src="./img/bread1.png"></li>
<li class="subject">도너트 만들기[3]</li>
<li class="date">21.09.30</li>
</ul>
<ul class="item mt10">
<li><img src="./img/bread1.png"></li>
<li class="subject">도너트 만들기[3]</li>
<li class="date">21.09.30</li>
</ul>
</section>
<aside class="fl_l col01 mt20" >
<h2> 오늘의 뉴스 </h2>
<ul class="news">
<li>쿠킹클래스 입니다. <span class="date fl_r">09:30</span></li>
<li>쿠킹클래스 입니다. <span class="date fl_r">09:30</span></li>
<li>쿠킹클래스 입니다. <span class="date fl_r">09:30</span></li>
<li>쿠킹클래스 입니다. <span class="date fl_r">09:30</span></li>
</ul>
<div id="player" class="mt20">
<iframe width="100%" src="https://www.youtube.com/embed/kPlSyYtE63M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</aside>
<div class="break"></div>
</main>
<!--End main area --------------->
<footer>
<div class="address">
<ul>
<li>서울시 서초구 신반포로45길 9-20번지, 4층 |
Tel. <a href="tel:02-556-3346">02-556-3346</a> | Fax. 0504-002-7583 | Email.
<a href="mailto:bjshjy@naver.com" style="color:#ffffff !important">bjshjy@naver.com</a></li>
<li>대표자 : 정희용 | 사업자번호 : 105-87-94707 | 통신판매번호 : 2016-서울강남-02575 | 개인정보책임자 : 한종진</li>
<li>Copyright ⓒ BLUECOMMUNICATION. All rights reserved.</li>
</ul>
</div>
</footer>
</div>
</body>
</html>*{margin: 0px;padding: 0px;box-sizing: border-box;font-size: 14px;}
a:link {font-size: inherit;
text-decoration: none;}
a:visited {
text-decoration: none;}
a:hover {
text-decoration: none; background: #ff0000;}
a:active {
text-decoration: underline;}
ul, ol, dl, li, dt, dl {list-style: none;}
body {background: #ffeeee;}
header {background: #ffffff;}
main {background: #efefef;min-height:550px;}
footer {background: #333333;height: 100px;color: #eeeeee;font-size: 11px;}
h1 {width: 300px;display: inline-block;padding: 5px 10px;}
h2 {font-size:1.5em;border-bottom: 1px dotted #333333;}
nav {display: inline-block;width: 680px;}
section, aside {padding:10px;display: block;}
#wrap {width: 1000px;border:1px solid #aaaaaa;margin:0px auto;padding: 0px;background: #ffffff;}
#mainbg {background: url(../img/main_bg.png) top center no-repeat;
background-size: cover; height: 300px;
position: relative;}
#content {/*height: 400px;*/}
.gnb {float:right;}
.gnb li {display: inline-block;margin: 0px 10px;background: hotpink;color: #ffffff;}
.gnb li a {color: #ffffff;display:inline-block;width:80px;
text-align: center;
padding:5px 10px;font-size:0.75px;}
.btn01 {background: #333333;color: #ffffff;
font-weight: bold;width: 150px;padding: 10px;
text-align: center;
border-radius: 30px;
position: absolute; bottom: 30px;right: 100px;
}
.item {display: inline-block;float:left;height:200px;margin-right: 10px;}
.item img {border: 1px solid #eeeeee;}
.item .subject {font-weight: bold;}
.date {font-size:0.75em;}
.news li {border-bottom: 1px dotted #999999;padding:3px;
font-size:11px;}
.address {padding: 20px 10px;}
.address li {font-size: 0.75em;color: #aaaaaa;margin:5px;}
.address a {color: #336699;}
.fl_l {float: left;}
.fl_r {float: right;}
.col03 {width:75%;}
.col01 {width:25%;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.ml10 {margin:0px 10px 0;}
.break {display: block;clear: both;}728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
반응형