실습 21일 차

구성본·2022년 7월 27일
실습

1. 학습한 내용

  • 이거 하나 만드려고 얼마나 긴 시간을 고생을 한건지 모르겠다
  • header hover animation 부분을 어떻게든 만들기는 했다, 물론 마음에 들지는 않지만..
    -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>Document</title>
    <link rel="stylesheet" href="./css/company.css">
    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Aos animation -->
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
</head>

<body>
    <header>
        <div class="container" id="company">
            <h1>
                <!-- Resoft Logo -->
                <a href="main.html"><img src="./img/Header-Logo.svg"></a>
            </h1>
                <!-- Nav Bar -->
            <ul>
                <li class="nav">
                    <a href="company.html" class="nav-item is-active" active-color="blue">회사소개</a>
                    <a href="business.html" class="nav-item" active-color="blue">사업현황</a>
                    <a href="information.html" class="nav-item" active-color="blue">정보마당</a>
                    <span class="nav-indicator"></span>
                </li>
                <script src="./js/header5.js"></script>

                <!-- Hamberger Button -->
                <li class="btn">
                    <button type="button" onclick="doDisplay()"><i class="fa-solid fa-bars" style="color:black"></i></button>
                </li>
            </ul>
                
        </div>

        <!-- company header -->
        <div id="company-header">
            <h1>회사소개</h1>
        </div>

        <!-- Hamberger Navbar -->
        <div id="myNav" class="overlay">
            <div class="overlay-content">
                <a href="#">REsoft소개</a>
                <a href="#">연혁</a>
                <a href="#">조직도</a>
                <a href="#">특허&인증</a>
                <a href="#">오시는 길</a>
            </div>
            <div class="overlay-content">
                <a href="#">ECOCE</a>
                <a href="#">moaDo</a>
                <a href="#">Etc</a>
              </div>
              <div class="overlay-content">
                <a href="#">REsoft소식</a>
              </div>
        </div>

        <!-- Hamberger Script -->
        <script> 
            var bDisplay = true; 
            function doDisplay(){ 	
                var con = document.getElementById("myNav"); 	
                if(con.style.display=='none'){ 		
                    con.style.display = 'block'; 	
                }else{ 		
                    con.style.display = 'none'; 	
                } 
            } 
        </script>
    </header>

    <!--------------------------------------------  Resoft 소개   --------------------------------------------->
    <div id="introduce-resoft">
        <div>
            <div class="introduce-title">
                <p class="title-m">REsoft 소개</p>
                <p class="title-sub">ABOUT US</p>
            </div>
        </div>
        <div>
            <table class="info-container">
                <tbody>
                    <tr class="info-box">
                        <td class="info-p"><p>회사명</p></td>
                        <td class="info-p2" ><p>(주)리소프트</p></td>
                    </tr>
                    
                    <tr class="info-box">
                        <td class="info-p"><p>설립일</p></td>
                        <td class="info-p2"><p>2021년 5월 6일</p></td>
                    </tr>

                    <tr class="info-box">
                        <td class="info-p"><p>대표이사</p></td>
                        <td class="info-p2"><p>오유나</p></td>
                    </tr>

                    <tr class="info-box">
                        <td class="info-p"><p>주요 사업</p></td>
                        <td class="info-p2"><p>모바일 플랫폼 개발</p></td>
                    </tr>

                    <tr class="info-box">
                        <td class="info-p"><p>본사</p></td>
                        <td class="info-p2"><p>대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호</p></td>
                    </tr>

                    <tr class="info-box">
                        <td class="info-p">
                            <p>부설연구소</p>
                        </td>
                        <td class="info-p2">
                            <p>대구광역시 수성구 알파시티1로 160, SW융합테크비즈센터(Dnex) 305호</p>
                        </td>
                    </tr>

                    <tr class="info-box">
                        <td class="info-p">
                            <p>연락처</p>
                        </td>
                        <td class="info-p2">
                            <p>TEL. (053) 475-2110 / FAX. (0504) 257-5966 / E-mail. call@resoft.kr</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


