벡엔드까지 구현하고자 하였지만 오류를 잡기에 시간이 부족하여 프런트만 작성해서 업로드 시켰다.
github public으로 호스팅을 걸었고 링크는 아래와 같다.
ryuhajeffery.github.io/firstExhi/start
해운전 start Page
ryuhajeffery.github.io
3가지 페이지를 제작하였고 소스코드는 조금씩 수정이 되었을 수 있다.
Bootstrap을 큰 틀로 제작하였고 template의 출처는 아래와 같다
startbootstrap.com/theme/grayscale
Grayscale - Free One Page Bootstrap Theme
Grayscale is a free Bootstrap theme with a dark color scheme, smooth scrolling page animations, and a collapsing top navigation bar. It works great for portfolios, businesses, and more!
startbootstrap.com
템플릿 자체는 한 페이지로 제작되었지만 나는 이를 3가지 페이지로 나누어서 각각의 링크로 갈 수 있게 배치시켰다.
start.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>해운전 start Page</title>
<!-- main페이지로 넘어가는 링크를 달 것-->
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="start.html">해운전</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<!-- 여기에는 각 페이지로 넘어갈 수 있게 링크를 달아두는 것으로-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="main.html">Main</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="guestbook.html">Info</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<!--<h1 class="mx-auto my-0 text-uppercase">감정 보다,</h1><br>
<h1 class="mx-auto my-0 text-uppercase">감정, 보다</h1><br>
<h1 class="mx-auto my-0 text-uppercase">,감정 보다</h1><br>-->
<h2 class="text-white-50 mx-auto mt-2 mb-5">2021 First Ryuha photo Personal exhibition</h2>
<a class="btn btn-primary js-scroll-trigger" href="main.html">클릭 -> 전시회 시작</a>
</div>
</div>
</header>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50">
<div class="container">Copyright © ryuha</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="scripts.js"></script>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>해운전 Main page</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="start.html">해운전</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="main.html">Main</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="guestbook.html">Info</a></li>
</ul>
</div>
</div>
</nav>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">해운전<br><br>오늘 당신은 어떠한 감정과 생각을 느끼셨나요?<br><br></h2>
<p class="text-white-60"><br>감정 보다,</p>
<p class="text-white-60">감정, 보다</p>
<p class="text-white-60">,감정 보다</p>
<p class="text-white-50">
저는 프로그램을 짜는 공대생입니다. 가지런히 정리된 코드들을 보고 있다보면 저도 어느순간 시키는 일만 하는 컴퓨터가 된 기분이 듭니다.<br><br>
저는 감정적인 사람입니다. 감정에 매우 몰입하여서 영화와 드라마를 잘 보지 못합니다. 보고 있다보면 너무 빠져들어서 헤어나오기 힘들어합니다.<br><br>
이런 이중적인 저는 사진 찍는 것을 좋아합니다. 한 사람을 프레임에 담다보니 사람들은 어떤 감정을 가지고 있는지 궁금했으며 나는 어떤 감정을 가지고 있는지
궁금했습니다.<br><br>14장의 사진을 준비했습니다. 오늘 여러분은 어떤
감정을 느끼셨나요?
</p>
</div>
</div>
<img class="img-fluid" src="assets/img/frame.jpg" alt="" />
<div class="col-lg-8 mx-auto">
<p class="text-white-60"><br></p>
<p class="text-white-50">
기쁨(喜),<br><br>노여움(怒),<br><br>슬픔(哀),<br><br>두려움(懼),<br><br>좋아함(愛),<br><br>싫어함(惡),<br><br>바람(欲)<br><br><br><br>크게
감정을
7가지로 나누었습니다. 각 감정들 마다 2가지의 사진들을
준비하였으며, <br>어떤 감정인지 생각해보시는 것도 전시 관람에 도움이 되실 것입니다.<br>오늘 여러분은 어떤 생각을 하셨는지, 어떤 감정을 느끼셨는지 고민하시면서 관람 하시길
추천드립니다.
</p>
<p class="text-white-50">
<a href="guestbook.html">전시 상세 안내 링크</a>
</p>
<p class="text-white-60"><br></p>
</div>
</div>
</section>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container">
<!-- Project One Row-->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/ryupersonal.jpg" alt="" /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Photographer - Ryuha</h4>
<p class="mb-0 text-white-50">제가 만든 작품들로 사람들에게 감명을 주는 사람이 되고 싶습니다. 전공은 공대생이지만 사람을 움직이는
음악, 사진 등 예술에도 관심이 많습니다<br><a
href="https://www.instagram.com/ryuha.photo">Instagram</a>
</p>
<hr class="d-none d-lg-block mb-0 ml-0" />
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row-->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/winter.jpg" alt="" /></div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="
h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Model - Winter</h4>
<p class="mb-0 text-white-50">내 생각의 사슬은 일련의 의식 잠을 자기 위한 어떤 것 꿈을 꾸지 않게 해주세요 비는 간절한
기도<br><a href="https://www.instagram.com/wintercomesfast">Instagram</a>
<br><a
href="https://www.youtube.com/channel/UCKVoxRjFPonva0xuGdEwA9g/featured">Youtube</a>
</p>
<hr class="d-none d-lg-block mb-0 mr-0" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50">
<div class="container">Copyright © ryuha</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="scripts.js"></script>
</body>
</html>
guestbook.html
기존에는 백엔드까지 설계하여 방명록 또한 웹으로 받으려 했으나 오류를 잡기에 시간이 부족해 오프라인으로 받는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>해운전 Info</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="start.html">해운전</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="main.html">Main</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="guestbook.html">Info</a></li>
</ul>
</div>
</div>
</nav>
<!-- Signup-->
<section class="signup-section" id="signup">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5"><br>Info</h2>
</div>
<div class="col-lg-8 mx-auto">
<p class="text-white mb-4"><br>이번 전시는 오프라인 전시입니다.</p>
<p class="text-white-50">
3주차 3.15(월) ~ 3.20(토) 한동대학교 학관 2층 중구난방에 전시될 예정입니다. 아쉽게도 이번에는 오프라인 전시회만 진행되지만 올해 여름 서울에서도 동일한 주제로
서울에서 전시를 진행할 예정입니다. 그때는 오프라인 전시 뿐만 아니라 온라인 전시도 계획중에 있기 때문에 관심 있으신분들은 그때 방문해
주시기 바랍니다. 또한 포토북, 엽서등 추후 제작될 예정이므로 그때도 많은 관심 부탁드립니다.
</p><br><br>
<p class="text-white mb-4">전시 관람 후 방명록을 남겨주세요</p>
<p class="text-white-50">
중구난방에 방명록 카드를 준비했습니다. 14장의 사진 관람 후 느낀 점들을 남겨주세요. 좋은 점들도 좋고, 아쉬운 점들도 좋고, 다음 전시때는 이렇게 했으면 좋겠다는 등,
다양한 의견들을 남겨주시면
감사하겠습니다.
</p>
<p class="text-white-50">
<br>
</p>
<p class="text-white mb-4">전시는 후원으로 이루어집니다.</p>
<p class="text-white-50">
14장의 사진들로 여러분들의 마음에 울림이 되었다면 후원을 부탁드립니다. 이번 전시의 큰 힘과, 다음 전시를 준비하는데 또다른 원동력이 될 예정입니다.<br>기업
975-001163-01-019 류운선
</p><br>
<p class="text-white mb-4">무엇보다 첫 개인전시에 관심을 가져주신 분들에게 감사드립니다.</p>
<p class="text-white-50">
저는 남미 여행 이후 사진을 찍기 시작한 후 한번쯤은 한가지 주제를 가지고 개인전을 시작해보고 싶었습니다. 준비가 미흡한 점도 있을 것이고, 혼자서 준비하느라 어려움 점도
많았지만, 많은 분들이 옆에서 함께 도와주셔서 전시를 할 수 있었습니다.<br><br> 모델을 해준 Winter, 웹사이트 제작에 도움을 준 Hyewon, 사진 배치 및 큐레이팅을 해준 새내기
Hannah, 포스터 제작 및 여러방면으로 도움을 준 Sarah, 바쁜 와중에도 개인전시 응원해주고 큰 도움을 준 V.A.M. 사진동아리 친구들, 그리고 이 자리에 와서 전시회를 빛내주신 모든 분들에게 감사드립니다.
</p>
</div>
</div>
<div><br><br><br><br><br><br></div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50">
<div class="container">Copyright © ryuha</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
혼자서 사진, 포스터, 웹 모든 것을 준비하느라 시간이 꽤 걸리긴 하였다.
그러나 주위에서 많은 분들이 도움을 주지 않았으면 어려웠을 것이다. 그 모든 분들에게 감사하다.
내일부터 6일간 전시회가 진행된다. 떨리는 마음으로 잘 마무리 되었으면 좋겠다.
'Programming > 온라인 전시회' 카테고리의 다른 글
| Spring 백앤드 설계 (0) | 2021.02.11 |
|---|---|
| Spring mybatis 순서 및 셋팅 (Project 생성, Java version, pom.xml, web.xml, root-context.xml (0) | 2021.02.11 |
| Mysql DB (0) | 2021.02.11 |
| Spring을 이용한 웹사이트 제작 - 1 (0) | 2021.02.11 |
| 21년도 개인전시회 웹페이지 구축 (0) | 2021.02.10 |
