copy yd_22.08.22~23

1. 타겟

08/23) 섹션 1 반응형, 섹션2 pc제작
0824) 섹션3 마크업 진행

2. 과정

0823)

• 테이블의 첫번째 td의 너비값을 퍼센트로 지정하면 부모인 tr 이 자식의 너비값을 인지 못한다.
• 알파 슬라이드 정지 버튼을 눌러도 슬라이드 호버시 재생으로 인해 사라진다.
  • 버튼 클릭스 변수값을 지정한 다음 if문으로 setInterval을 제어하였습니다.

0824) 알파슬라이드 스크립트

• 슬라이드 정지, 플레이 버튼 연속 클릭시 2칸씩 넘어감, 하단 슬라이드 구성 동일한데 상단만 발생
  • mouseleave시 재생되는 인터벌과 play의 인터벌이 서로 중복되었습니다.
• 마우스 stop상태에서 슬라이드 호버시 go()의 ms_stop의 변수 값으로 재생되지 않지만 play로 전환시 인터벌이 재생되어 2번 연속 움직입니다.

  • go() 에 있던 ms_stop의 if문을 play에 적용하여 인터벌이 아예 재생되지 않도록 수정하였습니다.

  • mouseleave와 play에 각각 clearInterval을 추가하여 각각 인터벌이 재생되는 문제를 해결하였습니다.

    // 연속 재생 되었던 코드, hover의 영역을 ul로 수정하여 해결.
    $(".main_slide").hover(function(){
        clearInterval(timer);
    },function(){ /* 마우스리브시 ms_stop 변수로 if문 추가,
    play의 인터벌이 각각 재생되어 clearInterval을 추가하였습니다.*/
        timer = setInterval("go()",3000);
    }) 
    
    $(".main_slide .stop").click(function(){
        ms_stop = 0; // mouseleave시 발생하는 재생을 방지하는 if문 값.
        clearInterval(timer);
        $(this).removeClass("on");
        $(".main_slide .play").addClass("on");
    })
    $(".main_slide .play").click(function(){
        ms_stop = 1;
        timer = setInterval("go()",3000);
        $(this).removeClass("on");
        $(".main_slide .stop").addClass("on");
    })

• HTML 속성으로 링크 적용

<div style=" cursor: pointer;" onclick="location.href='https://meta-tony-test1.github.io/portfolio_v1.0/;">

• white-space 사용을 위한 마크업
  • 인라인 요소 공백 여백 없애기
    1. 주석으로 마크업
    2. font-size: 0;
    3. display: table 사용

• 제이쿼리 달력 정보 가져오기 jQuery, HTML-date method_22.08.23

3. 결과

0823)

• 섹션2 마무리 필요
  • 슬라이드 제이쿼리 재생 충돌 수정 필요

0824)

• ML 마크업 피드백

  • HTML 마크업 진행시 같은 라인(상단, 중간, 하단)의 요소들은 추가적으로 묶어주는 것이 추후 수정이나 기능 추가할 때 편리합니다.

  • 클래스와 아이디명을 함축해서 사용하고 주석을 사용합니다.

    <!-- Quick Menu -->
    <div id="qm"> </div>

  • 요소별로 각각 다른 속성(ex. z-index, background-image) 를 줄 때 인라인 스타일로 추가합니다.