<!--------------------- 연혁 --------------------------->
    <section id="history">
        <div class="history-title">
            <p>연혁</p>
            <span>history</span>
        </div>
        <ul class="history-ul">
            <li class="ul-line">
                <h1>2022</h1>
                <h4>1</h4>
                <p>&nbsp;</p>
            </li>
            <li>
                <h1>2021</h1>
                <h4 class="history-point">12</h4>
                <p>대구여성인력개발센터 MOU 협약 (여성IT인재 현장실습)</p>
                <p>대구가톨릭대학교 계약학과 MOU 협약 (ICTAI융합학과)</p>
                <p>기업부설연구소(연구개발전담부서) 등록</p>
            </li>
            <li>
                <h4>11</h4>
                <p>제 38류, 제 45류 상표등록 출원 (Mmate : 제 40-1799224호, 제 40-1799225호)</p>
            </li>
            <li>
                <h4>10</h4>
                <p>서울특별시 송파구청 앱 개발 (제8회 한성백제마라톤 비대면 대회)</p>
                <p>대구광역시체육회 앱 개발 (2021 대구 마스크쓰햬 컬러풀 핫플 걷기)</p>
                <p>대구광역시 달서구체육회 앱 개발 (제15회 언택트 달서 하프마라톤 대회)</p>
            </li>
            <li>
                <h4>9</h4>
                <p>대구 경북지방중소벤처기업청 여성기업 등록</p>
            </li>
            <li>
                <h4>8</h4>
                <p>구미대학교 MOU 협약 (현장실습학기제)</p>
            </li>
            <li>
                <h4>5</h4>
                <p>(주)리소프트 회사 설립</p>
            </li>
        </ul>
    </section>

    <!------------------------- Organization chart ------------------------------->
    <section id="Organization-chart"
        data-aos="zoom-in" 
        data-aos-offset="200" 
        data-aos-easing="ease-out-sine"
        data-aos-duration="1000">
        <div class="Organization-title">
            <p>조직도</p>
            <span>ORGANIZATION</span>
        </div>
        <div class="org-tree">
            <h1 class="level-1 CEO">대표이사</h1>
            <ol class="level-2-wrapper">
                <li>
                    <h2 class="level-2 department1">전략기획부</h2>
                    <div class="level-3-desc">
                        • 유저 Needs 분석<br>
                        • 고객 수요 확인<br>
                        • BM 설계/기획<br>
                        • 사업화 전략 수립<br>
                        • 사업계획서 작성
                    </div>
                </li>
                <li>
                    <h2 class="level-2 department2">개발부</h2>
                    <div class="level-3-desc">
                        • 유저 Needs 분석<br>
                        • 고객 수요 확인<br>
                        • BM 설계/기획<br>
                        • 사업화 전략 수립<br>
                        • 사업계획서 작성
                    </div>
                </li>
                <li>
                    <h2 class="level-2 department3">디자인부</h2>
                    <div class="level-3-desc">
                        • 유저 Needs 분석<br>
                        • 고객 수요 확인<br>
                        • BM 설계/기획<br>
                        • 사업화 전략 수립<br>
                        • 사업계획서 작성
                    </div>
                </li>
                <li>
                    <h2 class="level-2 department4">마케팅부</h2>
                    <div class="level-3-desc">
                        • 유저 Needs 분석<br>
                        • 고객 수요 확인<br>
                        • BM 설계/기획<br>
                        • 사업화 전략 수립<br>
                        • 사업계획서 작성
                    </div>
                </li>
                <li>
                    <h2 class="level-2 department5">경영지원부</h2>
                    <div class="level-3-desc">
                        • 유저 Needs 분석<br>
                        • 고객 수요 확인<br>
                        • BM 설계/기획<br>
                        • 사업화 전략 수립<br>
                        • 사업계획서 작성
                    </div>
                </li>
            </ol>
        </div>
        <script> 
            AOS.init(); // 자바스크립트로 init()을 해야 동작한다.
        </script>
    </section>
    
    <!------------------------특허 인증 --------------------->
    <div id="certification">
      
        <div class="cert_text">
            <p class="cert_p1">특허 & 인증</p>
            <span>CERTIFICATION & PATENT</span>
        </div>
        
        <div class="cert_container">
            <ul class="cert_ul">
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
                <li class="cert_li">
                    <div class="cert_image_box">
                        <img src="./img/book.webp" class="cert_img">                
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!------------------------------------ Map -------------------------------------->
    <div id="directions">
        <div class="direction-title">
            <p>오시는 길</p>
            <span>DIRECTIONS</span>
        </div>
        <div class="cont">
            <div>
                <div id="map" class="kakaomap" style="width:1440px;height:680px;"></div>
                <script type="text/javascript"
                    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=78f4f36bf8cec7a4fe3231201a6f8b56"></script>
                <script>
                    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                        mapOption = {
                            center: new kakao.maps.LatLng(35.87172918917555, 128.62486866975289), // 지도의 중심좌표
                            level: 2 // 지도의 확대 레벨
                        };
                    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
                    var map = new kakao.maps.Map(mapContainer, mapOption);
                    var imageSrc = './img/map_marker.png', // 마커이미지의 주소입니다
                        imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
                        imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                    // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
                        markerPosition = new kakao.maps.LatLng(35.87172918917555, 128.62486866975289); // 마커가 표시될 위치입니다
                    // 마커를 생성합니다
                    var marker = new kakao.maps.Marker({
                        position: markerPosition,
                        image: markerImage // 마커이미지 설정
                    });
                    // 마커가 지도 위에 표시되도록 설정합니다
                    marker.setMap(map);
                    // 버튼 클릭에 따라 지도 이동 기능을 막거나 풀고 싶은 경우에는 map.setDraggable 함수를 사용합니다
                    function setDraggable(draggable) {
                        // 마우스 드래그로 지도 이동 가능여부를 설정합니다
                        map.setDraggable(draggable);
                    }
                    // 버튼 클릭에 따라 지도 확대, 축소 기능을 막거나 풀고 싶은 경우에는 map.setZoomable 함수를 사용합니다
                    function setZoomable(zoomable) {
                        // 마우스 휠로 지도 확대,축소 가능여부를 설정합니다
                        map.setZoomable(zoomable);
                    }
                </script>
            </div>
            <div class="info">
                <div class="tel">
                    <div class="one"><p>연락처</p></div>
                    <div class="two"><p>TELL. (053) 475-2110 FAX. (0504) 257-5966 E-MAIL. call@resoft.kr</p></div>
                </div>
                <div class="line"></div>
                <div class="add">
                    <div class="one"><p>주소</p></div>
                    <div class="two"><p>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (주)리소프트</p></div>
                </div>
            </div>
        </div>
    </div>

    <!------------------------- footer ------------------------------->
    <footer id="footer">
        <div class="footer-wrap">
            <div class="footer-logo">
                <img src="./img/resoft.png" alt="">
            </div>

            <div class="address">
                <p class="footer-add">© RESOFT CO.LTD. All Rights Reserved.</p>  
                <p class="footer-inform">
                    <span>상호 : (주)리소프트</span>
                    <br>
                    <span>사업자등록번호 : 722-81-02219</span>
                    <br>
                    <span>주소 : (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</span>
                </p>
                <p class="footer-inform-add">
                    <span>대표이사 : 오유나</span>&nbsp;&nbsp;
                    <span>개인정보책임자 : 이현지</span>
                    <br/>
                    <span>전화 : (053) 475-2110</span>&nbsp;&nbsp;&nbsp; 
                    <span>팩스 : (0504) 257-5966</span>&nbsp;&nbsp;&nbsp;
                    <span>이메일 : call@resoft.kr</span>
                </p>
            </div>
        </div>
    </footer>

</body>
</html>
  • css
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+KR&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    box-sizing: border-box;
    vertical-align: baseline;
}

