html css 포트폴리오 과제

hanahana·2022년 10월 2일
CSShtml학원수강
0

HTMLCSS-학원수강

목록 보기
18/18
post-thumbnail

포트폴리오 과제 만들기

  • 세미프로젝트 기간 도중 제출해야 하는 과제였다.
  • 솔직히.. 난감했다, 제작할 시간이 없었기떄문에 세미프로젝트로 시간을 풀로 써도 부족한 때였다.
  • 강사님은 만들었던 페이지를 디자인적으로 좀 추가하여 제출해도 된다고 했지만…
    • 다 알잖아.. 그걸로는 안됐다…..
  • 그래도 내 경우 토요일에 맡은 기능을 전부 제작할수있었기때문에 토~일을 사용하여 어떻게든 완성할수있었다.

참고한 사이트

  • 만들고 있었던것이 레시피 사이트였기때문에 음식으로 호감을 얻을만한 깔끔한 디자인의 사이트를 찾아보았다.
  • 가장 만만한것이 스타벅스였다.
  • 스타벅스 페이지에 들어가면 보이는 애니메이션이나 깔끔한 색체를 흉내내고 싶었다.

애니메이션 만들기

  • 내가 만들고싶었던 애니메이션은 3개였다.
    1. 그림이 나타나는 애니메이션
    2. 스크롤에 따라 글자가 왼쪽에서 오른쪽으로 밀려 등장하는 애니메이션
    3. 텍스트가 하나씩 올라와 공지사항같은 게시글을 하나씩 보여주는 애니메이션
  • 2번에 경우 유튜브에 딱 원하는 강의가 올라와있어 참고할수있었다.

그림이 나타내는 애니메이션

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#first-img{
    width:20%;
    height: auto;
    position: absolute;
    left: 550px;
    top: 200px;
    z-index: 10;

    animation: fadein 2s;
 
}

#second-img{
    width:30%;
    height: auto;
    position: absolute;
    left: 650px;
    top: 400px;
    z-index: 10;

   
    animation: fadein 3s;
  }

#third-img{

    width:35%;
    height: auto;
    position: absolute;
    left: 250px;
    top: 600px;
    z-index: 10;

   
    animation: fadein 5s;
    
}
  • 오퍼시티를 낮췄다 올리기만하는 간단한 애니메이션이었다.
  • 이 애니메이션의 속도를 각 그림마다 다르게 줘 한개씩 서서히 나타나도록 처기했다.
  • 실은 딜레이를 주고싶었는데 뭐가 잘못됐는지 딜레이는 먹히지 않았다.

글자가 스크롤에 따라 슬라이드 되는 애니메이션

@keyframes slide {
    from{
        opacity: 0;
        left:-500px;

    }

    to{
        opacity: 1;
        left: 400px;
    }
    
}

@keyframes slide1 {
    from{
        opacity: 0;
        left:-500px;

    }

    to{
        opacity: 1;
        left: 780px;
    }
    
}

@keyframes slide-no {
    from{
        opacity: 1;
        left: 400px;

    }

    to{
        opacity: 0;
        left:-500px;
    }
    
}
  • left값을 조절하여 왼쪽에서 오른쪽으로 다시 오른쪽에서 왼쪽으로 갈수있도록 만들어진 애니메이션이다.
  • 오퍼시티도 활용하여 빠져나가면 투명도가 높아져 안보이게 된다.
  • 이건 css로 처리하지않고 javascript를 활용해 애니메이션을 적용하였다.
window.addEventListener('scroll',function(){

    if(window.scrollY>1300){
        document.querySelector('.text').style.animation='slide-no 1s ease-out forwards';

    }
    
    if(window.scrollY>300&&window.scrollY<1200){
        document.querySelector('.text').style.animation='slide 1s ease-out forwards';

    }

    if(window.scrollY>1300){
        document.querySelector('.text1').style.animation='slide-no 1s ease-out forwards';

    }
    
    if(window.scrollY>300&&window.scrollY<1200){
        document.querySelector('.text1').style.animation='slide1 1s ease-out forwards';

    }
});
  • window.scrollY를 이용하여 스크롤의 값에 따라 스크롤의 값이 일정이상이 되면 slide 애니메이션이 실행되고 그것보다 더 커지면 슬라이드가 밖으로 빠져나가는 애니메이션이 실행된다.
    • ease-out은 부드러운 애니메이션이 실행되도록 하는것이고 forwards는 애니메이션의 최종 상태값을 고정하는것이다.
    • window.scrollY의 값을 확인하고 싶다면 개발자도구 콘솔에서 window.scrollY를 치면 현재 윈도우 스크롤의 값을 확인할수있고 내가 원하는 스크롤이 되었을때의 값을 확인하여 그 값을 자바사크립트에 넣어주면 된다.

