[도쿄의 사계] #2021/1/14 개발일지

What I did

<사전준비>

・　sport-DB의 시트 작성 및 구조 표 작성
・　질문&답변 작성하고 카테고리 그룹과 연결시키기 (재확인)

<메인페이지>

・　Trasnlation 드롭 박스 바깥쪽 눌러도 닫히게 하기
(모든 페이지에 다 동일하게 적용시켰다)

・　START 버튼을 멋있게 꾸며봤다!

본래의 기본 구조는 남기면서 새로운 클래스로 스타일을 먹였다.

🎈

<div class="wrapper">
    <a href="#" id="openModal" class="fancy-button pop-onhover bg-gradient3"
       onclick="match()"><span>START</span></a>
</div>

    /* General */
    .wrapper {
        margin: 5% auto;
        text-align: center;
        transform-style: perserve-3d;
        perspecive: 800px;
    }

    a {
        text-decoration: none;
    }

    a:hover, a:focus, a:active {
        text-decoration: none;
    }

    /* fancy Button */
    .fancy-button {
        display: inline-block;
        margin: 30px;
        font-family: "Montserrat", Helvetica, Arial, sans-serif;
        font-size: 17px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #ffffff;
        position: relative;
    }

    .fancy-button:before {
        content: "";
        display: inline-block;
        height: 40px;
        position: absolute;
        bottom: -5px;
        left: 30px;
        right: 30px;
        z-index: -1;
        border-radius: 30em;
        filter: blur(20px) brightness(0.95);
        transform-style: preserve-3d;
        transition: all 0.3s ease-out;
    }

    .fancy-button i {
        margin-top: -1px;
        margin-right: 20px;
        font-size: 1.265em;
        vertical-align: middle;
    }

    .fancy-button span {
        display: inline-block;
        padding: 18px 60px;
        border-radius: 50em;
        position: relative;
        z-index: 2;
        will-change: transform, filter;
        transform-style: preserve-3d;
        transition: all 0.3s ease-out;
    }

    .fancy-button:focus, .fancy-button:active {
        color: #ffffff;
    }

    .fancy-button:hover {
        color: #ffffff;
    }

    .fancy-button:hover span {
        filter: brightness(1.05) contrast(1.05);
        transform: scale(0.95);
    }

    .fancy-button:hover:before {
        bottom: 0;
        filter: blur(10px) brightness(0.95);
    }

    .fancy-button.pop-onhover:before {
        opacity: 0;
        bottom: 10px;
    }

    .fancy-button.pop-onhover:hover:before {
        bottom: -7px;
        opacity: 1;
        filter: blur(20px);
    }

    .fancy-button.pop-onhover:hover span {
        transform: scale(1.04);
    }

    .fancy-button.pop-onhover:hover:active span {
        filter: brightness(1) contrast(1);
        transform: scale(1);
        transition: all 0.15s ease-out;
    }

    .fancy-button.pop-onhover:hover:active:before {
        bottom: 0;
        filter: blur(10px) brightness(0.95);
        transition: all 0.2s ease-out;
    }
    

꽤 길다.. 그래도 그라데이션과 번지는 고급 효과가 구현되서 기쁘다...!!!

・　start버튼 위의 문장도 멋지게 꾸미기

이것 저것 검색하다가 발견한건데 스타트 버튼과 비슷한 느낌이고 도쿄 타워 와도 색깔이 비슷해서 너무 만족!
색깔을 두개 입히니까 더 깊이 있어 보이는 효과도..

🎈

     <h2 class="subtitle2">
    나의 취향에 꼭 맞는 도쿄의 관광 명소를 매칭해 보자!
</h2>

   .subtitle2 {
        position: absolute;
        top: 40%;
        left: 24%;
        color: whitesmoke;
        font-size: 38px;
        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
        color: #fff6a9;
        animation: blink 8s infinite;
        -webkit-animation: blink 8s infinite;

・　시즌 페이지 구조 만들기

Doing...

・　질문지 완성시키기 (명소들을 최대한 매치되도록)
・　시즌 페이지에 부트 스트랩에서 찾은 카드 코드 붙이기
・　봄, 여름, 가을, 겨울 사이즈에 맞는 사진 찾기
(의외로 같은 사이즈의 마음에 드는 사진을 찾기가 힘들다..)

그리고! 블루마도 그렇지만 부트스트랩도 적용시키기 위해서는 꼭 관련 CSS 를 넣어줘야한다!!!

🎈 블루마

<!-- Bulma CSS 링크 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"/>

🎈 부트스트랩

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

What to do

・　오늘 부터 금요일 까지는 면담 후의 숙제 집중하기!!

1. 새로운 스타트 페이지 안에 질문 답변 카드 만들기
   부트 스트랩에서 가져온 카드 코드로 일단 기능 없이 다 보이도록 만들고, 가로 정렬 시기키. 기본적으로는 세로 정렬이 되어 버리기 때문에 따로 코드를 먹여줘야 할 것 같다.

2. 엑셀의 새로운 시트에 데이터 베이스에 넣을 관광 명소명, 이미지 파일명, 주소 등 정리해서 50개의 관광 명소 정보 입력하기

3. 시즌 페이지의 카드도 동일하게 가로 정렬, 이미지 삽입, 글 삽입등 꾸며주기

4. footer 찾아보기!

Comment ＆ Thought

-CSS 어렵지만 너무 재밌다....
-하루 2개 이상 질문 (튜트님께 죄송...) & 폭풍 검색
-메인페이지만 잘 꾸며놔도 멋지군 후후..
-배너를 바꾸고 싶지만 전체를 다 건드려야 해서 어려울듯 ㅠㅠ