본문 바로가기

Python_WEB/HTML

HTML5 - 190701 Basic Study 68(Cafe 페이지 제작)

728x90

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<link href="css/ex04.css" rel="stylesheet">
</head>

<body>
<body>
<div id="container">
<div id="panel">
<h1>
여기는 패널창입니다.<br>
옆에서 나오는 창입니다.</h1>
<h2>
<a href="#">[닫기]</a>
</h2>
</div>
  <header>
    <nav>
      <ul id="main-nav">
        <li><a href="#intro">카페 소개</a></li>
        <li><a href="#map">오시는 길</a></li>
        <li><a href="#choice">이 달의 추천</a></li>
      </ul>
      <a href="#panel" class="hambug"> <img src="img/more.png"> </a> </nav>
  </header>
  <div class="mama">
    <section id="intro">
      <div class="page-title">
        <h1>카페 소개</h1>
      </div>
      <div class="content">
        <div class="photo"> <img src="img/coffee.jpg" alt=""> </div>
        <div class="text">
          <p> 영업 시간 : 오전 9시 ~ 밤 10시 </p>
          <p> 휴무 : 매주 수요일 (<i><small>수요일이 공휴일일 경우 수요일 영업, 다음날 휴무</small></i>)</p>
        </div>
      </div>
    </section>
    <section id="map">
      <div class="page-title">
        <h1>오시는 길</h1>
      </div>
      <div class="content">
        <div class="photo"> <img src="img/map.jpg" alt="사계 포구에서 서쪽 방향으로 000미터 진행"> </div>
        <div class="text">
          <p>서귀포시 안덕면 사계리 oooo-ooo</p>
          <p>제주 올레 10코스 산방산 근처</p>
        </div>
      </div>
    </section>
    <section id="choice">
      <div class="page-title">
        <h1>이 달의 추천 </h1>
      </div>
      <div class="content">
        <div class="photo"> <img src="img/ice.jpg" alt="아이스 커피" style="border:1px solid white; border-radius:50%"> </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>
  </div>
  <footer>
    <p>My times with Coffee</p>
  </footer>
</div>
</body>
</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */

* {
	margin: 0 auto;
	padding: 0;
}
/* 공통 스타일 */
body {
	font-family: serif;
}
a {
	text-decoration: none;
}
a:link, a:visited {
	color: white;
}
a:active {
	color: yellow;
}
h1 {
	font-size: 1.8em;
}
h2 {
	font-size: 1.3em;
}
p {
	font-size: 1.3em;
	line-height: 2.5;
}
*#container {
	width: 100%;
}
header {
	width: 100%;
	height: 300px;
	background: url(../img/header.jpg);
	background-size: cover;
}
nav {
	height: 50px;
	background: black;
}
#main-nav {
	padding: 10px;
}
#main-nav li {
	display: inline-block;
	color: white;
	font-size: 0.8em;
	margin: 5px 15px;
	font-family: '맑은 고딕';
}
section {
	width: 100%;
	padding: 15px 5% 10px 5%;
	position: relative;
}
/* 짝수번호 색깔넣기 */
#container section:nth-child(odd) {
	background: #eee;
}
.page-title {
	position: absolute;
	top: 20px;
	left: 0;
	padding: 30px 50px;
}
.page-title h1 {
	margin-bottom: 30px;
}
.content {
	margin: 80px auto 10px;
	width: 90%;
	padding: 20px;
	box-sizing: border-box;
}
.content ol {
	margin-top: 20px;
}
.photo {
	display: none;
}
.text h2 {
	color: #eee;
}
.text li {
	line-height: 2;
	font-size: 1.0em;
}
footer {
	position: relative;
	width: 100%;
	height: 100px;
	background: black;
}
footer p {
	font-family: cursive;
	font-size: 1.5em;
	color: white;
	text-align: center;
	line-height: 100px;
}

/* 태블릿 */
@media all and (min-width:760px) {
header {
	height: 400px;
	transition: 1s;
}
.mama {
	display: flex;
	flex-wrap: wrap; /* 여러줄로 박스 표시 */
}
#intro, #map {
	box-sizing: border-box;
	width: 50%;
	height: 400px;
		/* float:left; */
	border 1px dotted gray;
}
#choice {
	width: 100%;
	background: chocolate !important;/* clear:left; */
}
}

/* PC */
@media all and (min-width:992px) {
#container {
	width: 990px;
	border: 1px solid gray;
}
header {
	height: 500px;
}
#intro, #map, #choice {
	clear: both;
	position: relative;
	width: 100%;
	height: 420px;
	padding: 15px 2% 10px 5%;
}
.content {
	margin: 90px auto 10px;
	width: 90%;
	padding: 20px;
	display: flex;
}
.photo {
	width: 42%;
	display: block;
}
.photo>img {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.text {
	width: 42%;
}
.mama {
/* display:flex; */
}
footer {
	clear: both;
}
}
a.hambug {
	position: absolute;
	display: block;
	background: white;
	padding: 5px;
	right: 5px;
	top: 0;
	border-radius: 5px;
}
nav {
	position: relative;
}
a.hambug img {
	width: 35px;
	height: 35px;
}
#panel {
	width: 90%;
	height: 400px;
	background: ivory;
	position: absolute;
	left: -100%;
	top: 0px;
	transition: 1s;
	box-shadow: 5px 5px 1px black;
	border-radius: 30px;
}
#panel a {
	color: black;
}
.container {
	position: relative;
}
#panel:target {
	left: 0;
	z-index: 1;
	top: 0px;
}
a.hambug:active {
	top: 1px;
}

 

3. 미리보기

< PC >
< PC - 패널 >
< 모바일 >
< 모바일 - 패널 >
< 태블릿 >
< 태블릿 - 패널 >

4. HTML / CSS 파일

ex04.html
0.00MB
ex04.css
0.00MB

반응형