body {
    max-width: 1920px;
    margin: 0 auto;
}
li {
    list-style: none;
}


/********************************* 헤더부분 *************************************/
header {
    width: 100%;
    z-index: 1000;
    top:0;
}

header .container {
    display: flex;
    justify-content: space-between; /* 양 끝으로 배치 */
    align-items: center;
    width: 100%;
    border: 1px solid #DBDBDB;
    height: 80px;
}

header ul {
    width: 648px;
    position: relative;
    margin-right: 126px;
    height: 80px;
}

header ul li {
    display: inline-block;
}

.nav {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    padding: 0 20px;
    top: -6px;
}
.nav-item {
    color: black;
    text-decoration: none;
    transition: 0.3s;
    z-index: 1;
    font-size: 20px;
    font-weight: bolder;
    position: relative;
    margin-right: 68px;
    margin-bottom: 10px;
}

.nav-item:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: -10%;
    width: 100%;
    height: 5px;
    background-color: blue;
    border-radius: 5px 5px 5px 5px;
    opacity: 0;
    transition: 0.5s;
    margin-bottom: -10px;
}

.nav-item:not(.is-active):hover:before {
    opacity: 1;
    bottom: 0;
    left: 1%;
}

.nav-item:not(.is-active):hover {
    color: blue;
}

