[개발 일지 68일차] toco 프로젝트2 - 사이트 리뉴얼(19)

2022-08-11

오늘 진행 사항

1) 오전 10시 멘토링

1. 이미지 최적화
2. css / js 압축
3. 코드리뷰
   -> 상수, 숫자값은 변수처리하는게 좋다 (코드 최적화)
4. 네비바 각페이지 동일하게 적용, 리소프트 홈페이지 시안에서 기능을 더 구현한 것 문서로 정리해보라

2) 팀 회의

푸터 공유, 네비바 통일 작업, 홈페이지 작업문서(시안 외 추가된 기능 등) 오늘까지 써오기

3) 개별 작업

4) 체크아웃 회의

---

3) 개별 작업

1. 네비바 및 햄버거 작업은 시간이 조금 촉박하여 피드백 시간에 수정할 것 같음

2. 딜레이 애니메이션도 내일까지 작업해서 제출할듯

3. 스크립트 일시정지/재생 기능 추가

버튼을 하나 추가하자니 버튼 이미지 배치에 시간이 조금 걸렸으나
position 부모/자식 부여로 깔끔하게 해결했다.

html

<div class="slick-button-wrap">
                <img id="prev-arrow" src="./img/toco-img1/icon-left-arrow.svg" alt="">
                <div id="stopNplay">
                    <img id="stop-btn" src="./img/toco-img1/icon-pause.svg" alt="">
                    <img id="play-btn" src="./img/toco-img1/icon-play.svg" alt="">
                </div>
                <img id="next-arrow" src="./img/toco-img1/icon-right-arrow.svg" alt="">
            </div>

css

/* <-> 버튼 */
.main-header .slick-button-wrap {
    position: absolute;
    z-index: 1;
    top: 750px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.main-header .slick-button-wrap img{
    padding: 1rem;
    cursor: pointer;
}
/* 헤더 - 플레이버튼 클릭 */
.main-header .slick-button-wrap > div {
    position: relative;
    width: 50px;
    height: 53px;
}
.main-header #play-btn {
    position: absolute; 
    left: 0;
    top: 0;
    display: none;
}

js

  // 슬릭 멈추고 재생할 때 CSS랑 기능
    $("#stop-btn").click(function(){
        $('.slick-header-wrap').slick('slickPause');
        $(this).css("display","none");
        $("#play-btn").css("display","block");
        });
    $("#play-btn").click(function(){
        $('.slick-header-wrap').slick('slickPlay')
        $(this).css("display","none");
        $("#stop-btn").css("display","block");
    });

---

어려운 점

아무래도 JS 와 jQuery 이해도가 낮다보니 객체함수 쓰는 것이 어렵다

해결 방법

강의 시간에 배웠던 간단한 예제 코드를 최대한 응용해보고 있음.

 $("#stop-btn").click(function(){
        $("#play-btn").css("display","block");
        });

같은 것

소감

js, jQuery를 좀더 기깔나게 쓰고 싶다... ㅠㅂㅠㅎㅎ;