본문 바로가기
웹

덕담 보내기, 주기 토이프로젝트

by Rudy 2022. 2. 1.

1. 나에게 덕담을 보낼 수 있는 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새해복 많이 받으세요~!</title>
    <meta property="og:title" content="새해복 많이 받으세요!!!"/>
<meta property="og:description" content="숨겨진 메세지를 클릭해서 확인해보세요..♥"/>
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9X1ct%2Fbtrr2thZmK7%2FTxhfak9oSFjaI4GUYaf07k%2Fimg.png"/>
    <style>
        @font-face {
         font-family: 'Cafe24Ssurround';
         src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
        }

        * {
        font-family: 'Cafe24Ssurround';
            }
        .background{
            width:100vw;
            height:100vh;
            max-width:450px;
            background-image:url('https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpn972%2Fbtrr6AUIlIK%2FDEpQhKAoKKD4kQ0RKz2sI1%2Fimg.png');
            background-position:center;
            background-size:cover;
            margin:auto;
        }
        body,h1,p{
            margin:0;
            
        }
        .title{
            color:rgb(168, 222, 230);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding-top:5vh;
        }
        .title>h1{
            font-size:22px;
            background-color:rgb(22, 19, 80);
            padding:8px 16px;
            border-radius:16px;
            margin-bottom:16px;
        }
        .title>p{
            font-size:18px;
            color:rgb(22, 19, 80);
        }
        .title>p>span{
            font-size:22px;
        }
        .btn{
            width:300px;
            height:50px;
            background-color:rgb(22, 19, 80);
            color:rgb(168, 222, 230);
            font-size:18px;
            border-radius:10px;
            cursor:pointer;
            
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            position:fixed;
            bottom:220px;
            left:calc(50% - 150px);
        }
        .box>img{
            width:70px;
            position:absolute;
            bottom:55%;
            left:36%;
        }
        .box2>img{
            width:70px;
            position:absolute;
            bottom:55%;
            left:52%;
        }
    </style>
 <script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script> <script> let mycode = '68c6a30d3b010583e5cd7e9e122243d9'; </script>
</head>
<body>
    <div class="background">
        <div class="title">
            <h1>새해편지</h1>
            <p>받은 덕담: <span>2개</span></p>
        </div>
        <div class="box">
            <!--
            <img onclick="alert('벌써 2022년이 된 지도 일 년이 지났네 만난지 엄청 오래된 것 같은 기분! 벌써 이렇게 시간이 흐르다니 믿기지 않고 항상 고마워 늘 좋은 일만 있었으면 좋겠고, 2022년 남은 11개월 아픈 일 슬픈 일 없이 행복한 일들만 가득 있었으면 좋겠어 늘 고마워♥ 새해복 많이 받아 아리언니!')" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciG0tA%2Fbtrsc0ZVAJg%2FkIMd7LhHossMYVAWAHbyKk%2Fimg.png">-->
        </div><!--
        <div class="box2">
            <img onclick="alert('힘든 일 많이 없었으면 좋겠고, 괴롭히는 사람 있으면 꼭 말해야해 내가 다 때려준다 회사 많이 힘들지...? 덕질도 현생도 늘 힘내서 하는 언니가 멋있어!')" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjClB8%2Fbtrr2XqkWpW%2FQShmWmxZDR9ZE1rmWRuoHK%2Fimg.png">
        </div>-->
    <div class="btn">덕담 보내기</div>
    </div>
    
</body>
</html>

개인 도메인: http://rainysunnyday.dothome.co.kr/umu/

결과물>

 

2. 내가 직접 덕담을 보내는 코드 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새해복 많이 받으세요~!</title>
    <meta property="og:title" content="새해복 많이 받으세요!!!"/>
<meta property="og:description" content="숨겨진 메세지를 클릭해서 확인해보세요..♥"/>
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9X1ct%2Fbtrr2thZmK7%2FTxhfak9oSFjaI4GUYaf07k%2Fimg.png"/>
    <style>
        @font-face {
         font-family: 'Cafe24Ssurround';
         src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
        }

        * {
        font-family: 'Cafe24Ssurround';
            }
        .background{
            width:100vw;
            height:100vh;
            max-width:450px;
            background-image:url('https://blog.kakaocdn.net/dn/bb4aSh/btrr2WrsT8W/7S7QNQshQZ4AidNJ0mionK/img.png');
            background-position:center;
            background-size:cover;
            margin:auto;
        }
        body,h1,p{
            margin:0;
            
        }
        .title{
            color:rgb(168, 222, 230);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding-top:5vh;
        }
        .title>h1{
            font-size:22px;
            background-color:rgb(22, 19, 80);
            padding:8px 16px;
            border-radius:16px;
            margin-bottom:16px;
        }
        .title>p{
            font-size:18px;
            color:rgb(22, 19, 80);
        }
        .title>p>span{
            font-size:22px;
        }
        .btn{
            width:300px;
            height:50px;
            background-color:rgb(22, 19, 80);
            color:rgb(168, 222, 230);
            font-size:18px;
            border-radius:10px;
            cursor:pointer;
            
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            position:fixed;
            bottom:220px;
            left:calc(50% - 150px);
        }
        .box>img{
            width:70px;
            position:absolute;
            bottom:55%;
            left:36%;
        }
        .box2>img{
            width:70px;
            position:absolute;
            bottom:55%;
            left:52%;
        }
    </style>
 <!--<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script> <script> let mycode = '68c6a30d3b010583e5cd7e9e122243d9'; </script>-->
