[수업내용] 2022.08.11. ~ 2022.08.12.

2022.08.11. ~  2022.08.12.
수업내용정리

 

---

php를 사용하는 그누보드

ctrl shift R 강력한 새로고침 // 해시를 지우고 재로드 // 너무 많이 하면 트래픽 초과로 막힐 수 있음

f5는 컴퓨터에 저장된 해시를 바꾸지 않은 상태로 로드

 

display:flex;를 주고, slick을 돌리면 깨지기 때문에 block으로 하고 float를 쓰는 게 좋음

사이공간은 플렉스가 아니어서 gap을 사용 못함

---

padding: 0 25px; 을 gap 대신에 사용해야함

.Customer .container>li { 
    flex-grow: 1; 
    width: 33.333333%;
    overflow: hidden; 
}

👉 아래와 같은 방법인데, 아래는 디스플레이블록을 한 거고, 위에는 flex를 한 거


/* .Customer .container>li:nth-child(2) { 
    overflow: hidden; 
} */ 
/* .Customer .container { 
    display: block; 
    /* flex가 되면 슬라이드를 넣었을 때 깨짐 */ 
/* width: 1250px;} */ 
/* .Customer .container::after { 
    content: ""; 
    display: block; 
    clear: both; 
} */ 
/* .Customer .container>li { 
    float: left; 
    width: 33.3333333%; 
    padding: 0 25px; 
    min-height: 430px; 
} */ 
/* .Customer .container>li~li { 
    border-left: 1px solid var(--bl); 
} */

 

❗float이 뜰 때, 부모요소에 overflow:hidden을 주면 가라앉음.

 

---

flex도 z-index가 먹음

 

풀페이지 이전에는 자바스크립트-스크롤이벤트로 썼고 pagepiling?을 썼음

풀페이지 2.97은 라이센스 없어도 사용가능 - 제이쿼리기반(not js)좀 불편하긴 함 첫화면에서 애니메이션 붙이는 게 제약이 걸려서 안됨

 

$(function () {
    $('#main').fullpage({
        anchors: ['page01', 'page02', 'page03'],
        // navigation: true,   👉 네비게이션 쓰면 편하나, 내가 커스텀 하기 힘들다

        👉 on 붙여서 li의 길이 조절
        afterLoad: function (ank, idx) {
            $('.gnb li').removeClass('on');
            $('.gnb li').eq(idx - 1).addClass('on');
        }
    });
})

white-space: nowrap; 
👉  스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성