반응형-커피베이 (자바스크립트-resize 사용) - 8시

[손자병법]

커피베이.zip

2.56MB

let w;
window.xxxxonload=function() {
    
}
// 자바스크립트에서 사용법
window.addEventListener("resize", function() {
    w=window.innerWidth;
    // console.log(w);
    if(w>=1200) {   // PC 버전이면
        $("nav").css("width", "80%").css("marginTop", "50px");
        $("nav").css("marginLeft","10%");
        $(".tab1 div").css("width", "10%");
        $(".title").css("color", "black");
        $(".imgText li").css("width", "30%");
    }
    else if(w>=700) {   // 테블릿 버전이면
        $("nav").css("width", "90%").css("marginTop", "0px");
        $("nav").css("marginLeft","5%");
        $(".tab1 div").css("width", "12%");
        $(".title").css("color", "blue");
        $(".imgText li").css("width", "45%");
    }
    else {   // 모바일 버전이면
        $("nav").css("width", "100%");
        $("nav").css("marginLeft","0%");
        $("nav div").css("width","16.6%");
        $(".tab1 div").css("width", "20%");
        $(".title").css("color", "red");
        $(".imgText li").css("width", "95%");
    }
})

$(function() {
    $(".tab1 div").on("click", function() {
        $(".tab1 div").css("border", "1px solid #ccc");
        $(".tab1 div").css("background", "white").css("color","black");
        $(this).css("background", "#AF231C").css("color","white");
        $(this).css("border", "none");
    })
})

















// 제이쿼리에서 사용법
$(window).resize=function() {
      
}