1. 타겟

💡 금일 타겟 → 헤드 스크립트와 모바일, 섹션 1 PC

2. 과정

• 08/01 이력서 제작
• after, before의 경우 제이쿼리 적용시 DOM에 속해있지 않아 다른 방법을 써야합니다.

  • 헤드 블루 파티클 제작시 before를 지정하는 대신에 li에 클래스를 추가하여 효과를 줌.

    header .gnb ul.gnb_title li:before {
        transition: 0.3s;
        opacity: 10%;
        content: '';
        position: absolute;
        width: 0;
        height: 5px;
        bottom: 0;
        left: 50%;
        background: #02346b;
    }
    header .gnb ul.gnb_title li.on:before {
        opacity: 100%;
        width: 100%;
        left: 0;
    }

• for 문으로 사진 적용

/* 반복문 이미지 교체 */
var p_no = $(".part a:last-child").index();
var i;
for(i = 0; i <= p_no; i++){
$(".part .category a").eq(i).children().css({"background-image":"url(images/h"+(i+1)+".png)"});
};
$(".part .category a").hover(function(){
    bp = $(this).index() + 1;
    $(this).children().css({"background-image":"url(images/hb"+bp+".png)"});
},
function(){
    $(this).children().css({"background-image":"url(images/h"+bp+".png)"});
})

• 미디어쿼리 4단계

@media (max-width:770px) { /* 모바일용 */
    .pc { display: none;}
}

@media (max-width:1030px) { /* 태블릿 */
    .re_s { display: none;}
}

@media (max-width:1280px) { /* 노트북 */
    .re_l { display: none;}
    header .fnb .side > a {display: none;}
}

@media (min-width:1281px) { /* PC용 */
    .mob { display: none;}
}

3. 피드백

• 반응형을 평소 2 단계로 하다가 4단계로 진행을 하니깐 많이 어렵고 시간도 많이 소모된다.

3. 결과

• 헤드 제이쿼리까지 완료됨. 반응형 진행 필요.