본문 바로가기
웹/CSS

[코딩 공부_79] hanbom-project 클론코딩 완성

by BEE_0o0 2021. 5. 22.

일주일동안 개인 프로젝트를 하였다! 자신이 하고 싶은 사이트를 골라 클론코딩 하는 시간이었다

선생님께서 예전에 영자닷컴?을 하라고 하셨었는데 새카맣게 까먹고 새로 찾아본 사이트가 hanbom studio였다

(열심히 찾았는데 안하기 쫌 모해서 고집 부렸다 ㅎㅎ... 다 배우고 난 뒤에 해볼 예정이다 허허)

 

한봄스튜디오

Digital Creative Group -The belief of the Mastership

hanbom.com

뭔가 기능이 많아서 공부에 도움되겠구만!하고 했는데 구석구석 파헤쳐보니 온통 자바스크립트 천지였다 ..

자바스크립트로 구현할 수 있는 부분이 5개?였다.. 하지만 자바스크립트를 배우지 않았기 때문에 꼼수 몇개를 부렸다 ㅎㅎ 자세한 내용은 코드를 보여준 후 이야기하도록 하겠다!

 

한봄스튜디오 :: Digital creative

possible. right. happen.

lee-yebin.github.io

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./src/image/header-logo/logo_02.png" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">

