[Yelpcamp 프로젝트] 디자인 수정

웹 프로그래밍

[Yelpcamp 프로젝트] 디자인 수정

미안하다 강림이 좀 늦었다 2023. 12. 10. 22:55

지도 축소/확대 버튼 추가

index 페이지와 show 페이지에 있는 지도에 축소/확대 버튼을 추가해 보자. 아래 페이지를 참고했다.

https://docs.mapbox.com/mapbox-gl-js/example/navigation/

Display zoom and rotation controls | Mapbox GL JS

Add zoom and rotation controls to the map.

docs.mapbox.com

index와 show페이지에 연결된 각각의 js 파일에 아래 코드를 추가해주면 된다.

map.addControl(new mapboxgl.NavigationControl());

Home 디자인

정말 못생긴 Home 페이지 입니다. 그럴싸하게 수정해 봅시다.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YelpCamp</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/home.css">
</head>

<body class="d-flex flex-column vh-100 bg-dark">
    <header class="container">
        <div class="row">
            <div class="col-6 offset-3">
                <nav class="navbar navbar-expand-lg py-3">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">YelpCamp</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                            <div class="navbar-nav">
                                <a class="nav-link" aria-current="page" href="/">Home</a>
                                <a class="nav-link" href="/campgrounds">Campgrounds</a>
                                <a class="nav-link" href="/campgrounds/new">New Campground</a>
                            </div>
                            <div class="navbar-nav ms-auto">
                                <% if (!currentUser) { %>
                                    <a class="nav-link" href="/register">Register</a>
                                    <a class="nav-link" href="/login">Login</a>
                                    <% } else {%>
                                        <a class="nav-link" href="/logout">Logout</a>
                                        <% } %>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

    </header>

    <main class="container text-center m-auto">
        <div class="row">
            <div class="col-6 offset-3">
                <h1>YelpCamp</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque eos sint, et hic dolorem dicta earum
                    necessitatibus odio accusamus cumque laborum fugiat ratione veniam! Assumenda iure voluptatem
                    necessitatibus
                    explicabo porro.</p>
            </div>
        </div>
        <a href="/campgrounds" class="btn mt-2">View Campgrounds</a>
    </main>

    <footer class="mt-auto">
        <footer class="footer py-3 mt-auto">
            <div class="container text-center">
                <span class="text-secondary">&copy; YelpCamp 2023</span>
            </div>
        </footer>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
    <script>
</body >
</html >

css

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("https://images.unsplash.com/photo-1496947850313-7743325fa58c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    background-position: bottom;
}

main {
    color: white;
}

h1 {
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn {
    background-color: rgb(255, 255, 255, 0.3);
    color: white;
    font-size: 1.1rem;
    font-weight: bolder;
}

.btn:hover {
    background-color: rgb(255, 255, 255, 0.7);
    color: black;
}

.nav-link {
    color: rgb(148, 148, 148);
    border-bottom: 0.25rem solid transparent;
}

.nav-link:hover {
    color: rgb(204, 204, 204);
    border-bottom-color: rgb(204, 204, 204);
    /*border-bottom-color: rgb(204, 204, 204); */
}

.navbar-brand {
    color: white;
    margin-right: 1rem;
}

.navbar-brand:hover {
    color: white;
}

.navbar-toggler {
    background-color: rgb(255, 255, 255, 0.3);
}

반응형 웹

새로운 캠핑장을 생성하는 페이지와 수정하는 페이지에서 Medium을 이용해 보자. Medium인 경우 화면의 절반을 차지하고 Medium 미만인 경우 화면 가로 전체를 차지하게 한다.

new.ejs와 edit.ejs에서 아래 부분에 md를 추가해 주면 된다.

<div class="col-6 offset-3">

<div class="col-md-6 offset-md-3">