웹 프론트엔드(Web Front-end) 코슐랭가이드 소개 프로젝트 - 2

프로젝트/Web / / 2021. 3. 12.
반응형

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

1. 주제

- 맛집을 알려주는 코슐랭가이드 프론트 제작

 

2. 개발인원

- 2명

 

3. 개발 기간

- 2021년 3월 5일 10AM ~ 2021년 3월 5일 5PM

 

4. 사용 언어 / 툴

- HTML, CSS / VScode

1. Main 페이지의 프론트

- BootStrap 이용 아래 프론트 화면 중 상단 구성

- Logo, 공지사항, 게시판, 로그인, 회원가입 메뉴 구성

- 검색 UI 구현

- 스크롤 아래로 이동 시 Logo가 있는 메뉴바 고정

 

2. Main 페이지의 프론트 2번째

- 스크롤 아래로 이동 시 Logo가 있는 메뉴바 고정

- 아래의 맛집 블럭 구현

- 화면을 줄일 경우 크기에 맞게 사진과 칸 변경

 

3. Main 페이지의 프론트 3번째

- Bootstrap 이용 이미지 화살표 이동

- 네이버 Map API 이용하여 네이버 Map Display

 

4. Main 페이지의 프론트 4번째

- 공지사항과 게시판 프론트 구성

<보완해야 할 점>

1. 프론트 공부를 거의 처음이라 HTML/CSS가 많이 부족하다!

2. 검색 기능을 위한 JS 공부 필요

3. 프론트 공부는 홈페이지 코드좀 뜯어보면서 공부해야겠다.

4. 부트스트랩 뜯어보기

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<style>
		.title{
			font-size: 20px;
			font-weight: 600;
			color:#373737;
			text-align: left;
		}
		.etc{
			color:#979797;
			font-size: 15px;
			font-weight: 600;
		}
	
	</style>
<title>Cochelin Guide</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
  <a class="navbar-brand" href="javascript:void(0)">
  	Cochelin Guide
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link text-primary" href="table.html">공지사항</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-danger" href="javascript:void(0)">게시판</a>
      </li>
    </ul>
    <ul class="navbar-nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link text-danger" href="javascript:void(0)">로그인</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">회원가입</a>
      </li>
    </ul>
    <ul class="navbar-nav justify-content-end" style="display: none">
      <li class="nav-item">
        <a class="nav-link text-primary" href="javascript:void(0)">로그아웃</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-danger" href="javascript:void(0)">마이페이지</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">관리자</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron text-center text-white d-flex justify-content-center" style=" height:500px; margin-bottom:0;	background-image: url('img/main-image.png');
	background-repeat: no-repeat; background-size: cover;">
  <div class="mt-5">
	  <h1 class="mb-5">코슐랭 가이드!!</h1>
	  <form class="form-inline mt-5 justify-content-center" action="/action_page.php" style="width:800px; text-align:center;">
		  <input type="search" class="form-control mt-5 border border-right-0 border-info rounded-0" placeholder="맛집, 지역 검색" id="search" style="width:500px;">
		  <button type="submit" class="btn btn-primary mt-5 rounded-righ" style="width:100px;" disabled="disabled">검색</button>
	  </form>
  </div> 