<title>한봄스튜디오 :: Digital creative</title>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="inner header__inner">
                <div class="header__logo">
                    <a href="#">
                        <img src="./src/image/header-logo/logo_02.png" alt="">
                        <span class="logo__hanbom-studio">
                            <strong>hanbom</strong><br>
                            <span class="logo__studio">studio</span> 
                        </span>
                    </a>
            </div>
            <div class="gnb-modal">
                <input type="checkbox" id="modal-btn">
                <label for="modal-btn">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <div class="modal-container">
                    <div class="modal-box">
                        <label for="modal-btn">
                            <div><img src="./src/image/modal-left/x.png" alt=""></div>
                        </label>
                        <div class="modal-menu">
                            <h1><a href="#">works</a></h1>
                            <h1><a href="#">company</a></h1>
                            <h1><a href="#">contact</a></h1>
                            <h1><a href="#">inside</a></h1>
                        </div>
                        <span>&copy; <strong>hanbom</strong> studio</span>
                        <div class="modal-left">
                            <div><a href="#"> brochure download <img src="./src/image/modal-left/ico_download.png" alt=""></a> <br>
                                <a href="#">blog <img src="./src/image/modal-left/ico_blog.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <label for="modla-btn"></label>
                </div>
            </div>
            <div class="popup-banner">
                <button class="popup-banner__5th-anni">
                    <a href="#">
                        <img src="./src/image/left-fixed-5th-btn/5th_btn_img.png" alt="popup-banner">
                        <p>
                            5th Anni.
                        </p>
                    </a>
                </button>
                <button class="popup-banner__nominee">
                    <a href="#">
                        <div>w.</div>
                        <p>
                            Nominee
                        </p>
                    </a>
                </button>
            </div>
        </header>
        <section id="intro">
            <div class="intro__main-page">
                <div class="intro__main-page-video">
                    <video width="100%" height="100%" playsinline autoplay muted loop poster="./src/image/intro/intro__main-page.JPG">
                        <source src="./src/vedio/hanbom_summer_main_0513.mp4" type="video/mp4">
                    </video>
                    <div class="main-page__desc-copy">
                        we offer a <br>
                        creative <br>
                    </div>
                </div>
                <div class="inner main-page__inner">
                    <h1 class="main-page__desc">
                            <div class="main-page__desc-real">
                            we offer a <br>
                            creative <br>
                            new direction <br>
                            <div class="main-page__desc__yellow"> 
                                make it <br>
                                <div class="main-page-wrap__message">
                                    <div class="main-page__message">
                                        <span class="message__possible">
                                            possible<i>.</i>
                                        </span>
                                        <span class="message__right">
                                            right<i>.</i>
                                        </span>
                                        <span class="message__happen">
                                            happen<i>.</i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h1>
                </div>
            </div>
        </section>
        <section id="services">
            <div class="inner services__inner">
                <ul class="services__content clearfix">
                    <li class="services__item l-grid-tablet-6-12">
                        <div class="services__photo">
                            <img src="./src/image/services/bg_team_01.gif" alt="planning">
                        </div>
                        <h2 class="services__item-title">Planning</h2>
                    </li>
                    <li class="services__item l-grid-tablet-6-12">
                        <div class="services__photo">
                            <img src="./src/image/services/bg_team_02.gif" alt="design">
                        </div>
                        <h2 class="services__item-title">Design</h2>
                    </li>
                    <li class="services__item l-grid-tablet-6-12">
                        <div class="services__photo">
                            <img src="./src/image/services/bg_team_03.gif" alt="publishing">
                        </div>
                        <h2 class="services__item-title">Publishing</h2>
                    </li>
                    <li class="services__main-cotent l-grid-tablet-6-12">
                        <div class="services__main-title">
                            <h1>services</h1>
                            <p>
                                Digital transformation을 통한 차별화된 <br>
                                Digital Solution을 제공합니다.
                            </p>        
                        </div>
                    </li>
                    <li class="services__item l-grid-tablet-6-12">
                        <div class="services__photo">
                            <img src="./src/image/services/bg_team_04.gif" alt="development">
                        </div>
                        <h2 class="services__item-title">Development</h2>
                    </li>
                </ul>
            </div>
        </section>
        <section id="works">
            <div class="inner works__inner">
                <h1 class="works__title">works</h1>
                <div class="works__5th-anni clearfix l-grid-tablet-12-12">
                    <a href="#">
                        <div class="works__photo">
                            <img src="./src/image/work/1. hanbom_portimg_Thumb_20210428142810.png" alt="hanbom portimg">
                        </div>
                        <div class="works__desc">
                            <h1>
                                HAPPY, 5th <br>
                                Anniversary
                            </h1>
                            <small>
                                Mr.FARMER
                            </small>
                        </div>  
                    </a>
                </div>
                <ul class="works__content">
                    <li class="works__item l-grid-tablet-6-12">
                        <a href="#">
                            <h3 class="works__item-title">페이보릿</h3>
                            <div class="works__item-photo">
                                <img src="./src/image/work/2. hanbom_portimg_Thumb_20210317150847.png" alt="pavorit">
                            </div>
                        </a>
                    </li>
                    <li class="works__item l-grid-tablet-6-12">
                        <a href="#">
                            <h3 class="works__item-title">혁신의 숲</h3>
                            <div class="works__item-photo">
                                <img src="./src/image/work/3. hanbom_portimg_Thumb_20210317151915.png" alt="Forest of innovation">
                            </div>
                        </a>
                    </li>
                    <li class="works__item l-grid-tablet-12-12">
                        <a href="#">
                            <h3 class="works__item-title">타이핑히어로</h3>
                            <div class="works__item-photo">
                                <img src="./src/image/work/4. hanbom_portimg_Thumb_20210317151254.png" alt="typing hero">
                            </div>
                        </a>
                    </li>
                    <li class="works__item l-grid-tablet-12-12">
                        <a href="#">
                            <h3 class="works__item-title">
                                lg dream project: <br>
                                dream play
                            </h3>
                            <div class="works__item-photo">
                                <img src="./src/image/work/5. hanbom_portimg_Thumb_20201211140105.png" alt="Forest of innovation">
                            </div>
                        </a>
                    </li>
                </ul>
                <a href="#" class="works__view-more">
                    <h1>
                        vlew more
                    </h1>
                    <div class="inside__plus-ico">
                        <img src="./src/image/inside/ico_more.png" alt="arrow more">
                    </div>
                </a>
            </div>
        </section>
        <section id="client">
            <div class="inner">
                <ul class="client__item">
                    <li class="client__list">
                        <img src="./src/image/Client/1. partner_pengtai.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/2. partner_wepeak.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/3. partner_jipyong.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/4. partner_pa.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/5. partner_hyundai.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/6. partner_yg.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/7. partner_samsung.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/8. partner_ton.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/9. partner_kgc.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/10. partner_morningprint.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/11. partner_cjenm.jpg" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/12. partner_E_land.png" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/13. partner_lgd.png" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/14. partner_kmong.png" alt="pengtai">
                    </li>
                    <li class="client__list">
                        <img src="./src/image/Client/15. partner_mark.png" alt="pengtai">
                    </li>
                </ul>
            </div>
        </section>
        <section id="inside">
            <div class="inner inside__inner">
                <h1 class="inside__title">inside</h1>
                <ul class="inside__menu-list">
                    <li class="inside__list">
                        <a href="#">
                            <h2>
                                한봄스튜디오 창립 5주년!
                                <div class="inside__arrow-ico">
                                    <img src="./src/image/inside/ico_arrow.png" alt="arrow icon">
                                </div>
                            </h2>
                        </a>
                    </li>
                    <li class="inside__list">
                        <a href="#">
                            <h2>
                                i-AWARD 시상식! 
                                <div class="inside__arrow-ico">
                                    <img src="./src/image/inside/ico_arrow.png" alt="arrow icon">
                                </div>
                            </h2>
                        </a>
                    </li>
                    <li class="inside__list">
                        <a href="#">
                            <h2>
                                i-AWARD 최우수상 수상! 
                                <div class="inside__arrow-ico">
                                    <img src="./src/image/inside/ico_arrow.png" alt="arrow icon">
                                </div>
                            </h2>
                        </a>
                    </li>
                    <li  class="inside__list">
                        <a href="#">
                            <h2>
                                새로워진 한봄스튜디오 
                                <div class="inside__arrow-ico">
                                    <img src="./src/image/inside/ico_arrow.png" alt="arrow icon">
                                </div>
                            </h2>
                        </a>
                    </li>
                    <li class="inside__view-more">
                        <a href="#" >
                            <h2>
                                view more 
                            </h2>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <span class="bottom__brochure"><a href="#">Brochure</a></span>
                <span class="bottom__hidden"></span>
            </div>
        </section>
        <footer id="footer">
            <div class="inner footer__inner">
                <ul class="footer__menu">
                    <li class="footer__menu-list">
                        <a href="#">
                            <h1>works</h1>
                        </a>
                    </li>
                    <li class="footer__menu-list">
                        <a href="#">
                            <h1>company</h1>
                        </a>
                    </li>
                    <li class="footer__menu-list">
                        <a href="#">
                            <h1>contact</h1>
                        </a>
                    </li>
                    <li class="footer__menu-list">
                        <a href="#">
                            <h1>inside</h1>
                        </a>
                    </li>
                </ul>
            </div>
        </footer>
        
    </div>
