[S GALLERY] 데이 Final 01

sooj·2021년 7월 10일
0
post-thumbnail

마지막 01

배경 사진을 넣어보았다.
첫 페이지의 코드를 본다.

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

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S GALLERY main</title>

    <style>
        * {
            font-family: 'Gothic A1', sans-serif;
        }

        .mainimg {

            width: 100%;
            height: 100%;
            background-image: url(https://images.unsplash.com/photo-1517691748-56ee7506215a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
            background-position: center;
            background-size: cover;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -1;
            opacity: 1;

        }


        .Stitle {
            color: rgb(255, 255, 255);
            text-align: center;
            margin-top: 250px;
            margin-bottom: 200px;


        }

        .Stitle>h1 {
            font-size: 150px;
            margin-bottom: 0;

        }


        .Stitle>a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            padding: none;
            transition: 0.5s;
            background-color: #ffffff00;
            border: 0;
            outline: 0;
            font-size: 50px;
            margin-bottom: 0;
            cursor: pointer;


        }

        .Stitle>a:hover {
            text-shadow: 5px 5px 10px #ddd;

        }
    </style>
</head>
<body>
    <div class="mainimg">
        <div class="Stitle">
            <h1>S GALLERY</h1>
            <a href="/gohome"> Entrance </a>
        </div>

    </div>


</body>

</html>

Entrance 누르면 두번째 페이지가 나온다.

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

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S GALLERY city home</title>

    <style>
        * {
            font-family: 'Gothic A1', sans-serif;
        }

        .homeimg {
            background-image: url(https://images.unsplash.com/photo-1490430657723-4d607c1503fc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
            z-index: 1;
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -1;
            opacity: 0.7;

        }


        .Stitle {
            color: rgb(255, 255, 255);
            text-align: center;

            margin-top: 250px;
            margin-bottom: 200px;

        }

        .Stitle>h1 {
            font-size: 110px;
            margin-bottom: 0;
        }

        .city {
            text-align: center;
            width: 100%;
        }

        .city>a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            padding: none;
            transition: 0.5s;
            text-align: center;
            background-color: #ffffff00;
            border: 0;
            outline: 0;
            font-size: 35px;
            margin: 0 50px 0 50px;
            cursor: pointer;
        }

        .city>a:hover {
            text-shadow: 5px 5px 10px #ddd;
        }
    </style>
</head>

<body>

    <div class="homeimg">
        <div class="Stitle">
            <h1>Which do you wanna go</h1>
        </div>

        <div class="city">
            <a class="c1" href="/view/1">Newyork</a>
            <a class="c2" href="/view/2">Los Angeles</a>
            <a class="c3" href="/view/3">Seattle</a>
        </div>
    </div>
</body>

</html>

