log

준비하기
1) 큰 이미지 1920*800 이상
2) 비, 눈, 낙엽, 다른 거 아무거나 떨어지는 거가 있는 이미지
3) 음악 / 음악이 있는 영상 ost
4) 문구
5) 메뉴명

준비완료!
1) 파도 그림
2) 눈효과랑 물효과랑 섞어서 효과 이미지 만듦
3) 음악 :
4) 문구 : crest
5) 메뉴 : home/ about / pattern / object / contanct

생뚱맞은 간격이 생기지 않도록 bg1에게 width 100%
overflow: hidden x축과 y축으로 가능

- html -
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>crest</title>
    <style>
        *{margin: 0; padding: 0;}
        li {list-style: none;}
        a {text-decoration: none; color: #000;}
        img {vertical-align: top;}
        .bg_box .bg1 img {width: 100%;}

    </style>
</head>

이미지가 작은 사람은 아래처럼 하면 화면에 꽉차게 됨.

- html -
.bg_box .bg1 img {width: 100%; height: 100vh; object-fit :cover;}

· · · · · · · · · · · · · · · ·

-1차-

- html -
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>crest</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

    <style>
        *{margin: 0; padding: 0;}
        li {list-style: none;}
        a {text-decoration: none; color: #000;}
        img {vertical-align: top;}

        /* body {overflow: hidden;} */
        
        body {font-family: "Cormorant Garamond";}
        

        .bg_box .bg1 img {width: 100%;}

        header {position: absolute; min-width: 1400px; margin: 0 auto; left: 50%; transform: translateX(-50%); 
               display: flex; justify-content: space-between; align-items: center; width: 100%;}
        header h1 {width: 100px;}
        header h1 img {width: 100%;}
        header nav {}
        header nav.gnb {display: flex;}
        header nav.gnb li {font-size: 22px;}
        header nav.gnb li a {color: #fff; display: block; padding: 10px 30px;}


    </style>
</head>


<body>
    <div class="wrap">
        <header> 
            <h1><img src="image/logo.png" alt=""></h1>
            <nav>
                <div class="gnb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Pattern</a></li>
                    <li><a href="#">Object</a></li>
                    <li><a href="#">Contanct</a></li>
                </div>
            </nav>
        </header>
        <div class="bg_box">
            <div class="bg1">
                <img src="image/wavebg.png" alt="">
            </div>
        </div>
    </div>
</body>


</html>

· · · · · · · · · · · · · · · ·

마우스 올리면 글자가 커지는 효과 만들기

- css -
        header nav .gnb li {font-size: 22px; transition: 0.25s;}
        header nav .gnb li a {color: #fff; display: block; padding: 10px 30px;}

        header nav .gnb:hover li {transform: scale(0.9); opacity: 0.7;}
        header nav .gnb li:hover {transform: scale(1.2); opacity: 1;}
        header nav .gnb li:hover a {color: #fff;}

오디오 넣기 (이거 쓰면 화면에 자체 조절가능이 뜸)

- html -
<audio src="image/music.mp3" controls></audio>

쉐도우는 겹쳐서 사용 가능

· · · · · · · · · · · · · · · ·

animation을 주면 0-100까지만 시행되는게 아니라, 1-2-3-4-1 이런식으로 반복이 됨.

-2차-
뭔가 이상하긴 한데 효과가 위에서 아래라 그려러니.

- html -
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>crest</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

    <style>
        *{margin: 0; padding: 0;}
        li {list-style: none;}
        a {text-decoration: none; color: #000;}
        img {vertical-align: top;}

        body {overflow-y: hidden;}
        
        body {font-family: "Cormorant Garamond";}
        
        .bg_box .bg1 { width: 100%; height: 100%; }
        .bg_box .bg1 img {width: 100%; height: 100%; object-fit: cover;}

        header {position: absolute; max-width: 1400px; margin: 0 auto; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 3;}
        header h1 {width: 100px;}
        
        header h1 img {width: 100%;}
        header nav {}
        header nav .gnb {display: flex;}
        header nav .gnb li {font-size: 22px; transition: 0.25s; text-shadow: 0 0 20px rgba(0,0,0,1);}
        header nav .gnb li a {color: #fff; display: block; padding: 10px 30px;}

        header nav .gnb:hover li {transform: scale(0.9); opacity: 0.7;}
        header nav .gnb li:hover {transform: scale(1.2); opacity: 1;}
        header nav .gnb li:hover a {color: #fff;}
        .textbox {border: 1px solid #000; position: absolute; right: 260px; top: 50%; transform: translateY(-50%);}
        .textbox ul {display: flex;}
        .textbox li {font-size: 50px; color: #fff; width: 60px;}
        .textbox li span {display: block; padding: 5px 0; animation:text 3s forwards; position: relative; opacity: 0; }
        .textbox li span.mb50 {margin-bottom: 50px;}

        @keyframes text 
        {0% {left: -300px; transform: rotate(20deg) scale(0.3); top: 100px; opacity: 0;}
        
        100% {left: 0; transform: rotate(0) scale(1); top: 0; opacity: 1;}}

        .textbox li:nth-child(2) span:nth-child(2) {animation-delay: 0.1s;}
        .textbox li:nth-child(2) span:nth-child(3) {animation-delay: 0.3s;}
        .textbox li:nth-child(2) span:nth-child(4) {animation-delay: 0.5s;}
        .textbox li:nth-child(2) span:nth-child(5) {animation-delay: 0.7s;}
        .textbox li:nth-child(2) span:nth-child(6) {animation-delay: 0.9s;}
        .textbox li:nth-child(2) span:nth-child(7) {animation-delay: 1.1s;}
        .textbox li:nth-child(2) span:nth-child(8) {animation-delay: 1.3s;}
        .textbox li:nth-child(2) span:nth-child(9) {animation-delay: 1.5s;}
        .textbox li:nth-child(2) span:nth-child(9) {animation-delay: 1.7s;}

        
        .textbox li:nth-child(1) span:nth-child(1) {animation-delay: 3s}
        .textbox li:nth-child(1) span:nth-child(2) {animation-delay: 3.2s}
        .textbox li:nth-child(1) span:nth-child(3) {animation-delay: 3.4s}
        .textbox li:nth-child(1) span:nth-child(4) {animation-delay: 3.6s}
        .textbox li:nth-child(1) span:nth-child(5) {animation-delay: 3.8s}
        .textbox li:nth-child(1) span:nth-child(6) {animation-delay: 4s}
        .textbox li:nth-child(1) span:nth-child(7) {animation-delay: 4.2s}
        .textbox li:nth-child(1) span:nth-child(8) {animation-delay: 4.4s}
        .textbox li:nth-child(1) span:nth-child(9) {animation-delay: 4.6s}
        .textbox li:nth-child(1) span:nth-child(10) {animation-delay: 4.8s}



        .water_box{}
        .water_box .water1 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
        @keyframes water1 {
            0% {background-position: 0 0;}
            100% {background-position: 0 900px;}
        }
         .water_box2{}
        .water_box .water2 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
        @keyframes water2 {
            0% {background-position: 0 0;}
            100% {background-position: 0 900px;}
        }
         .water_box3{}
        .water_box .water3 {position: absolute; background: url(image/effect.png); width: 100%; height: 100vh; left: 0; top: 0; animation: water1 5s infinite linear;}
        @keyframes water3 {
            0% {background-position: 0 0;}
            100% {background-position: 0 900px;}
        }


    </style>
</head>


<body>
    <div class="wrap">
        <header> 
            <h1><img src="image/logo.png" alt=""></h1>
            <nav>
                <div class="gnb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Pattern</a></li>
                    <li><a href="#">Object</a></li>
                    <li><a href="#">Contanct</a>

'web design' 카테고리의 다른 글

04.21 - html 애니메이션 (0)	2026.05.29
04.21 - holo (팀플) (0)	2026.05.29
04.20 (0)	2026.05.29
04.17 - 사각사각 문구점 (섹션 4, 푸터) (0)	2026.05.29
04.16 - 사각사각 문구점 (섹션 3) (0)	2026.05.29

기록

04.20 - html 애니메이션

'web design' 카테고리의 다른 글

티스토리툴바