</body>
</html>

 

 

<common.css>

<style>
@charset "utf-8";
@font-face {
    font-family: TitilliumWeb-extralight;
    src: url(../src/font/TitilliumWeb-ExtraLight.ttf);
}
@font-face {
    font-family: TitilliumWeb-Regular;
    src: url(../src/font/TitilliumWeb-Regular.ttf);
}
@font-face {
    font-family: TitilliumWeb-bold;
    src: url(../src/font/TitilliumWeb-Bold.ttf);
}
@font-face {
    font-family: TitilliumWeb-black;
    src: url(../src/font/TitilliumWeb-Black.ttf);
}
:root {
    --primary-color: #ffde00;
    --font-size-large: 10rem;
}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track {background-color:#f1f1f1;}
::-webkit-scrollbar-thumb {background-color:var(--primary-color);}
html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}
body {
    font-family: 'TitilliumWeb-Regular';
    color: #000;
}
#wrap {
}
.inner {
    max-width: 1144px;
    margin: 0 auto;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
    
}
/* header */
/* header-logo */
.header__logo {
    position: fixed;
    width: 80px;
    top: 12%;
    left: 7.5%;
    z-index: 1111;
}
.header__logo img {
    width: 79px;
    height: 78px;
}
.logo__hanbom-studio {
    text-transform: uppercase;
    color: #fff;
    width: 49%;
    font-size: 1.16rem;
    line-height: 1;
    margin-top: 8px;
    text-align: center;
    position: absolute;
    z-index: -10;
    left: 2%;
    animation: hanbom-studio 1s 1.5s 1 backwards;
}
.logo__hanbom-studio strong {
    font-family: TitilliumWeb-black;
}
.logo__studio {
    font-family: TitilliumWeb-extralight;
    letter-spacing: 3.5px;
}
@keyframes hanbom-studio {
    0% {
        top: 100%;
    }
    100% {
        top: 0%;
    }
}
/* popup-banner */
.popup-banner {
    position: fixed;
    left: 0;
    top: 200px;
    width: 53px;
    height: 175px;
    z-index: 99;
    display: block;
}
.popup-banner__5th-anni {
    cursor: pointer;
    background: var(--primary-color);
    border: none;
    width: 40px;
    height: 120px;
    display: inline-block;
}
.popup-banner__5th-anni img {
    width: 30px;
    position: absolute;
    top: 13px;
    left: 5px;
}
.popup-banner__5th-anni p {
    transform: rotate(-90deg);
    width: max-content;
    position: absolute;
    right: 8px;
    font-family: 'TitilliumWeb-Regular';
    font-weight: bold;
    bottom: 85px;

}
.popup-banner__nominee {
    cursor: pointer;

    background: var(--primary-color);
    border: none;
    width: 40px;
    height: 120px;
    display: inline-block;
}
.popup-banner__nominee div {
    width: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    top: 135px;
    left: 5px;
}
.popup-banner__nominee p {
    transform: rotate(-90deg);
    width: max-content;
    position: absolute;
    right: 10px;
    font-family: 'TitilliumWeb-Regular';
    font-weight: bold;
    bottom: -35px;

}
.popup-banner__nominee {
    background: #000;
    border: none;
    color: #fff;

}
/* bottom */
.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 46px;
    padding-left: 191px;
    padding-right: 295px;
    z-index: 999;
    visibility: visible;
}
.bottom:after {
    content: '';
    /* width: calc(100% - 105px); */
    height: 6px;
    /* margin-right: 102px; */
    background: #000;
    vertical-align: top;
    z-index: 10;
    display: block;
}
.bottom__brochure a {
    position: absolute;
    right: 0;
    top: -15px;
    display: inline-block;
    width: 102px;
    height: 40px;
    margin-right: 190px;
    font-size: 20px;
    text-align: right;
    font-family: TitilliumWeb-black;
    font-weight: 900;
    z-index: -1;
}
.bottom__brochure::before {
    transition: 0.45s ease-out;
    content: '';
    display: inline-block;
    position: absolute;
    top: 70px;
    right: 102px;
    /* background: gold; */
    width: 250px;
    height: 250px;
    background: url(../src/image/bottom/img_circle.png) no-repeat;
    background-size: cover;
    animation: circle 20s infinite backwards;
    cursor: default;
    z-index: 1;
}
.bottom__brochure:hover::before {
    top: -110px;
    right: 102px;

}
@keyframes circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(365deg);
    }
}
.bottom__brochure:hover::after {
    top: -40px;
    right: 150px;
}
.bottom__brochure::after {
    position: absolute;
    display: inline-block;
    top: 100px;
    right: 150px;
    width: 151px;
    height: 88px;
    line-height: 74px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    background: url(../src/image/bottom/speechbubble.svg) 0 0 no-repeat;
    content: 'DOWNLOAD';
    z-index: 9;
    transition: 0.45s ease 0.1s;
}
.bottom__hidden {
    /* background: #000; */
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
</style>

 

 

<main.css>

<style>
@charset "utf-8";
@import url(./common.css);
@import url(./reset.css);
@import url(./layout.css);
/* header */
/* gnb-modal */
input[id=modal-btn] {
    display: none;
}
input[id=modal-btn]:checked ~ .modal-container {
    display: block;
}
input[id=modal-btn] + label {
    display: inline-block;
    position: fixed;
    right: 10%;
    top: 12%;
    width: 100px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    /* background: dodgerblue; */
    border-radius: 5px;
    z-index: 2;
    width: 60px;
    height: 3px;
    /* background: #000; */
}
label[for=modal-btn] span {
    position: absolute;
    height: 5px;
    width: 100%;
    cursor: pointer;
    background: #000;
    transition: .5s;
}
label[for=modal-btn] span:nth-child(1) {
    top: 0;
}
label[for=modal-btn] span:nth-child(2) {
    top: 18px;
}
label[for=modal-btn] span:nth-child(3) {
    top: 36px;
}
input[id=modal-btn]:checked + label span:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;

}
input[id=modal-btn]:checked + label span:nth-child(2) {
    display: none;
}
input[id=modal-btn]:checked + label span:nth-child(3) {
    transform: rotate(-45deg);
    top: 50%;
}
.modal-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 217, 0, 0.342);
    z-index: 9999;
    display: none;
}
.modal-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100vh;
    background: #fff;
    border-radius: 5px;
    z-index: 2;
    text-align: center;
    border: 30px solid var(--primary-color);
}
.modal-menu {
    margin-top: 130px;
}
.modal-menu h1 {
    font-family: TitilliumWeb-bold;
    font-size: 4rem;
    font-style: italic;
}
.modal-menu a {
    transition: 300ms;

}
.modal-menu a:hover {
    color: var(--primary-color);
}
.modal-box strong {
    font-family: TitilliumWeb-black;

}
.modal-left div {
    width: 500px;
    text-align: left;
    position: absolute;
    left: 50px;
    bottom: 100px;
    display: inline-block;
    font-family: TitilliumWeb-bold;

}
.modal-left img {
    margin-left: 10px;
    margin-top: 8px;
}
.modal-left img:nth-child(1) {
    margin-top: 5px;
}
.modal-container > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 128, 0.137);
    z-index: 1;
}
.modal-box > label div {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 60px;
    transform: translate(-170%);
    text-align: center;
    width: 60px;
    z-index: 3;
    cursor: pointer;
}