.nav-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    transition: 0.4s;
    z-index: 1;
    border-radius: 5px;
}

/* ------------------------------------------------------------------- */
header button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 32px;
    margin-top: 25px;
}

/************************************* 로고 ****************************************/
header h1 a { 
    margin-left: 360px;
}
header h1 a img {
    width: 133px;
    height: 30px;
}



/********************* company-header ***********************/
#company-header {
    background: url(../img/company-main.png) no-repeat center;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#company-header h1 {
    color: white;
}

/************************** Hidden **************************/
.overlay {
    height: 210px;
    width: 100%;
    z-index: 1;
    top: 80px;
    left: 0;
    background-color: rgba(47, 88, 163, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
    position: absolute;
}

.overlay-content {
    float: left;
    top: 10%;
    text-align: left;
    margin-right: 50px;
    margin-top: 15px;
    line-height: 0.7;
}
.overlay-content:first-child {
    margin-left: 1140px;
}
.overlay-content:nth-child(2) {
    margin-left: -18px;
}
.overlay-content:last-child {
    margin-left: 15px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #ffff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: black;
}

/*************** 회사소개 - REsoft소개 ****************/
#introduce-resoft {
    width: 100%;
    height: 656px;
    margin: 100px 0 100px 240px;
}

.title-m {
    font: bold 40px/58px Noto Sans KR;
    color: #1E1E1E;
}

.title-sub {
    font: medium 18px/26px Noto Sans KR;
    color: #C8C8C8;
}

.info-container {
    position:relative;
    border-collapse: collapse;
    width: 1440px;
    height: 522px;
    margin-top: 50px;
}

.info-p {
    font:  bold 24px/50px Noto Sans KR;
    letter-spacing: 1.2px;
    color: #1E1E1E;
    text-align:center;
}

.info-p p {
    position: absolute;
    margin-left: 40px;
    margin-top: 12.3px;
}

.info-p2 {
    font: normal 20px/30px Noto Sans KR;
    color: #959595; 
}

.info-p2 p {
    margin-left: 280px;
    margin-top: 22.3px;
}

 /****************** 회사소개 RESOFT소개 밑줄 ****************/
.info-box{
    border-bottom: 1px solid #C8C8C8;
    margin: 0;
}

/********************* history 연혁 ********************/
#history {
    width: 1920px;
    height: 1314px;
    background-color: #F9F9F9;
}

.history-title p {
    position: relative;
    font-size: 40px;
    padding-top: 100px;
    margin-left: 240px;
    font-weight: bolder;
}
.history-title span {
    margin-left: 255px;
}

/******************* history-ul *******************/
.history-ul {
    position: relative;
    width: 1140px;
    height: 980px;
    margin-left: 540px;
    margin-top: 78px;
}

.history-ul h1 {
    position: absolute;
    width: 125px;
    height: 72px;
    font-size: 50px;
    line-height: 40px;
}

.history-ul .ul-line {
    border-bottom: 1px solid #DBDBDB;
}

/******** 세로 라인 만들기 *********/
.history-ul::before {
    content: "";
    display: block;
    position: absolute;
    background-color: #959595;
    left: 31.5%;
    margin-left: -2px;
    padding: 20px 0;
    width: 6px;
    height: 88%;
    margin-top: 30px;
}

.history-ul li {
    position: relative;
    margin-bottom: 20px;
}

.history-ul li h4 {
    font-size: 32px;
    color: #184B9F;
    text-align: right;
    margin-right: 830px;
}

/************ 세로라인 동그라미 만들기 ************/
.history-ul li h4::before {
    content:""; 
    position: absolute;
    left: 30.7%; 
    transform: translateY(60%);
    border-radius: 100%;
    background:#fff; 
    border: 10px solid #184B9F;
    box-sizing: border-box;
}


.history-ul li p {
    padding-left: 35%;
    line-height: 65px;
    margin-top: -15px;
    font-size: 20px;
}


/************** 2021 위치 조정 *************/
.history-point {
    margin-top: 50px;
}

