수업내용

[수업내용] 현대엘리베이터 실습_jquery(feat. float)

쿨키드 2022. 9. 20. 23:15
현대엘리베이터 실습_jquery
제이쿼리로 현대엘리베이터 사이트 만들어보기(feat. float)

 

2022.08.29.

html {   
    ✨ box-sizing: border-box;  
}
*,
*:before,
*:after {
    box-sizing: inherit;
    outline: none;
}
body {
   ✨ margin: 0;
   ✨ padding: 0;

✨ 기본이고, 중요하다는 의미
float을 쓰면 , gap으로 간격을 잡는 게 아니라 padding으로 잡아줘야함

 

$(function () {
    // 
    $('.top_close_btn').on('click', function () {
        $('.TopBanner').addClass('on') //addClass('on') 대신, slideUp('on')을 하면 됨
    })
    //
})
✔ 탑배너를 제이쿼리에서는 slideup을 쓰는데, js에는 이런 기능이 없어서 on을 붙이고 css로 조절해야함
slideup이 실행됨과 동시에 높이 값이 계산되고, 높이 변화에 transition(기본이 0.4s)과 overflow:hidden이 붙음
 
height:auto;는 디스플레이 논/블록과 같이 높이값 수치를 정확하게 가지지 않기 때문에 transition이 안 먹음
 
.TopBanner {
    background: #008850;
    color: #f9f9f9;
    overflow: hidden;
    height: 100%; 👉100%를 줘도 먹히지 않음 // 100%는 부모값을 상속받기 때문 그래서 기준값이 되어주는 게 있어야한다.
    transition: 0.4s;
}
float은 레프트 레프트는 괜ㅊ낳은데 right로 가는게 많으면 순서가 꼬여서 안됨
사이즈가 없으면 백그라운드로 img를 깔아도 안 보임

 

 <h1>
      <a href="/">
        현대엘리베이터
      </a>
</h1>

a 백그라운드로 로고를 까는 거여서, h1 로고 들어갈 자리에 텍스트로 로고를 적어줌
.Header .Gnb>ul>li {
    float: left;
}

.Header .Gnb>ul>li>a {
    display: block;
    padding: 0 35px;
}

👉a를 블록으로 하고, 패딩을 주면 손가락이 계속 이어짐

 

min-width: 100%
overflow:hidden;
 
오늘하루보지않기는 쿠키를 사용해서
쿠키는 휘발성을 가지고 있음(설정된 시간이 지나면 사라짐)
쿠키가 있으면 팝업창이 안 뜨고, 쿠키가 없으면 팝업창이 뜨고..

 

2022.08.30

 <section class="section03">
            <div class="slider_box">
                <!-- case 1200라인에 맞는 오른쪽으로 치우친 박스 -->
                <div class="left">left</div>
                <div class="right">right</div>
            </div>
</section>
.section03 .slider_box {
    float: right;
    width: calc((100% - 1200px) / 2 + 1200px);
}
float: right가 생기면 padding이 안 먹힘
 
슬라이드 화살표 위에서도 슬라이드가 넘어갈 수 있게 하는 방법

.Section01 .slider_handler i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}
.Section01 .slider_handler i:first-child {
    margin: 0 0 0 -700px;
}
.Section01 .slider_handler i:last-child {
    margin: 0 0 0 700px;
}
.Section01 .num {
    position: absolute;
    bottom: 150px;
    📌left: 50%;
    📌margin: 0 0 0 -600px;
    columns: #fff;
    font-size: 45px;
}


and

.Section01 .slider_dots { 
    position: absolute; 
    left: 50%; 
    margin: 0 0 0 600px; 
    transform: translateX(-100%); 
}

📌 1200px 왼쪽에 딱 맞게 하는 공식

2022.08.31

float: left를 쓰면 쪼그라 들어서
높이가 무시됨. 그래서 섹션에 padding: 100px 0에서 아래쪽 패딩이 먹히는 상황이 발생 그래서 클리어 픽스를 해줘야함

 

.to_top 클릭하면 위로 올라가는   

 $('.to_top').on('click', function () { 
        $('html, body').animate({ scrollTop: 0 }, 400(=0.4초)) 
    })

.animate 는 css에 transition이 합쳐진 거랑 같음
$(window).on('scroll', function () { 
        var sct = $(window).scrollTop(); 
        sct > 0 
            ? $('.Header').addClass('on') 
            : $('.Header').removeClass('on'); 
        // 스크롤시, .to_top이 나오게 
        sct > 200 
            ? $('.to_top').fadeIn() 또는 show() 
            : $('.to_top').fadeOut(); 또는 hide() 
    });


fadeIn() 트랜지션 오팍시티 결합된 메소드

 

화살표 애니메이션