/* intro */
.intro__main-page-video {
    margin: 0 auto;
    transition: .5s;
    position: relative;
    /* overflow: hidden; */
}
.intro__main-page-video:hover {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    
}
.main-page__desc-copy {
    position: absolute;
    top: 50%;
    /* top: 117.5%; */
    left: 12.5%;
    /* background: gold; */
    color: #fff;
    text-transform: uppercase;
    font-family: 'TitilliumWeb-bold';
    font-size: var(--font-size-large);
    line-height: .9;
    animation: main-page__desc-copy-ani 1.5s 1.5s 1 both;
}
@keyframes main-page__desc-copy-ani {
    0% {
        top: 50%;
    }
    100% {
        top: 117.5%;
    }
}
.main-page__inner {
    margin-bottom: 550px;
    margin-top: 50px;
    position: relative;
    z-index: 999;
}
.main-page__desc {
    text-transform: uppercase;
    font-family: 'TitilliumWeb-bold';
    font-size: var(--font-size-large);
    line-height: .9;
}
.main-page__desc-real {
    margin-top: 150px;
}
.main-page__desc__yellow {
    margin-top: 30px;
    color: var(--primary-color);
    font-style: italic;
    position: absolute;
}
.main-page-wrap__message {
    position: relative;
    overflow: hidden;
    width: 900px;
    height: 130px;
    
}
.main-page__message {
    overflow: hidden;
    position: absolute;
    top: -8%;
    left: 0;
    padding: 0;
    width: 900px;
    animation: openclose 8s 0s infinite backwards;
    
}
.main-page__message span {
    display: block;
    font-weight: bold;
}
.main-page__message i {
    margin-left: 10px;
    color: #000;
    font-size: 6rem;
    font-style: normal ;
}
@keyframes openclose {
    /* possible */
    /* top: -5% */
    /* right */
    /* top: -120px; */
    /* happen */
    /* top: -300px; */
    0% {
        top: -8%;
        width: 0;
    }
    5% {
        width: 0;
    }
    15% {
        width: 100%;
    }
    30% {
        top: -8%;
        width: 100%;
    }
    33% {
        top: -8%;
        width: 0;
    }
    /* right */
    38% {
        top: -120%;
        width: 0;
    }
    48% {
        width: 100%;
    }
    62% {
        top: -120%;
        width: 100%;
    }
    66% {
        top: -120%;
        width: 0;
    }
    /* happen */
    71% {
        top: -230%;
        width: 0;
    }
    86% {
        width: 100%;
    }
    98% {
        top: -230%;
        width: 100%;
    }
    /* ? */
    99% {
        top: -230%;
        width: 0%;
    }
    100% {
        top: -230%;
        width: 0%;
    }
}
/* services */
.services__item {
    float: left;
    width: 33.3333%;
    position: relative;
}
.services__item:nth-child(5) {
    float: right;
}
.services__item-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: TitilliumWeb-bold;
    font-size: 2.5rem;
    font-style: italic;
}
.services__main-cotent {
    float: left;
    position: relative;
    /* transform: translate(-50%, -50%); */
    width: 66.6667%;
    height: 477px;
    /* background: gold; */
}
.services__main-title {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}
.services__main-title h1 {
    /* font-size: var(--font-size-large); */
    font-size: 5rem;
    font-family: TitilliumWeb-bold;
    font-style: italic;
    line-height: 1.3;
}
.services__main-title p {
    font-size: 1.2rem;
}
/* works */
.works__inner {
    margin-top: 300px;
}
.works__title {
    font-size: 4rem;
    font-style: italic;
    font-family: TitilliumWeb-bold;

    margin-bottom: 3%;
}
/* works__5th-anni */
.works__5th-anni {
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}
.works__photo {
    float: left;
    overflow: hidden;
}
.works__photo img {
    transition: .8s;
}
.works__5th-anni:hover img {
    transform: scale(1.2);
}
.works__desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0, -50%);
    /* height: 100%; */
    /* background: gold; */
    font-family: TitilliumWeb-bold;
    text-align: center;

}
.works__desc h1 {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 15%;
}
.works__desc small {
    font-size: 1.7rem;
}
/* works__item */