/********************* Organization-chart *******************/
#Organization-chart {
    background-color: #FFFFFF;
    width: 1920px;
    height: 906px;
    margin: 0 260px;
}

.Organization-title p {
    position: relative;
    font-size: 40px;
    padding-top: 140px;
    font-weight: bolder;
}

/************************* tree-title & box **********************/
.Org-tree {
    width: 1400px;
    height: 532px;
    margin-top: 50px;
}

.Org-tree .CEO {
    background-color: #184B9F;
    color: #FFFFFF;
    width: 200px;
    height: 80px;
    padding: 22px 48px;
    font-size: 26px;
    border-radius: 20px;
}

.Org-tree .department1 {
    width: 200px;
    height: 80px;
    padding: 21px 34px;
    font-size: 26px;
    border: 1px solid #184B9F;
    border-radius: 20px;
}

.Org-tree .department2 {
    width: 200px;
    height: 80px;
    padding: 21px 60px;
    font-size: 26px;
    border: 1px solid #184B9F;
    border-radius: 20px;
}

.Org-tree .department3 {
    width: 200px;
    height: 80px;
    padding: 21px 47px;
    font-size: 26px;
    border: 1px solid #184B9F;
    border-radius: 20px;
}

.Org-tree .department4 {
    width: 200px;
    height: 80px;
    padding: 21px 47px;
    font-size: 26px;
    border: 1px solid #184B9F;
    border-radius: 20px;
}

.Org-tree .department5 {
    width: 200px;
    height: 80px;
    padding: 21px 34px;
    font-size: 26px;
    border: 1px solid #184B9F;
    border-radius: 20px;
}

/********************* 위치 조절 **********************/
.level-1,
.level-2,
.level-3 {
    position: relative;
}

/********************* LEVEL-1 STYLES ************************/
.level-1 {
    width: 50%;
    margin: 0 auto;
    /* 중앙 정렬 */
}

/******************* LEVEL-1 중앙 세로선 **************************/
.level-1::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 140px;
    background: black;
}

/***************** LEVEL-2 STYLES *********************/
.level-2-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* fr = 컨테이너 내의 공간 비율을 분수로 나타내는 단위 */
    /* 5개의 부서를 가로로 나눠서 배치 */
}

/*************** LEVEL-2 가로선 & 위치 ***************/
.level-2-wrapper::before {
    content: "";
    position: absolute;
    top: 70px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: black;
}

/*************** LEVEL-2 세로선 & 위치 ***************/
/*.level-2-wrapper::after {
    display: none;
    content: "";
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: calc(100% + 20px);
    height: 2px;
    background: black;
}*/

.level-2-wrapper li {
    position: relative;
    margin-top: 140px;
}

.level-2-wrapper > li::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 70px;
    background: black;
}

.level-2 {
    width: 70%;
    margin: 0 auto 40px;
}

/*.level-2::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0px;
    background: black;
}

만약 그 밑에 하위 요소를 배치하기위해 선을 만들어야할 때 사용 

.level-2::after {
    display: none;
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-100%, -50%);
    width: 20px;
    height: 2px;
    background: black;
}*/

/**************** LEVEL-3 STYLES ****************/
.level-3-desc {
    margin-left: 40px;
    font-size: 22px;
}

/******************************* 특허인증 **********************************/
#certification {
    width: 1920px;
    height: 1454px;
    background-color: #F9F9F9;
}

#certification .cert_text .cert_p1 {
    position: relative;
    font: normal normal bold 40px/58px Noto Sans KR;
    padding-top: 100px;
    margin-left: 240px;
}

#certification .cert_text span{
    margin-left: 240px;
    font: normal normal medium 18px/26px Noto Sans KR;
    color: #C8C8C8;
}

/********************** 특허 이미지 박스 ***********************/

.cert_container{
    width: 990px;
    height: 1120px;
    margin-left:630px;
}

.cert_ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 55px;
}

.cert_li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 3);
    margin-bottom: 80px;
}

/********************** 특허 이미지 **************************/
.cert_image_box {
    position: relative;
    width: 230px;
    height: 320px;
    background-color: #FFFFFF;
    padding: 5px;
    border-radius: 4px;
    border: #184B9F 1px solid;
}

.cert_img {
    position: absolute;
    width: 220px;
    height: 310px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 0% 0% no-repeat padding-box;
}

