커피소개 사이트 만들기
전체 구성과 큰그림
우리가 이번에 만들고자하는 사이트는 커피소개 사이트이다.
사이트는 간단한 동작을 위해 3가지의 nav를 만들고 각 버튼을 누르면 해당글로 이동되는 아주 간단한 기능을 구현 할 것이다.
여기서 모바일의 버전은 480px~720px, 테블릿 버전은 720px~1000px, pc버전은 1000px로 설정 할 것이다. 정확한 화면 구성은 아니지만 실습 간 확인하기 편하기 위해 위와 같이 설정할 것이다.
html의 구성
아래 그림은 pc버전을 도식화 하였다. 우리가 여기서 집중해야 할 부분은 html에 들어가는
header부분, 그리고 내용이 들어가는 section부분과 마지막 footer부분이 있다는 것이다.
그리고 section 부분에는 각 제목, img, 설명이 들어가는 것을 볼 수 있다.
html 코드
코드의 전체적인 구성은 div로 전체로 감싸고 그 안에 header부분, section부분, footer 부분으로 나눌 것이다.
header 부분에는 nav로 list로 만들 것이고 a태그로 href 하여 각 section과 연결할 것이다.
또한 div, img를 넣어 header부분의 밋밋함을 해소한다.
section부분은 3개로 나눈다. intro, map, choice로 나누고 각각의 div 안에는 div / page-title, div/content/div/photo/img로 구성하고 div/text를 추가한다.
마지막 footer는 간단하게 p태그로만 만들 것이다.
또한 스타일은 외부 스타일로 불러와서 가독성을 높일 것이다.
전체적인 구성을 보면 div 태그가 많다. 이유는 div태그에 id, class를 부여하여 스타일링을 손 쉽게하기 위함이다.
<!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/style.css">
</head>
<body>
<!-- 전체를 감싸는 container, id로 만들었다. -->
<div id="container">
<!-- 헤드 -->
<header>
<!-- nav로 리스트화 하고 그안에 a태그로 연결한다. -->
<nav>
<ul>
<li><a href="#intro">카페소개</a></li>
<li><a href="#map">오시는 길</a></li>
<li><a href="#choice">이달의 추천</a></li>
</ul>
<!-- 리스트 밑에 만들 img로 추가하였다.-->
<div id="header_img"><img src="./images/header.jpg" alt="커피"></div>
</nav>
</header>
<!-- 카페소개 -->
<section id="intro" >
<div class="page-title">
<h1>카페 소개</h1>
</div>
<div class="content">
<div class="photo">
<img src="./images/coffee.jpg" alt="커피">
</div>
</div>
<div class="text">
<p>영업 시간 : 오전 9시 ~ 밤 10시</p>
<p>휴무 : 매주 수요일<i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i></p>
</div>
</section>
<!-- 오시는길 -->
<section id="map">
<div class="page-title">
<h1>오시는 길</h1>
</div>
<div class="content">
<div class="photo">
<img src="./images/map.jpg" alt="지도">
</div>
</div>
<div class="text">
<p>서귀포시 안덕면 사계리 000 - 000</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</section>
<!-- 이달의 추천 -->
<section id="choice">
<div class="page-title">
<h1>이달의 추천</h1>
</div>
<div class="content">
<div class="photo">
<img src="./images/ice.jpg" alt="추천">
</div>
</div>
<div class="text">
<h2>핸드드립 아이스 커피</h2>
<ol>
<li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc)넣고 추출을 시작한다.</li>
<li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
</ol>
</div>
</section>
<!-- 푸터 -->
<footer>
<p>My times with Coffee</p>
</footer>
</div>
</body>
</html>css의 구성
css는 mediaquery를 활용하여 pc, 테블릿, 모바일로 나누어 줄 것이며, 각 screen별로 공통요소가 많아 먼저 pc를 대표화면으로 만들고 테블릿, 모바일로 나눌 것이다.
외부 폰트를 가져와 전체 body에 적용하고 작성된 태그와 id, class를 활용하여 스타일링하였다.
css 코드
/* 외부 폰트 설정 */
@font-face {
font-family: "twayair";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twayair.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: "twayair";
}
nav > ul > li {
list-style-type: none;
display: inline-block;
margin-top: 15px;
margin-right: 80px;
margin-bottom: 0px;
}
nav {
background-color: black;
}
a {
text-decoration: none;
color: white;
}
/* pc버전 */
@media screen and (min-width: 1000px) {
#container {
margin: 0 auto;
width: 1000px;
}
#header_img > img {
position: relative;
height: 400px;
width: 100%;
}
#intro {
margin: 0 auto;
padding: 50px;
}
#intro .content {
padding: 20px;
}
#intro > .content > .photo {
visibility: visible;
padding-left: 30px;
float: left;
margin-bottom: 100px;
}
#intro > .text {
float: left;
padding-top: 35px;
padding-left: 100px;
margin-bottom: 100px;
}
#map {
margin-top: 50px;
clear: both;
background-color: gold;
height: 350px;
padding: 50px;
}
#map .page-title {
padding-top: 50px;
}
#map .content {
padding: 20px;
}
#map > .content > .photo {
padding-left: 30px;
float: left;
}
#map > .text {
float: left;
padding-top: 35px;
padding-left: 100px;
}
#choice {
margin-top: 10px;
clear: both;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
#choice > .content > .photo {
overflow: hidden;
background-size: cover;
/* border: 1px solid black; */
border-radius: 70%;
margin-right: 50px;
float: right;
margin-bottom: 50px;
}
#choice > .text {
float: left;
width: 400px;
padding-left: 50px;
}
footer {
color: white;
text-align: center;
background-color: black;
height: 10px;
padding: 50px;
clear: both;
}
footer > p {
margin: 0 auto;
}
}
/* 테블릿 버전 */
@media screen and (min-width: 720px) and (max-width: 1000px) {
#container {
margin: 0 auto;
width: 100%;
}
#header_img > img {
position: relative;
height: 400px;
width: 100%;
}
#intro {
padding-top: 20px;
padding-left: 50px;
width: 250px;
display: inline-block;
}
#intro > .content > .photo {
display: none;
}
#intro > .text {
float: left;
width: 250px;
padding-left: 20px;
}
#map {
float: right;
background-color: gold;
width: 50%;
height: 250px;
}
#map .page-title {
padding-top: 50px;
padding-left: 50px;
}
#map > .content > .photo {
display: none;
}
#map > .text {
padding-left: 100px;
}
#choice {
margin-top: 10px;
clear: both;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
#choice > .content > .photo {
display: none;
}
#choice > .text {
float: left;
width: 100%;
padding-left: 50px;
margin-bottom: 50px;
}
footer {
color: white;
text-align: center;
background-color: black;
height: 10px;
padding: 50px;
width: 100%;
clear: both;
}
footer > p {
margin: 0 auto;
}
}
/* 모바일 버전 */
@media screen and (min-width: 200px) and (max-width: 720px) {
#container {
margin: 0 auto;
/* width: 100%; */
}
nav > ul > li {
margin-right: 5%;
}
#header_img > img {
position: relative;
height: 200px;
width: 100%;
}
#intro {
padding-top: 20px;
padding-left: 50px;
margin-bottom: 50px;
/* width: 100%; */
display: inline-block;
}
#intro > .content > .photo {
display: none;
}
#intro > .text {
float: left;
/* width: 100%; */
padding-left: 20px;
}
#map {
float: left;
background-color: gold;
width: 100%;
height: 200px;
}
#map .page-title {
padding-top: 30px;
padding-left: 50px;
}
#map > .content > .photo {
display: none;
}
#map > .text {
padding-left: 80px;
}
#choice {
clear: both;
padding-top: 10px;
padding-left: 50px;
padding-right: 50px;
}
#choice > .content > .photo {
display: none;
}
#choice > .text {
width: 100%;
padding-left: 50px;
margin-bottom: 50px;
}
footer {
color: white;
text-align: center;
background-color: black;
height: 10px;
padding: 50px;
width: 100%;
clear: both;
}
footer > p {
margin: 0 auto;
}
}
AllTimeDevelop