.works__content {
    width: 100%;
    margin-top: 10%;
    transition: .5s;
}
.works__item {
    position: relative;
    float: left;
    width: 50%;
    margin-top: 45px;
    margin-bottom: 175px;
    transition: 2;

}
.works__item-title {
    position: absolute;
    right: 115px;
    bottom: -30px;
    transform: rotate(90deg);
    transform-origin: 100% 100%;
    font-size: 24px;
    line-height: 1.1;
    vertical-align: top;
}
.works__item-photo {
    overflow: hidden;
}
.works__item-photo img {
    transition: .8s;
    
}
.works__item:hover .works__item-photo img {
    transform: scale(1.2);
}
.works__view-more {
    text-transform: uppercase;
    font-family: TitilliumWeb-bold;
    text-align: center;
    width: 440px;
    /* text-align: center; */
}
.works__view-more h1 {
    display: inline-block;
    font-size: 2.5rem;
    font-style: italic;
}
.inside__plus-ico {
    display: inline-block;
    font-size: 1.3rem;
    margin-left: 20px;
    
}
.inside__plus-ico img {
    transition: all ease 500ms;

}
.works__view-more:hover .inside__plus-ico img {
    transform: rotate(180deg);
}
/* client */
#client {
    background: #fafafa;
    margin-top: 5%;
    padding: 5% 0;
}
.client__item {
    font-size: 0;
}
.client__list {
    /* float: left; */
    display: inline-block;
    width: 33.333%;
    text-align: center;
    padding: 5%;
}
.client__list img {
    width: 70%;
}
/* inside */
#inside {
    background: url(../src/image/inside/bg_section.jpg);
    padding: 5% 0;
}
.inside__title {
    position: relative;
    left: 0;
    display: inline-block;
    top: 70px;
    font-size: 4rem;
    font-style: italic;
    font-family: TitilliumWeb-bold;
}
.inside__menu-list {
    
}
.inside__list {
    width: 617px;
    height: 65px;
    margin: 0 auto;
    vertical-align: bottom;
    font-family: TitilliumWeb-bold;
    margin-bottom: 70px;
    border-bottom: 5px solid #000;

}
.inside__list h2 {
    display: inline-block;
    width: 617px;
    /* float: left; */
    /* text-align: right; */

}
.inside__arrow-ico {
    /* display: inline-block; */
    float: right;
}
.inside__list a:hover .inside__arrow-ico  {
    animation: arrow-outin 1s 1 backwards;
}
@keyframes arrow-outin {
    0% {
        opacity: 1;
        transform: translateX(0px) scale (1);
    }
    40% {
        opacity: 0;
        transform: translateX(10px) scale(0.9);
    }
    41% {
        opacity: 0;
        transform: translateX(-10px) scale(0.9);
    }
    40% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}