/*************************** Map *****************************/
#directions {
    max-width: 1440px;
    height: 1344px;
    margin: 0 auto;
}

.direction-title p {
    position: relative;
    font: normal normal bold 40px/58px Noto Sans KR;
    padding-top: 100px;
}

.direction-title span{
    margin-left: 30px;
    font: normal normal medium 18px/26px Noto Sans KR;
    color: #C8C8C8;
}

.direction-title {
    margin-bottom: 50px;
}

#directions .cont .info .tel,
#directions .cont .info .add{
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#directions .cont .info .tel .one,
#directions .cont .info .add .one{
    width: 230px;
    margin-left: 150px;

    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1.2px;
    line-height: 50px;
    color: #1E1E1E;
    text-align: center;
}
#directions .cont .info .tel .two,
#directions .cont .info .add .two{
    width: 1080px;

    font-size: 20px;
    line-height: 30px;
    color: #959595;
}

#directions .cont .info .line {
    position: absolute;
    width: 1440px;
    height: 1px;
    background-color: #C8C8C8;
}
#directions .cont .info {
    border-bottom: solid #C8C8C8;
}

/***************** footer ********************/
.footer-wrap {
    position: relative;
    left: 0;
    width: 1920px;
    height: 250px;
    background: #E9E9E9 0% 0% no-repeat padding-box;
    opacity: 1;
}
.footer-wrap img {
    width:200px;
    height:45px;
    margin-top:50px;
    margin-left:240px;
}
.footer-wrap .address {
    letter-spacing: 0px;
    line-height: 26px;
    color: #9E9E9E;
    opacity: 1;
    text-align: left; 
}
.footer-wrap .address .footer-add {
    position: relative;
    height: 24px;
    left: 460px;
    bottom:20px;
    font-size: 24px;
}
.footer-wrap .address .footer-inform {
    position: relative;
    margin-left: 240px;
    padding-bottom: 49px;
    height:76px;
}
.footer-wrap .address .footer-inform-add {
    position:relative;
    left: 1000px;
    bottom: 50px;
    height: 50px;
    margin-top: -25px;
}
  • js(hover event)
const indicator = document.querySelector(".nav-indicator");
const items = document.querySelectorAll(".nav-item");

function handleIndicator(el) {
  items.forEach(item => {
    item.classList.remove("is-active");
    item.removeAttribute("style");
  });

  indicator.style.width = `${el.offsetWidth}px`;
  indicator.style.left = `${el.offsetLeft}px`;
  indicator.style.backgroundColor = el.getAttribute("active-color");

  el.classList.add("is-active");
  el.style.color = el.getAttribute("active-color");
}

items.forEach((item, index) => {
  item.addEventListener("click", e => {
    handleIndicator(e.target);
  });
  item.classList.contains("is-active") && handleIndicator(item);
});

2. 학습한 내용 중 어려웠던 점

  • hover event부분을 구글링하면서 만들어봤지만 몇 개를 갈아엎고 해보고를 반복하다가 드디어 만들기는 했다
  • 내가 짠 코드들은 왜 덕지덕지 기워놓은 누더기 같은 느낌일까..아쉬울 따름이다
  • 아직은 스스로 혼자서 모두 짜내질 못하니 구글링한 부분들을 응용해서 사용하다보니 그런 느낌인 것 같다

3. 해결방법

  • 이건 뭐 다른 방법이 없다, 하다보면 늘겠지
  • 잘하시는 분들이 만들어놓은 코드들을 보면 깔끔해서 부럽다는 생각이 든다
  • 하지만 나는 내 능력치를 잘 알기때문에 남과 비교하면서 좌절은 안한다
  • 단지 그 사람들은 어떻게 이렇게 만들 수 있을까를 배울 수 있는 부분은 배울수 있도록 노력해봐야지 싶다
  • 뭐, 그래도 잘하는 사람들은 부럽다

4. 학습소감

  • 아직 부족한게 많다
  • 항상 생각하는 부분이지만 포기만 하지말자
  • 남들보다 실력도, 센스도 좀 떨어지고 부족하지만 포기만 안하면 어떻게든 늘게되어있지 않을까
profile
구성본
코딩공부중
이전 포스트

# 실습 20일 차

다음 포스트

실습 22일 차

0개의 댓글