반응형
츄르사려고 코딩하는 코집사입니다.
1. 주제
- 맛집을 알려주는 코슐랭가이드 프론트 제작
2. 개발인원
- 2명
3. 개발 기간
- 2021년 3월 5일 10AM ~ 2021년 3월 5일 5PM
4. 사용 언어 / 툴
- HTML, CSS / VScode
1. Main 페이지의 프론트
- 좌측 상단 Cochelin Guide의 로고와 우측 상단의 메뉴1~4 카테고리 생성
- 검색기능을 적용하기 위한 input 태그와 버튼 추가
2. 각 Menu 이미지 리스트 나열
- 크기가 줄어들면 사진도 크기에 맞게 정렬이 된다.
- 이미지 클릭 시 제목에 맞는 링크로 들어가진다.
<보완해야 할 점>
1. 프론트 공부를 거의 처음이라 HTML/CSS가 많이 부족하다.
2. 검색 기능을 위한 JS 공부
3. 프론트 공부는 홈페이지 코드좀 뜯어보면서 공부해야겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cochelin Guide</title>
<link rel="stylesheet" href="Main.css" />
<script src="Main.js"></script>
</head>
<body>
<div class="header">
<div class="nav">
<div class="header-top">
<a href="index.html" id="logo">Cochelin<br />Guide</a>
<div class="menu">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</div>
</div>
<div class="header-bottom">
<p>코슐랭 가이드!</p>
<fieldset class="search">
<input type="text" id="keyword" placeholder="지역, 식당, 음식" />
<input type="submit" id="btn-search" value="검색" />
</fieldset>
</div>
</div>
</div>
<div class="content">
<h2>코집사 추천 맛집!</h2>
<div class="content-top">
<ul class="list-restaurants">
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%A0%84%EB%B6%81%EB%8C%80%ED%95%99%EA%B5%90-%EA%B5%AC%EC%A0%95%EB%AC%B8-%EC%9D%B4%EC%9E%90%EC%B9%B4%EC%95%BC-%EA%B3%A0%EA%B8%B0%EC%A7%91-%EC%95%BC%ED%82%A4%EB%8B%88%EC%BF%A0-%EC%A3%BC%EC%9D%B8%EC%9D%98-%EC%A3%BC%EB%B0%A9"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="주인의 주방.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">주인의 주방</span>
<p class="etc">전북대 - 야키니쿠</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%A0%84%EB%B6%81%EB%8C%80%ED%95%99%EA%B5%90-%EB%8F%88%EA%B9%8C%EC%8A%A4%EC%A7%91-%EB%A8%B9%EC%A7%9C-%ED%9B%84%EA%B8%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="먹짜.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">먹짜</span>
<p class="etc">전북대 - 돈까스</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%A0%84%EB%B6%81%EB%8C%80%ED%95%99%EA%B5%90%EC%A0%84%EB%B6%81%EB%8C%80%EB%B3%91%EC%9B%90-%EA%B0%84%ED%98%B8%EB%8C%80%EC%9D%98%EB%8C%80-%EA%BC%AC%EB%A7%89%EC%A7%AC%EB%BD%95%EA%B3%BC-%ED%83%95%EC%88%98%EC%9C%A1-%EB%A7%9B%EC%A7%91-%ED%96%A5%EB%AF%B8%EA%B0%81-%ED%9B%84%EA%B8%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="향미각.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">향미각</span>
<p class="etc">전북대 - 짬뽕</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%BD%94%EC%8A%90%EB%9E%AD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%A0%84%EB%B6%81%EB%8C%80%ED%95%99%EA%B5%90-%EC%8B%A0%EC%A0%95%EB%AC%B8-%EA%B3%A0%EA%B8%B0%EB%A7%9B%EC%A7%91-%EC%8B%A0%EA%B0%80%ED%99%94%EB%A1%9C-%ED%9B%84%EA%B8%B0-%EB%B0%8F-%EB%A6%AC%EB%B7%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="신가화로.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">신가화로</span>
<p class="etc">전북대 - 삼겹살</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%BD%94%EC%8A%90%EB%9E%AD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%A0%84%EC%A3%BC-%EA%B0%9D%EC%82%AC-%EA%B7%9C%EC%B9%B4%EC%B8%A0%EC%A7%91-%EB%A7%9B%EC%A7%91-%EA%B7%9C%EC%B9%B4%EC%B8%A0%EC%A0%95-%ED%9B%84%EA%B8%B0-%EB%B0%8F-%EB%A6%AC%EB%B7%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="규카츠정.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">규카츠정</span>
<p class="etc">전주 객사 - 규카츠</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%BD%94%EC%8A%90%EB%9E%AD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EA%B4%91%EC%A3%BC-%EC%A0%84%EB%8C%80-%ED%9B%84%EB%AC%B8-%EA%B0%90%EC%9E%90%ED%83%95%EC%A7%91-%EB%BC%88%EB%8C%80%EC%9E%88%EB%8A%94%EC%A7%91-%ED%9B%84%EA%B8%B0-%EB%B0%8F-%EB%A6%AC%EB%B7%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="뼈대있는 집.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">뼈대있는 집</span>
<p class="etc">전남대 - 감자탕</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%BD%94%EC%8A%90%EB%9E%AD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%88%9C%EC%B2%9C-%EC%8B%A0%EB%8C%80%EC%A7%80%EA%B5%AC-%ED%85%90%EB%8F%99%EB%A7%9B%EC%A7%91-%EC%BD%94%EC%9A%B0%ED%85%90%EB%8F%99-%ED%9B%84%EA%B8%B0-%EB%B0%8F-%EB%A6%AC%EB%B7%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="코우텐동.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">코우텐동</span>
<p class="etc">순천 신대지구 - 텐동</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
<li class="restaurant-item">
<div class="restaurant-wrapper">
<a
href="https://yongku.tistory.com/entry/%EC%BD%94%EC%8A%90%EB%9E%AD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%A0%84%EC%A3%BC-%EC%95%84%EC%A4%91%EB%A6%AC-%EC%B2%AD%ED%98%9C%EC%B0%B8%EC%B9%98-%ED%9B%84%EA%B8%B0-%EB%B0%8F-%EB%A6%AC%EB%B7%B0"
target="_blank"
>
<figure class="r-item">
<div class="thumb">
<img
class="thumb-nail"
src="청혜참치.jpg"
style="display: block"
/>
</div>
<figcaption>
<div class="info">
<span class="title">청혜참치</span>
<p class="etc">전주 아중리 - 참치회</p>
</div>
</figcaption>
</figure>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="https://yongku.tistory.com" target="_blank">코슐랭가이드</a>
</li>
<li>개인정보처리방침</li>
<li>이용약관</li>
<li>오시는길</li>
<li>Copyright © 코슐랭가이드 All Rights Reserved.</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.header{
width: auto;
height: 500px;
position:relative;
}
.nav{
width: auto;
height: 500px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
display:block;
background-image: url("main-image.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
.header-top{
width: auto;
height: 100px;
position: relative;
}
#logo{
position:absolute;
top:10px;
left:20px;
float: left;
color:#e7e7e7;
font-family: fantasy;
font-size: 25px;
font-weight: 400;
letter-spacing:5px;
text-align: center;
}
.menu{
position: absolute;
top: 35px;
right: 0;
}
.menu > ul > li{
float: left;
margin-right: 40px;
}
.menu > ul > li > a{
font-size: 15px;
color: white;
font-weight: 500;
}
.header-bottom{
text-align: center;
width:auto;
height:300px;
}
fieldset{
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding-block-start: 0.35em;
padding-inline-start: 0.75em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
min-inline-size: min-content;
}
.header-bottom p{
color: white;
font-size: 40px;
font-weight: 400;
}
.search{
padding-top:120px;
text-align: center;
border: 0px;
}
#keyword{
border-width: 2px;
border-style: outset;
border-color: #ff8000;
font-size: 20px;
padding-top:10px;
padding-bottom:10px;
padding-left : 30px;
width : 500px;
}
#btn-search{
border-width: 2px;
border-style: outset;
border-radius: 75px;
border-color: #ff8000;
font-size: 20px;
color:white;
padding-top:10px;
padding-bottom:10px;
padding-left:50px;
padding-right:50px;
text-align: center;
background-color: #ff8000;
}
.content{
margin: 10px auto;
max-width: 1800px;
text-align: center;
}
.content > h2{
font-weight: 500;
color:#f76d24;
padding-top: 20px;
padding-left: 80px;
padding-bottom: 15px;
text-align: left;
}
.content-top{
display: flex;
justify-content: center;
}
.content-top > ul{
float:left;
}
.restaurant-item{
display:inline-block;
width: 300px;
margin-right:50px;
margin-left: 30px;
margin-bottom: 20px;
}
.thumb-nail{
width:300px;
height:300px;
overflow: hidden;
}
.title{
font-size: 20px;
font-weight: 600;
color:#373737;
text-align: left;
}
.etc{
color:#979797;
font-size: 15px;
font-weight: 600;
}
.footer {
clear:both;
margin: 10px auto;
padding: 10px;
max-width: 1200px;
height: 70px;
}
.footer > ul {
float: right;
}
.footer > ul > li {
display: inline-block;
margin-right:10px;
margin-right: 10px;
height: 50px;
line-height: 50px;
font-size: 12px;
color: darkgray;
}반응형
'프로젝트 > Web' 카테고리의 다른 글
| 웹 백엔드 DB(Web Back-end DB) Happy House 프로젝트 (0) | 2021.04.14 |
|---|---|
| 웹 백엔드(Web Back-end) Happy House 프로젝트 (0) | 2021.04.03 |
| 웹 프론트엔드(Web Front-end) Happy House 프로젝트 (0) | 2021.03.16 |
| 웹 프론트엔드(Web Front-end) 코슐랭가이드 소개 프로젝트 - 2 (0) | 2021.03.12 |
최근댓글