/* inside__view-more */
.inside__view-more {
    width: 617px;
    height: 65px;
    margin: 0 auto;
    margin-top: 50px;
}
.inside__view-more h2 {
    position: relative;
    display: inline-block;
}
.inside__view-more h2::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 0px;
    height: 5px;
    transition: .3s;
}
.inside__view-more a:hover h2::after {
    background: #000;
    width: 100%;
}
/* menu-bar */
#footer {
    margin: 300px;
}
.footer__menu {
    width: 100%;
}
.footer__menu-list {
    display: inline-block;
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 16rem;
}
.footer__menu-list h1 {
    position: relative;
}
.footer__menu-list h1::after {
    content: '';
    position: absolute;
    bottom: 35%;
    transform: translate(-50, -50%);
    left: -10%;
    width: 0%;
    height: 5px;
    background: var(--primary-color);
    transition: .5s;
}
.footer__menu-list a:hover h1::after {
    width: 120%;
}
</style>

 

 

<reset.css>

<style>
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    display: inline-block;
    color: inherit;
}
img {
    max-width: 100%;
    vertical-align: top;
}
</style>

 

 

<responsive.css>

<style>
@charset "utf-8";
/* font-size: 3rem; */
@media (max-width: 768px) {
    /* grid */
    .l-grid-tablet-1-12 { width: 8.33333333%; }
    .l-grid-tablet-2-12 { width: 16.66666667%; }
    .l-grid-tablet-3-12 { width: 25%; }
    .l-grid-tablet-4-12 { width: 33.33333333%; }
    .l-grid-tablet-5-12 { width: 41.66666667%; }
    .l-grid-tablet-6-12 { width: 50%; }
    .l-grid-tablet-7-12 { width: 58.33333333%; }
    .l-grid-tablet-8-12 { width: 66.66666667%; }
    .l-grid-tablet-9-12 { width: 75%; }
    .l-grid-tablet-10-12 { width: 83.33333333%; }
    .l-grid-tablet-11-12 { width: 91.66666667%; }
    .l-grid-tablet-12-12 { width: 100%;}
    /*  */
    /* popup-banner */
    .popup-banner {
        display: none;
    }
    /* main-page */
    .main-page__desc {
        font-size: 5rem;
        margin-left: 72px;
    }
    .main-page-wrap__message {
        height: 85px;
    }
    .main-page__message {
        animation: openclose__768px 8s 0s infinite backwards;
    }
    @keyframes openclose__768px {
        /* possible */
        /* top: -5% */
        /* right */
        /* top: -120px; */
        /* happen */
        /* top: -300px; */
        0% {
            top: -8%;
            width: 0;
        }
        5% {
            width: 0;
        }
        15% {
            width: 100%;
        }
        30% {
            top: -8%;
            width: 100%;
        }
        33% {
            top: -8%;
            width: 0;
        }
        /* right */
        38% {
            top: -214%;
            width: 0;
        }
        48% {
            width: 100%;
        }
        62% {
            top: -214%;
            width: 100%;
        }
        66% {
            top: -214%;
            width: 0;
        }
        /* happen */
        71% {
            top: -213%;
            width: 0;
        }
        86% {
            width: 100%;
        }
        98% {
            top: -213%;
            width: 100%;
        }
        /* ? */
        99% {
            top: -213%;
            width: 0%;
        }
        100% {
            top: -213%;
            width: 0%;
        }
    }
    /* services */
    .services__item:nth-child(3) {
        float: right;
    }
    .services__item:nth-child(5) {
        float: left;
    }
    .services__main-cotent {
        left: 50px;
    }
    .services__main-cotent h1 {
        font-size: 3rem;
    }
    .services__main-cotent p {
        font-size: 1rem;
    }
    .services__item-title {
        font-size: 3rem;
    }
    /* works-item */
    .works__5th-anni {}
    .works__item {
        width: 100%;
    }
    .works__item-title {
        left: 0;
        transform: rotate(360deg);
        background: gold;
    }
    .bottom {
        display: none;
    }
}
</style>