글 목록이 올라오는 애니메이션

@keyframes uplist {
   0% {
   opacity: 3;
   transform: translateY(1.5rem);
       }
   8% {
   opacity: 3;
   transform: translateY(1.5rem);
       }

   16%{
    opacity: 3;
    transform: translateY(0rem);
   
   }
   24% {
    opacity: 3;
   transform: translateY(0rem);
   }
   32%{
    opacity: 3;
    transform: translateY(-1.5rem);
   }
   40%{
    opacity: 3;
    transform: translateY(-1.5rem);
   }
   48%{
    opacity: 3;
    transform: translateY(-3rem);

   }
   56%{
    opacity: 3;
    transform: translateY(-3rem);

   }
   64%{
    opacity: 3;
    transform: translateY(-4.5rem);

   }
   72%{
    opacity: 3;
    transform: translateY(-4.5rem);

   }
   80%{
    opacity: 3;
    transform: translateY(-6rem);

   }
   88%{
    opacity: 3;
    transform: translateY(-6rem);

   }
   96%{
    opacity: 3;
    transform: translateY(-7.5rem);

   }
   100%{
    opacity: 3;
    transform: translateY(-7.5rem);

   }
   
}

ul{
    font-family: 'Poor Story';
    animation: uplist 8s ease-in-out;
    animation-iteration-count: infinite;

}
  • 복잡해 보일수 있지만 간단하다 목록이 움직일수 있도록 translateY 값을 서서히 조종해주며 한동안 그 값이 멈춰있다가 다시 올라가길 바랐기때문에 대략 내가 올라가길 원하는 목록의 갯수를 판단하여 %로 나누어 여기에서는 대략 8%정도 가만히 있었다가 다시 8%동안 올라가고 다시 8%멈춰있고를 반복하도록 하였다.
  • 목록에 animation에 해당 애니메이션을 추가하고 걸리는 시간을 넣어주고 infinite를 통해 계속 반복되게 해주었다.

index.html

나머지는 적절한 그림을 넣어주고 배경을 고정하는 정도라서 특별한 css나 애니메이션은 없었다