뉴욕을 들어가보면,

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

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <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.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>S GALLERY nyc</title>
</head>
<style>
    * {
        font-family: 'Gothic A1', sans-serif;
    }

    body {
        height: 100vh;
        background-image: url(https://images.unsplash.com/photo-1492541737557-dfd592c6e42d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2850&q=80);
        background-repeat : no-repeat;
        background-size : cover;

      }

    .wrap {
        background: rgba(255, 255, 255, 0.5);

    }
    .City {
        color: black;
        font-size: 45px;
        text-align: center;
        padding-top: 20px;
        background: rgba(255, 255, 255, 0.5);
        
    }
    .bt {
        padding-bottom: 25px;

    }
    .h {
        color: black;
        cursor: pointer;
        text-decoration: none;
        float: left;
        margin-left: 200px;

    }
    .h:hover {
        text-decoration: none;
        color: black;
    }
    .b {
        color: black;
        cursor: pointer;
        text-decoration: none;
        float: left;
        margin-left: 30px;
    }
    .b:hover {
        text-decoration: none;
        color: black;
    }
    .p {
        color: black;
        cursor: pointer;
        text-decoration: none;
        float: right;
        margin-right: 200px;
    }
    .p:hover {
        text-decoration: none;
        color: black;
    }
    .cardbox{
        width: 75%;
        padding-top: 20px;
        margin:auto;
    }    
</style>

<script type="text/javascript">

$(document).ready(function () {
    cardpic()
})
    function cardpic() {
         
        $.ajax({
            type: "GET",
            url: `/gall?ncity=newyork`,
            data: {},
            success: function (response) {
                let sgalls = response['sgalls']
                for(let i =0; i<sgalls.length; i++) {
                    let img = sgalls[i]['img']
                    let title = sgalls[i]['title']
                    let id= sgalls[i]['_id']
                                      

                    let temp_html =`<div class="card">
                                        <a target="_self" href="../gall1?id=${id}" class="card-title">
                                                <img class="card-img-top"
                                                     src="../static/${img}"
                                                     alt="Card image cap">

                                                <div class="card-body">
                                                    <p>${title}</p>                                    
                                                    </div>
                                                </a>
                                            </div>`
                            $('#phocard').append(temp_html)
                }
            }
        })
    }
</script>

<body>
    <div class="City">Newyork</div>
    
    <div class="wrap">

        <div class="bt">
            <a class="h" href="/">Home</a>
            <a class="b" href="/gohome">Back</a>
            <a class="p" href="/posting">New post</a>
        </div>

        <hr style="height:1px; width:1100px; border-width:0; color:black; background-color:black">

        <div class="cardbox">

            <div id="phocard" class="card-columns"></div>
        </div> 
    </div>

</body>
</html>

미리 입력해놓은 사진 카드들이 뜬다. 그 중 하나를 클릭해보면

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

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <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.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <title>S GALLERY 01</title>

    <style>
        * {
            font-family: 'Gothic A1', sans-serif;
        }

        body{
            
            background: url(https://images.unsplash.com/photo-1501270067467-8298cce1babb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2726&q=80);
            background-repeat: no-repeat;
            background-size: cover;

        }

        .gallpg {
            overflow:hidden;
            height: auto;          
            background-color: rgba( 255, 255, 255, 0.6);
        }


        .Btitle {
            color: black;
            font-size: 45px;
            text-align: center;
            padding-top: 20px;
            margin-bottom: 10px;
        }

        .bt {
            padding-bottom: 25px;
        }

        .h {
            color: black;
            cursor: pointer;
            text-decoration: none;
            float: left;
            margin-left: 50px;
        }

        .h:hover {
            text-decoration: none;
            color: black;
        }

        .b {
            color: black;
            cursor: pointer;
            text-decoration: none;
            float: left;
            margin-left: 30px;
        }

        .b:hover {
            text-decoration: none;
            color: black;
        }

        .p {
            color: black;
            cursor: pointer;
            text-decoration: none;
            float: right;
            margin-right: 50px;
        }

        .p:hover {
            text-decoration: none;
            color: black;
        }

        .contents {
            width: 75%;
            padding-top: 20px;
            margin: auto;
        }

        .postbox {

            float: left;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 40px auto 0px auto;
        }

        .title {
            margin: 30px, 0, 20px, 40px;
            width: 100%;
            font-size: 50px;
            line-height: center;
            color: black;
        }


        .story {
            margin-top: 20px, 0, 0, 0;
            width: 100%;
            font-size: 20px;
            line-height: center;
            color: black;
        }

        .address {
            margin-top: 20px;
            width: 100%;
            font-size: 20px;
            line-height: center;
            color: black;
        }

        .img {

            max-width: 100%;
            height: 720px;
            align-items: center;
            background-image: url();
            background-position: center;
            background-size: cover;
        }

        .D {
            width: 100%;
            color: black;
            cursor: pointer;
            text-decoration: none;
            line-height: center;
            margin-left: 1000px;
            margin-bottom: 50px;
        }

        .D:hover {
            text-decoration: none;
            color: black;
        }
    </style>

    <script type="text/javascript">

        $(document).ready(function () {
            viewpic()

        })

        function viewpic() {

            let query = location.search.substring(1)
            let pos = query.indexOf('=')
            let id = query.substring(pos + 1)

            $.ajax({
                type: "GET",
                url: `/coll?id=${id}`,
                data: {},
                success: function (response) {
                    console.log(response)

                    let sgall = response['sgall']
                    let ncity = sgall['ncity']
                    let img = sgall['img']
                    let title = sgall['title']
                    let story = sgall['story']
                    let address = sgall['address']

                    let temp_html = `<div class="Btitle">${ncity}</div>
                                        <div class="bt">
                                            <a class="h" href="/main" >Home</a>
                                            <a class="b" href="#" >Back</a>
                                            <a class="p" href="/posting" >New post</a>
                                        </div>
                                        <hr style="height:1px; width:1100px; border-width:0; color:gray; background-color:gray">
                                            <div class="img" id="img">
                                                <img src="../static/${img}" class="card-img-top"></div>
                                                    <div class="postbox">
                                                        <div class="title" id="title">
                                                            <p>${title}</p>
                                                        </div>
                                                        <div class="story" id="story">
                                                            <p>${story}</p>
                                                    </div>
                                                    <div class="address" id="address">
                                                        <p>${address}</p>
                                                    </div>
                                    
                                                    <div class="Delete">
                                                        <a class="D">Delete</a>
                                                    </div>
                                    
                                                </div>`


                    $('#container').append(temp_html)
                }
            })
        }
    </script>
</head>

<body>
    <div class=gallpg>
        <div class=Btitle></div>
        <div class="wrap">
            <div class="contents" id="container"></div>
        </div>
    </div>
</body>

</html>

post 페이지에서 내가 입력했던 내용과 주소 나온다.
다음이야기는 다음장에서 이어서.

profile
개발일지 모음집

0개의 댓글