실무프로젝트-1주차-2일차

학습한 내용

1일차에 이어 내가 맡은 부분을 진행하였다.

지도 영역

1. wow.js

• 다양한 스크롤 이벤트를 등록할 수 있다.
• 필요한 css와 스크립트 소스

<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css">
<script src="https://wowjs.uk/dist/wow.min.js"></script>

• 이벤트 이름을 사용하여 각 기능을 등록할 수 있다.
• 이름 참고 사이트 : https://daneden.github.io/animate.css/
• data-wow-delay: 애니메이션 지연시간(설정시간만큼 기다린 후 애니메이션 동작)
• 다른 data 속성으로는 data-wow-duration(진행시간),
  data-wow-offset(애니메이션 시작거리), data-wow-iteration(반복)이 있다.
• style에서 animation-delay: 시간; animation-name:이름; 을 통해 나타내고자 하는 영역에 추가하여 준다.
• 마지막으로 스크립트에 new WOW().init(); 추가하여 이벤트를 등록하여 준다.
• 해당 div 영역

<div id="map" class="indexKakaoMap wow" data-wow-delay="0.3s" style="animation-delay: 0.3s; animation-name:fadeIn;"></div>
<div class="map-info-wrap wow" data-wow-delay="0.5s" style="animation-delay: 0.5s; animation-name: fadeInRight;">

2. 전체코드
   html

<div class="map-wrap">
        <div id="map" class="indexKakaoMap wow" data-wow-delay="0.3s" style="animation-delay: 0.3s; animation-name:fadeIn;"></div>
        <div class="map-info-wrap wow" data-wow-delay="0.5s" style="animation-delay: 0.5s; animation-name: fadeInRight;">
            <div class="map-info">
                <p>TEL</p>
                <a href="tel:053-475-2100;" style="cursor:text"><p>(053) 475-2100</p></a>
            </div>
            <div class="map-info">
                <p>FAX</p>
                <a href="javascript:void(0);" style="cursor:text"><p>(0504) 257-5966</p></a>
            </div>
            <div class="map-info">
                <p>E-MAIL</p>
                <p>call@resoft.kr</p>
            </div>
            <div class="map-info">
                <p>ADDRESS</p>
                <p>(41260) 
                    <br>
                    대구광역시 동구 동구대로 465, 대구스케일업허브 (DASH) 704호
                    <br>
                     (주)리소프트
                </p>
            </div>
        </div>
    </div>

css

/* 지도 설정 */
.indexKakaoMap{
    width: 65%;
    height: 45vw;
    max-width: 1400px;
    position:relative;
    overflow:hidden; 
    background: url("http://t1.daumcdn.net/mapjsapi/images/2x/bg_tile.png"); 
}
.map-wrap{
    margin: 200px 200px;
    /* margin-left: 200px; */
    display: flex;
    gap: 90px;
}

.map-wrap .map-info-wrap{
    display: flex;
    gap: 35px;
    flex-direction: column;
    font-size: 18px;
    margin-top: 75px;
    visibility:visible;
}
.map-wrap .map-info-wrap .map-info > p:first-child {
    font-weight: 600;
    margin-bottom: 15px;
}
.map-wrap .map-info-wrap .map-info a p, .map-wrap .map-info-wrap .map-info p:last-child {
    color: #7b7b7b;
}
.map-wrap .map-info-wrap .map-info p:last-child {
    line-height: 25px;
}
/* .fadeIn{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
} */

@media screen and (max-width: 1300px){
    .map-wrap{
    gap: 50px;
    margin: 200px 50px;}
}

• 미디어 쿼리를 사용하여 1300px이하게 되면 지도와 글 사이, margin을 변경하요 적용하도록 하였다.

3. 푸터 섹션
   html

<footer>
        <div class="footer-wrap">
            <div class="img-wrap">
                <img src="./images/푸터로고.png" alt="footer-log">
            </div>
            <div class="footer-content">
                <p class="footer-content-main">주식회사 리소프트는 새로운 소프트웨어로 진화하여 여러분께 응답드리고자 노력하겠습니다.</p>
                <div class="footer-info-wrap">
                    <div class="footer-info">
                        <p>
                            <span>상호. (주)리소프트</span>
                        </p>
                        <p><span>대표이사. 오유나</span></p>
                        <p><span>사업자등록번호. 722-81-02219</span></p>
                        <p><span>개인정보책임자. 이현지</span></p>
                        <pre> </pre>
                        <p><span>주소. (41260) 대구광역시 동구 동구대로 465, 대구스케일업허브 (DASH) 713 (신천동 106)</span></p>
                        <p><span>전화. </span><a href="tel:053-475-2110" style="cursor: text;">
                            <span>(053) 475-2100</span></a>
                            <!-- <i class="fas fa-solid fa-pipe"></i> --></p>
                        <p><span>팩스. </span><a href="javascript:void(0);" style="cursor: text;">
                            <span>(0504) 257-5966</span></a></p>
                        <p><span>이메일. call@resoft.kr</span></p>
                    </div>
                </div>
                <br>
                <p class="copyright">Copyright(c) RESOFT CO.LTD. All right reserved.</p>
            </div>
        </div>
    </footer>

• 벽지 div 안에 이미지 영역과 내용을 담는 영역으로 구분 후 작성

학습한 내용 중 어려웠던 점 또는 해결못한 것들

• 푸터 섹션 스타일 적용

해결방법 작성

학습 소감

배우지 않은 wow.js를 사용해보았다. 참고사이트에서 궁금했던 지도 섹션의 코드들이 여기에 사용되었다는 걸 알고 궁금증이 해결되었다. 아직까지 모르는 다양한 이벤트가 존재하는 것 같고 차근차근 정리해나가야 할 것 같다. 또한 현재는 참고사이트를 토대로 클론코딩을 하고 있는데 참고할 사이트가 있기에 답이 있는 듯한 느낌이지만, 직접 만든다고 생각하면 지금하는 것보다 시간이 더 걸리고 머리가 더 아플 것 같다.