</div>
<div class="container-sm">
	<div class="font-weight-bold mt-2 mb-2" >
		<h3 class="text-info">코집사 추천 맛집!</h3>
	</div>
	<div class="row card-deck mt-3 " style="height:300px;">
		<div class="col-sm-3 card border-0" style="height:100%;" >
		  <div class="wapper h-50 w-100">
	  	  	<img class="card-img-top" src="img/주인의 주방.jpg" alt="profile" style="height:100%; width:100%;object-fit: cover;" >
	  	  </div>
		  <div class="card-body p-1" style="text-align:left">
			  <span class="title" >주인의 주방</span>
			  <p class ="etc">전북대 - 야키니쿠</p>
			  <a href="./html/detail_ju.html" class="stretched-link"></a>
		  </div>
		</div>
		<div class="col-sm-3 card border-0" style="height:100%;">
		  <div class="wapper h-50 w-100">
	  	  	<img class="card-img-top" src="img/먹짜.jpg" alt="profile" style="height:100%; width:100%;object-fit: cover;" >
	  	  </div>
		  <div class="card-body p-1" style="text-align:left">
		  	<span class="title">먹짜</span>
			<p class ="etc">전북대 - 돈까스</p>
			<a href="./html/detail_muk.html" class="stretched-link"></a>
		  </div>
		</div>
		<div class="col-sm-3 card border-0 " style="height:100%;">
			<div class="wapper h-50 w-100">
				<img src="img/향미각.jpg" class="card-img-top" alt="profile" style="height:100%; width:100%;object-fit: cover;">
			</div>
			<div class="card-body p-1" style="text-align:left">
				<span class="title">향미각</span>
				<p class ="etc">전북대 - 짬뽕</p>
				<a href="./html/detail_hyang.html" class="stretched-link"></a>
			</div>
		</div>
		<div class="col-sm-3 card border-0" style="height:100%;">
			<div class="wapper h-50 w-100">
				<img src="img/신가화로.jpg" class="card-img-top" alt="profile" style="height:100%; width:100%;object-fit: cover;">
			</div>
			<div class="card-body p-1" style="text-align:left">
				<span class="title">신가화로</span>
				<p class ="etc">전북대 - 삼겹살</p>
				<a href="./html/detail_shin.html" class="stretched-link"></a>
			</div>
		</div>
	</div>
	<div class="row card-deck mb-3" style="height:300px;">
		<div class="col-sm-3 card border-0" style="height:100%;">
			<div class="wapper h-50 w-100">
				<img src="img/규카츠정.jpg" class="card-img-top" alt="profile" style="height:100%; width:100%;object-fit: cover;">
			</div>
			<div class="card-body p-1" style="text-align:left">
				<span class="title">규카츠정</span>
				<p class ="etc">전주 객사 - 규카츠</p>
				<a href="./html/detail_gyu.html" class="stretched-link"></a>
			</div>
		</div>
		<div class="col-sm-3 card border-0" style="height:100%;">
		  <div class="wapper h-50 w-100">
	  	  	<img class="card-img-top" src="img/뼈대있는 집.jpg" alt="profile" style="height:100%; width:100%;object-fit: cover;" >
	  	  </div>
		  <div class="card-body p-1" style="text-align:left">
				<span class="title">뼈대있는 집</span>
				<p class ="etc">전남대 - 감자탕</p>
				<a href="./html/detail_bbyu.html" class="stretched-link"></a>
			</div>
		</div>
		<div class="col-sm-3 card border-0" style="height:100%;">
			<div class="wapper h-50 w-100">
				<img src="img/코우텐동.jpg" class="card-img-top" alt="profile" style="height:100%; width:100%;object-fit: cover;">
			</div>
			<div class="card-body p-1" style="text-align:left">
				<span class="title">코우텐동</span>
				<p class ="etc">순천 신대지구 - 텐동</p>
				<a href="./html/detail_ko.html" class="stretched-link"></a>
			</div>
		</div>
		<div class="col-sm-3 card border-0" style="height:100%;">
			<div class="wapper h-50 w-100">
				<img src="img/청혜참치.jpg" class="card-img-top" alt="profile" style="height:100%; width:100%;object-fit: cover;">
			</div>
			<div class="card-body p-1" style="text-align:left">
				<span class="title">청혜참치</span>
				<p class ="etc">전주 아중리 - 참치회</p>
				<a href="./html/detail_chung.html" class="stretched-link"></a>
			</div>
		</div>
	</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <ul class="list-group list-group-horizontal justify-content-end" >
    <li class="list-group-item bg-transparent" style="border:0;font-size: 12px;"><a href="https://yongku.tistory.com/" target="_blank">코집사블로그</a></li>
    <li class="list-group-item bg-transparent disabled" style="border:0;font-size: 12px;">개인정보처리방침</li>
    <li class="list-group-item bg-transparent disabled" style="border:0;font-size: 12px;">이용약관</li>
    <li class="list-group-item bg-transparent disabled" style="border:0;font-size: 12px;">오시는길</li>
    <li class="list-group-item bg-transparent disabled" style="border:0;font-size: 12px;">ⓒCopyRight</li>
   </ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>공지사항</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="contatiner">
    <h1 align="center">공지사항</h1>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
            <th>조회수</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>우왕우왕우와왕</td>
            <td>조용구</td>
            <td>2021.03.10</td>
            <td>100</td>
          </tr>
          <tr>
            <td>2</td>
            <td>흐르는 강물을 거꾸로</td>
            <td>조용구</td>
            <td>2021.03.10</td>
            <td>101</td>
          </tr>
          <tr>
            <td>3</td>
            <td>거슬러 오르는 연어맛집은 전북대학교 소몽</td>
            <td>조용구</td>
            <td>2021.03.10</td>
            <td>102</td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr />
    <div align="right">
    <button type="button" class="btn btn-primary">글쓰기를 하고 싶죠? 소용없습니다. 그만 누르세요 :D</button>
    </div>
    <div class="text-center">
      <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
      </ul>
    </div>
    <div align="center">
    <a href="index.html"><button type="button" class="btn btn-primary">메인페이지로 돌아가기</button></a>
    </div>
  </body>
</html>
반응형
저작자표시

'프로젝트 > 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) 코슐랭가이드 소개 프로젝트  (0) 2021.03.08
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
프로젝트/Web 관련 글
글 더보기

티스토리툴바