<header>
        <div id="header-area" class="container">
            <div class="row">
                <div id="logo-area" class="col-md-3">  
                  <a href="index.html">  <img src="./resourcess/img/rogo-001.png" ></a>
                </div>
                <div id="menu-area" class="col-md-7 row">
                   
                        <div class="col-4 li" id="drink">DriNk
                            
                        </div>

                        <div class="col-4 li"id="meal">
                            <a href="./maelList.html">
                                MeAl
                                </a>
                           

                        </div>
                        <div class="col-4 li"id="dessert">
                            <a href="recipeList.html">

                                dEsseRt
                            </a>
                            

                        </div>

                     
                </div>
                <div id="search-area" class="col-md-2 row">
                    <div class="col-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="goldenrod" class="bi bi-search-heart" viewBox="0 0 16 16">
                            <path d="M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z"/>
                            <path d="M13 6.5a6.471 6.471 0 0 1-1.258 3.844c.04.03.078.062.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1.007 1.007 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5ZM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z"/>
                        </svg> 
                    </div>
                    <div class="col-9" id="search-text-area">    
                        <input type="text" class="form-control">
                    </div>
            </div>
        </div>
        </div>
    </header>
    <main>
        <section>
            <article id="first-articl-area">

                <div id="img-area container">
                    
                    <img src="./resourcess/img/food-g2c81c5036_1280.png" id="first-img">
                    <img src="./resourcess/img/cocktail-g3259db902_1920.png" id="second-img">
                    <img src="./resourcess/img/birthday-cake-g399104801_1280.png" id="third-img">
                </div>
            </article>
            <article>
                <div id="second-article-area" class="row" >
                   
               
                    <div class="col-md-6 row col-12" id="notice-area">
                        <div class="col-md-6 col-12" id="notice-title-area">
                            <a href="./qna.html" style="color: white;">
                            고객센터</a>
                        </div>
                        <div class="col-md-6 col-12" id="notice-li-area">
                            <ul>
                                <li><a style="color:white" href="./qnadetail.html">맛있는 레시피를 만드는 방법</a></li>
                                <li><a style="color:white" href="./qnadetail.html">아이디를 찾을 수 없을 때</a></li>
                                <li><a style="color:white" href="./qnadetail.html">회원가입은 어떻게 할수있나요?</a></li>
                                <li><a style="color:white" href="./qnadetail.html">수집하는 개인정보</a></li>
                                <li><a style="color:white" href="./qnadetail.html">우리 할머니가 만든 수제파이의 비밀</a></li>

                            </ul>

                        </div>
                    
                    
                    </div>
                    <div class="col-md-6 col-12" id="event-area">추천 레시피
                        <svg id="down-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="goldenrod" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
                        </svg>

                        <svg id="up-icon" style="display:none" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="goldenrod" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
                        </svg>
                    </div>
                    <div class="" id="secret-area" style="display: none;">
                        
                        <div class="card float-start m-5" style="width: 18rem;">
                            <img src="./resourcess/img/macarons-g51353eac7_640.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Lorem, ipsum.</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, eos.</p>
                            <a href="./recipeDetail.html" class="btn btn-outline-success">Go recipe</a>
                            </div>
                        </div>

                        <div class="card  float-start m-5" style="width: 18rem;">
                            <img src="./resourcess/img/breakfast-gfabc7f2c4_640.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Lorem, ipsum.</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cupiditate alias possimus.</p>
                            <a href="#recipeDetail.html" class="btn btn-outline-success">Go recipe</a>
                            </div>
                        </div>

                        <div class="card  float-start m-5" style="width: 18rem;">
                            <img src="./resourcess/img/berry-gc21ba96b5_640.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Lorem.</h5>
                            <p class="card-text text-truncate"  style="max-width: 150px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique non quibusdam debitis quas, repellendus omnis inventore voluptatibus amet tempore dicta animi hic ab numquam neque quam soluta iste odit magni.</p>
                            <a href="./recipeDetail.html" class="btn btn-outline-success">Go recipe</a>
                            </div>
                        </div>

                    </div>
                    
                    
                    
                    
                </article>

                <article id="article3" class="row">
                        
                    <div class="col-5">
                        <div class="text">
                            cReate
                            <br> 
                            yoUr
                            <br>
                            REciPe!
                        </div>
                    </div> 
                    <div class="col-1">
                        <div class="text1">

                            <br>
                            ⇉
                            <br>
                        </div>
                    </div>
                    <div class="col-6" id="pola-img">
                        <img src="./resourcess/img/polaroid-gf0b3f934b_640.png" >  
                        <br>
                        <button type="button" class="btn" style="background-color: white;" onclick="location.href='./recipeWrite.html'">Write Recipe</button> 
                    </div> 
                    
                  
                </article>

                <article id="blank-area">
                    <span id="blank-im-area">
                    <img src="./resourcess/img/easter-g2936e6b68_1280.jpg" id="blank-img">
                    </span>
                    <span id="blank-text-area">
                       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta, eveniet!
                    </span>
                    
                </article>

                <article id="last-area">
                    <h1> Lorem.</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, labore impedit! Quia sint doloremque consequuntur a laborum est sapiente perspiciatis, repellat eum vitae? A fugit facere quo eius rerum laudantium!<br>
                        Nesciunt, officiis sequi. Laborum commodi laboriosam a delectus porro perferendis eos magnam doloremque libero nihil saepe consequuntur quo incidunt ipsum aut at ullam molestiae fuga voluptates obcaecati dolorem, voluptate provident.<br>
                        Laudantium, error accusamus exercitationem eum incidunt eos! Voluptas quos autem magnam laboriosam asperiores consequuntur eaque velit facilis ratione dignissimos placeat blanditiis architecto inventore a omnis accusantium atque, molestias earum. Hic.<br>
                        Officiis inventore rem recusandae adipisci a veritatis quasi, obcaecati, fuga saepe laudantium veniam error officia, natus explicabo voluptatem voluptatibus? Officia ut nihil possimus eligendi et, dolorum fugit odit dignissimos rem.<br>
                        A facere vitae impedit officiis rem expedita modi praesentium dicta, nulla exercitationem amet perferendis assumenda doloremque corporis eius fugiat. Neque nam repellendus id sequi praesentium quia quam, nihil voluptates aliquam?<br>
                        Earum, inventore esse exercitationem, fuga amet nobis beatae quod vero adipisci aliquam commodi eum. Obcaecati odio minus unde omnis? Repellat id harum officia eius exercitationem consequatur at. Laudantium, tenetur fuga.<br>
                        Ipsum perspiciatis nulla ab exercitationem debitis at aut nobis itaque mollitia fuga eligendi soluta qui facilis culpa distinctio reiciendis, officia libero, quos magni hic ex reprehenderit cupiditate enim sit! Dolore?<br>
                        Expedita eaque amet illum molestiae explicabo veritatis rem quisquam harum impedit, soluta fuga vitae odit suscipit, quod architecto recusandae? Deserunt temporibus ipsum numquam iure fuga itaque id eveniet. Et, quisquam.<br>
                        Eveniet obcaecati asperiores ex quod iusto libero eos numquam perspiciatis minima dolores consectetur, voluptate temporibus nihil ipsa odio modi consequuntur nisi aut architecto rerum veritatis possimus! Totam, quibusdam? Asperiores, quas.<br>
                        Totam quo quis illum qui illo ducimus, sit odit, obcaecati, saepe cupiditate iusto! Eos iste rerum temporibus dolorum libero praesentium recusandae alias eaque? Deleniti quia mollitia quos, repellendus molestiae saepe!<br></p>

                </article>
                

                
            
        </section>
        

    </main>
    
        
        <footer class="row row-cols-5 py-5">
            <div class="col">
               <p>© 2022 Hana Nam</p>
               <a href="https://github.com/hana78786" target="_blank">

                   <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="black" class="bi bi-git" viewBox="0 0 16 16">
                       <path d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457"/>
                    </svg>

                </a>
                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                    <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
                  </svg>

                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
                  </svg>
            </div>
        
            <div class="col">
                <h5>Section</h5>
                회사소개
                
            </div>
            <div class="col">
                <h5>Section</h5>
                오시는길
                
            </div>
            <div class="col">
                <h5>Section</h5>
                이용약관
                
            </div>
            <div class="col">
                <h5>Section</h5>
                개인정보취급방침
                
            </div>
           
        
        </footer>