</head>
<body>
    <div class="background">
        <div class="title">
            <h1>언니에게 주는 우무편지</h1>
           <!-- <p>받은 덕담: <span>2개</span></p>-->
        </div>
        <div class="box">
            
            <img onclick="alert('벌써 2022년이 된 지도 일 년이 지났네요 만난지 엄청 오래된 것 같은 기분! 사실... 이제 반년 됐습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 벌써 이렇게 시간이 흐르다니 믿기지 않고 항상 고맙습니다 늘 좋은 일만 있었으면 좋겠고, 2022년 남은 11개월 아픈 일 슬픈 일 없이 행복한 일들만 가득 있었으면 좋겠어요 늘 감사합니다♥ 새해복 많이 받아요!')" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciG0tA%2Fbtrsc0ZVAJg%2FkIMd7LhHossMYVAWAHbyKk%2Fimg.png">
        </div>
        <div class="box2">
            <img onclick="alert('힘든 일 많이 없었으면 좋겠고, 앞으로는 행복한 일들만 가득하길! 취업 화이팅!!!!!!!')" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjClB8%2Fbtrr2XqkWpW%2FQShmWmxZDR9ZE1rmWRuoHK%2Fimg.png">
        </div>
    <!--<div class="btn">덕담 보내기</div>-->
    </div>
    
</body>
</html>

개인 도메인: http://rainysunnyday.dothome.co.kr/umu/eunbi/

결과물>

후기

html 구조와 css에 대해서 간단하게 복습을 할 수 있는 재미있었던 토이프로젝트였다. 2022년 1월 31일... 설 연휴 전날 쉬려고 하다 스파르타코딩클럽에서 산타파이브 프로젝트와 비슷한 거를 무료강의로 풀었길래 관심있어서 한번 신청해서 들어봤다. VS코드에서 alt+B를 누르면 바로 웹브라우저를 켤 수 있다는 사실을 몰랐는데, 알게되어서 좋았고. CSS 구조 중에,

.box2>img{
            width:70px;
            position:absolute;
            bottom:55%;
            left:52%;
        }

 

이렇게 html 태그 속성?들을 하나하나 가리켜서 스타일 적용을 할 수 있는 줄 몰랐다.

 

그 외에, 포인터를 가져다대면 아이콘(?)이 바뀌게 하려면 cursor:pointer; 를 사용하면 된다는 것과 left:calc(50% - 150px); 를 통해 위치를 계산해서 조정할 수 있다는 것, width:100vw; height:100vh; max-width:450px; 를 통해 모바일환경 맞춤을 위해서 화면을 늘릴 때 만들어둔 페이지 화면도 같이 늘어나도록, 하지만 PC유저를 위해 어느 정도 선에서는 늘어나지 않게 조정할 수 있다는 것을 새롭게 알게 되어 좋았다.

 

짧은 무료특강 치고 알뜰살뜰하게 좋은 내용을 많이 담은 것 같아 만족스럽다. 무엇보다 재미있었다. 하지만 프론트엔드적인 부분만 있어서 백엔드를 파고 있는 나로서는 아쉽긴 했다. JS코드도 궁금했지만, AWS 서버에 올려놓고 그대로 적용하게 해서 HTML, CSS만 사용해봤다. 그리고 도메인도 제공해주었는데... 서버비 엄청 들 것 같은데 괜찮은건가? 이 생각이 들었다. 제공해줬던 JS코드도 개인별로 db에 메시지가 저장되는?(확실히는 모르겠지만, 그렇게 짐작하고 있다. let my code 부분의 코드를 바꾸니까 메시지 저장이 다르게 됐으니까.) 코드가 다르던데 아직 잘 모르는게 많아서 그런 처리도 어떻게 하는 건지 궁금했다.

 

아무튼 뭔가 서버를 제공해준 쪽의 서버보다 내가 가지고 있는 도메인이 있으니까 FileZilla로 디렉터리 생성해서 거기에다 이번에 만든 토이프로젝트를 넣었다. 그런데 JS에 무언가 처리를 해두어서, JS 코드를 적용시키니까 서버에 올리면 내가 적용한 백그라운드 이미지가 안 뜨고 호랭이가 뜨길래 아쉬운 마음에, 조금 응용해보기로 했다.

 

나에게 덕담을 보내는 페이지를 완성한 것을 바탕으로, 내가 직접 하나하나 메시지를 넣어서 지인들에게 보내는 페이지. 지인들 개인별로 디렉터리를 만들어서 거기에다 개별 메시지를 넣은 index.html 를 넣는다... 그렇다... 정말 비효율적인 노가다다. 하지만 지금으로썬 다른 방법이 안 떠오르니 그냥 내가 깜짝 새해 편지 보내고 싶은 사람들 대상으로 아주아주아주 극소수만 메세지를 코드에 넣어서 사이트 링크를 보내줬다. 덕담 보내기 버튼이랑 받은 덕담: 갯수는 삭제했다. 그냥 단순히 아이콘만 클릭하면 내가 적어둔 편지만 얼럿창으로 보여주는 사이트다. 이 단순한 걸 보내줘도 감동이라고 한다. 나도 감동이다. 역시 사람은 마음이 가장 중요하다.

 

'웹' 카테고리의 다른 글

이미지  (0) 2022.01.31
21. 간이 쇼핑몰 페이지 만들기  (0) 2021.09.11
20. 영화 리뷰 메모장(2)  (0) 2021.09.10
19. 메모장(1)  (0) 2021.09.08
18. 모두의 북리뷰 페이지 만들기  (0) 2021.09.06

관련글

댓글

티스토리툴바