** 꼼수 내용

1. logo와 맨 첫부분 글자를 animation을 줘서 마치 스크롤과 함께 내려가는 거처럼 위장했다ㅋㅋㅋ 저걸 어떻게 하지!하다가 animation주자!! 난 똑똑해 하고 했다 하하..

2. gnb-menu부분도 modal로 꼼수를 썼다,, 그래서 맨 위에 고정되있는 건 비밀...

그 외, 자바스크립트는 내가 가진 기술로 할 수 없다고 판단되어 그냥 냅뒀다... ㅠㅠ

 

** 느낀 점

- 선생님과 함께 실습할 때는 자신감이 넘쳐흘렀는데 혼자하니까 이게 맞나 ??하며 코드를 많이 쳤던 거 같다 많이 코드를 쳐봐야 자신감이 오르는 게 아니라 혼자!! 많이 코드를 쳐봐야 자신감이 오를 거 같다

그리고 혼자하면서 모르는 부분은 다 검색하게 된다 구글에 영어로 치면 엄청 많이 나온다!! 내가 몰랐던 부분은 이미 다른 사람들이 경험했던 부분이여서 아주 자세하게 설명되있었다!! 그래서 끝까지 코드를 완성할 수 있었다고 생각한다! 그리고 저분들처럼 열심히 코딩을 해야겠다고 다짐하게 됬다 !! 대학교 이후로 절대로 밤새지 않겠다는 나의 굳은 의지는 아마 6월달에 깨질거 같은 기분이 들었다,, 주말에 열심히 공부해야겠다 ㅠㅠㅠ

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_82] flex 게임을 해보자  (0) 2021.05.25
[코딩 공부_81] flex에 대해 알아보자  (0) 2021.05.24
[코딩 공부_78] transform-origin?  (0) 2021.05.21
[코딩 공부_76] css 스크롤바 스타일 변경하기  (0) 2021.05.14
[코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성)  (0) 2021.05.13

관련글

댓글

티스토리툴바