header{
 width:100%;
 height: 10rem;
 background-color: rgba(253, 252, 247, 0.554);
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 position:fixed;
 z-index: 9;

}

article{
    margin: 0 auto;
    padding:0;
    width: 100%;
}
a:hover{
    color:black;
}

#first-articl-area{
    background-image: url('../img/sea-g925a84aa4_1920.jpg');
    background-attachment: fixed;
    background-repeat : no-repeat;
    background-size : cover;
    width: 100%;
    height: 70rem;
    
}

#second-article-area{

    background-color: black;
    width: 100%;
    height:3rem;
    margin: 0 auto;
    
}

#notice-area{
    color:aliceblue;
    font-weight: 600;
    font-family: 'Poor Story';
    margin-top: 1rem;
    overflow: hidden;
    height: 1.5rem;
}

#event-area{
    background-color: aliceblue;
    height: 100%;
    font-family: 'Poor Story';
    padding-top: 1rem;
    font-weight: 600;
    width: 50%;
    margin-right: 0;

}
#notice-title-area{
    font-family: 'Poor Story';
    font-weight: 600;
    text-align: right;
}

ul{
    font-family: 'Poor Story';
    animation: uplist 8s ease-in-out;
    animation-iteration-count: infinite;

}
#pola-img .btn:hover{
    background-color: #504324 !important;
}

