카페 소개
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카페 소개</title>
<link rel="stylesheet" href="./css/cafe.css">
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li><a href="#intro">카페소개</a></li>
<li><a href="#map">오시는 길</a></li>
<li><a href="#choice">이달의 추천</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class="page-title">
<h2>카페 소개</h2>
</div>
<div class="content">
<div class="photo"><img src="./images/coffee.jpg" alt="커피"></div>
<div class="text">
<p>영업 시간 : 오전9시 ~ 밤 10시</p>
<p>
휴무 : 매주 수요일 <i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i> <!-- <small> : 기존의 글자보다 조금 작게 해주는 태그 -->
</p>
</div>
</div>
</section>
<section id="map">
<div class="page-title">
<h2>오시는 길</h2>
</div>
<div class="content">
<div class="photo"><img src="./images/map.jpg" alt="지도"></div>
<div class="text">
<p>서귀포시 안덕면 사계리 000-000</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</div>
</section>
<section id="choice">
<div class="page-title">
<h2>이달의 추천</h2>
</div>
<div class="content">
<div class="photo"><img src="./images/ice.jpg" alt="추천"></div>
<div class="text">
<h2>핸드드립 아이스 커피</h2>
<ol>
<li>1인분을 기준으로 서버에 각 얼음 5조각(한조각은 20cc) 넣고 추출을 시작한다.</li>
<li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다</li>
<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
</ol>
</div>
</div>
</section>
<footer>
<p>My times with Coffee</p>
</footer>
</div>
</body>
</html>
CSS
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {font-family: 'GmarketSansMedium';}
#container{
width: 100%;
margin: 0 auto;
}
nav {
height: 50px;
background-color: black;
}
nav > ul {
list-style: none;
margin: 0;
padding: 3px;
}
nav > ul > li{
display: inline-block;
margin: 15px 20px;
}
a{text-decoration: none;}
a:link, :visited {color: white;}
a:active{color: yellow;}
a:hover{color: yellow;}
header{
width: 100%;
height: 300px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0;
}
.photo{display: none;}
section{
position: relative;
width: 100%;
padding: 15px 5%;
}
.page-title{
position: absolute;
top: 20px;
left: 0px;
padding: 30px 50px;
}
.content{
margin: 80px auto 10px;
width: 90%;
padding: 20px;
box-sizing: border-box;
}
#container section:nth-child(even) {
background-color: beige;
}
footer {
position: relative;
width: 100%;
height: 100px;
background-color: black;
}
footer > p {
color: white;
text-align: center;
line-height: 100px;
}
/* 테블릿 */
@media screen and (min-width: 768px ) {
header{
height: 400px;
}
#intro, #map{
box-sizing: border-box;
width: 50%;
float: left;
margin: 0;
height: 300px;
}
#choice{
clear: both;
}
}
/* pc */
@media screen and (min-width: 1024px){
#container{
width: 1000px;
margin: 0 auto;
}
header{
height: 450px;
}
#intro, #map, #choice{
box-sizing: border-box;
position: relative;
width: 100%;
height: 400px;
padding: 15px 5%;
}
.photo{
display: block;
width: 40%;
margin-top: 20px;
}
.content{
margin: 80px auto 10px;
width: 90%;
padding: 20px;
}
.photo > img{
width: 100%;
max-width: 320px;
height: auto;
margin-bottom: 30px;
}
#intro .photo, #map .photo{
float: left;
margin-right: 5%;
}
#choice .photo{
float: right;
}
.text {width: 45%;}
#intro .text, #map .text{float: right;}
#choice .text {float: left;}
#choice .photo img{border: 1px solid white; border-radius: 50%;}
footer {clear: both;}
}
PC 버전
테블릿 버전
모바일 버전