li{
    list-style: none;
}
#article3{
    width: 100%; 
    height:40rem; 
    background-image: url('../img/wood-g2043bfcae_1920.jpg');
    background-repeat: no-repeat;
    color: white;
    margin: 0 auto;
    background-attachment: fixed;
    background-size: cover;
    position: relative;

}
#article3>div{
  
    font-size: 4.5rem;
   
    text-align: left;
    
  
}
#article3>.col-5{
    padding-left: 400px;
    
}

.text{
    position: absolute;
    
}

.text1{
    position: absolute;
    
}

@keyframes slide {
    from{
        opacity: 0;
        left:-500px;

    }

    to{
        opacity: 1;
        left: 400px;
    }
    
}

@keyframes slide1 {
    from{
        opacity: 0;
        left:-500px;

    }

    to{
        opacity: 1;
        left: 780px;
    }
    
}

@keyframes slide-no {
    from{
        opacity: 1;
        left: 400px;

    }

    to{
        opacity: 0;
        left:-500px;
    }
    
}

@keyframes uplist {
   0% {
   opacity: 3;
   transform: translateY(1.5rem);
       }
   8% {
   opacity: 3;
   transform: translateY(1.5rem);
       }

   16%{
    opacity: 3;
    transform: translateY(0rem);
   
   }
   24% {
    opacity: 3;
   transform: translateY(0rem);
   }
   32%{
    opacity: 3;
    transform: translateY(-1.5rem);
   }
   40%{
    opacity: 3;
    transform: translateY(-1.5rem);
   }
   48%{
    opacity: 3;
    transform: translateY(-3rem);

   }
   56%{
    opacity: 3;
    transform: translateY(-3rem);

   }
   64%{
    opacity: 3;
    transform: translateY(-4.5rem);

   }
   72%{
    opacity: 3;
    transform: translateY(-4.5rem);

   }
   80%{
    opacity: 3;
    transform: translateY(-6rem);

   }
   88%{
    opacity: 3;
    transform: translateY(-6rem);

   }
   96%{
    opacity: 3;
    transform: translateY(-7.5rem);

   }
   100%{
    opacity: 3;
    transform: translateY(-7.5rem);

   }
   
}
   
a{
    text-decoration: none;
    color:black;
}
 hr{
    margin: 0;
 }

footer{
    color:black;
    
    width: 100%;
    height: 10rem;
    background-color: rgba(253, 252, 247, 0.554);
   
   
}

footer>.col:not(:last-child){
      
    border-right: 1px solid lightgray;
}

div{
    text-align: center;
    height: 100%;
    margin:0 auto;
    font-family: 'Roboto Mono', monospace;
}
img{
    width: auto ;
    height: 100%;

}
#menu-area{

    text-align:center;
}

.li{
    font-family: 'Roboto Mono', monospace;
    padding-top: 6rem;
    font-size: 1.5rem;
}

#search-area{
    padding-top: 6rem;

}
#img-area{
    position: relative;

}
#first-img{
    width:20%;
    height: auto;
    position: absolute;
    left: 550px;
    top: 200px;
    z-index: 10;

    animation: fadein 2s;
  
    -moz-animation: fadein 2s;
   
    /* Firefox */
    -webkit-animation: fadein 2s;
    
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    
    /* Opera */
   

}

#second-img{
    width:30%;
    height: auto;
    position: absolute;
    left: 650px;
    top: 400px;
    z-index: 10;

   
    animation: fadein 3s;
    -moz-animation: fadein 3s;
    /* Firefox */
    -webkit-animation: fadein 3s;
    /* Safari and Chrome */
    -o-animation: fadein 3s;
    /* Opera */

}

#third-img{

    width:35%;
    height: auto;
    position: absolute;
    left: 250px;
    top: 600px;
    z-index: 10;

   
    animation: fadein 5s;
    
    -moz-animation: fadein 5s;
    /* Firefox */
    
    -webkit-animation: fadein 5s;
    /* Safari and Chrome */
   
    -o-animation: fadein 5s;
    /* Opera */
}

#secret-area{
    background-color: aliceblue;
    height: 30rem;
    width: 100%;
    z-index: 100;
    
    display: flex;
    justify-content: center;

}
.card{
    height: 400px;

}
#pola-img{

    overflow: hidden;
}
#pola-img>img:hover,.li:hover{
    transform: scale(1.1);
    transition: 1s;

}

#article3 img{
    width: 100%;
    height: auto;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {

    /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {

    /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {

    /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.smallmenu{
    background-color: rgba(253, 252, 247, 0.554);
    width: 100%;
    opacity: 0;
    position: abposition;
    height: 0
}

#blank-area{

    text-align: center;
}
#blank-img{
    width:30%; 
    height:auto;
}
#blank-img2{
    width:30%; 
    height:auto;
}
#blank-text-area{
    opacity: 0;
}

#blank-area:hover #blank-text-area{
    opacity: 1; 
    transition-duration: 1s;
}

#last-area{
    text-align: center;
    padding-top: 10rem;
    color:aliceblue;
    height: 40rem;
    background-image: url('../img/sea-g925a84aa4_1920.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Open Sans', sans-serif;
}

@media all and (max-width: 500px) {
    #first-img{
        width: 70%;
        height: auto;
        position: absolute;
        left: 0px;
        top: 300px;
        z-index: 10;
    

    
    }
    
    #second-img{
        width:90%;
        height: auto;
        position: absolute;
        left: 0px;
        top: 500px;
        z-index: 10;
    

    
    }
    
    #third-img{
    
        width:100%;
        height: auto;
        position: absolute;
        left: 0px;
        top: 800px;
        z-index: 10;

    }

    #search-area{
        padding-top: 0rem;
    
    }

    .li{
        font-family: 'Roboto Mono', monospace;
        padding-top: 0rem;
        font-size: 1.5rem;
        height: 50px;

    }
    #menu-area{

        height: 50px;
    }

    header{
        height: 20rem;
    }

    img{
        width: 50% ;
        height: auto;
       
    
    }
    #logo-area{
        height: 200px;
    }

    #first-articl-area{

        height: 70rem;
    }
    #second-article-area{
        height: 3rem;
    }
    #evet-area{
        width: 100%;
    }

    svg,[type="text"],#search-text-area,#search-area{
        height: 50px;
    }
    #event-area{
        margin-left: 0px;
        width: 100%;

    }
    #notice-title-area{
        text-align: left;
    }
    #secret-area{
        display: block; 
        justify-content:'';
        height: 100rem;
        display: flex;justify-content: flex-end;flex-direction: column;align-items: center;

        
    }
    #logo-area{
        width: 100px;
        height: auto;
    }
    #header-area>.row{
        align-content: flex-start;
    }
    header{
        height: 200px;
    }

    @keyframes slide {
        from{
            opacity: 0;
            ;
    
    
        }
    
        to{
            opacity: 1;
            ;
        }
        
    }
    
    @keyframes slide1 {
        from{
            opacity: 0;
            ;
    
    
        }
    
        to{
            opacity: 1;
            ;
        }
        
    }
    
    @keyframes slide-no {
        from{
            opacity: 1;
           ;
    
    
        }
    
        to{
            opacity: 0;
           ;
        }
        
    }

  }

이렇게 인덱스 파일만 구성한 뒤 나머지는 세미프로젝트에서 사용했던 레시피와 게시판을 가지고 와 해더워 푸터, 배경을 추가해준 정도이다.

어려웠던 부분

  • 시간이 오래 걸린건 사실이지만 어려웠던 부분은 크게 없었는데, 간과했던 부분이 있었다.
  • liveserve는 해당 디렉토리를 서버로 파악하여 상대경로 없이 절대경로로 css나 이미지를 파악하지만 html파일을 그냥 실행하면 무조건 상대경로를 넣어줘야 파악할수 있다는것이다
  • 제출 후에 알게되어 경로를 전부 수정하여 다시 재출하였다. 이미지나 css의 경로를 ./를 표기하여 반드시 상대경로로 인식하게 해줘야 받는 사람이 정상적으로 포트폴리오를 볼수있으니 이런 디테일은 꼭 기억해야 할것같다, 기껏 만들어놓은 애니메이션도 이미지나 배경도 출력되지 않으면 너무 아까우니까

결과물

https://hana78786.github.io/Study_hana/2022_06_dev/html_example/

여기에서 확인할수있다!

profile
hanahana
hello world
이전 포스트

51. html CSS 문제풀이

0개의 댓글