day 10

• extension >> SCSS IntelliSense, PostCSS Sorting 추가

 

• (layout03.scss) white-space: nowrap; >> txt 강제로 한 줄 만들기

 

• rem ; 반응형, html 전체폰트에 *rem 하는 방식으로 전체 txt크기 조절이 가능

 

• javascript로 css hover와 같은 기능 사용하기

    - css에서는 cascading의 이유로 자식태그에서 부모태그를 제어하는 것이 불가능!

    - 그래서 javascript를 쓴다!

 

ex)

<script>

const gnb = document.querySelector("#gnb");
      const header = document.querySelector("#header");
      const customer = document.querySelector("#header .customer");
      gnb.addEventListener("mouseenter", function () {
        header.classList.add("on");
      });
      gnb.addEventListener("mouseleave", function () {
        header.classList.remove("on");
      });
      customer.addEventListener("mouseenter", function () {
        header.classList.add("on");
      });
      customer.addEventListener("mouseleave", function () {
        header.classList.remove("on");
      });

</script>

 

       -  var, let, const >> var는 이전에 변수명 선언으로 썼으나 지금은 let, const가 있어 사용 X

                             >> 변수선언 const/let 변수명

                             >> const는 '상수'

                             >> 변수명은 한글로 해도 작동은 하지만 영어가 기본,

                                  띄어쓰기나 특수기호는 X

       - document.querySelector ("불러올 element(#id, .class)")

          >> doucument : 페이지(화면영역)

          >> querySelector : 지정한 요소를 불러오도록 함

       - .addEventListener("mouseenter,/mouseleave", function ( ) { }) 

          - addEventListener : 특정 이벤트를 인식하도록 함

          - mouseenter,/mouseleave : 마우스 올렸을 때/치웠을 때 

       - 불러올 element.classList.add(" ") : (" ")부분 나타남

                                        .remove(" ") : (" ")부분 사라짐

 

* index.html>>header에 class="on"을 붙이지 않고 css에만 header>>&.on에 값을 설정해도 작동한다.

(js가 html/css 모두를 제어하고 있으므로~)

대신 html파일에 class="on"을 주면 처음부터 depth02가 펼쳐진 상태에서 동작한다.

 

 

 

• slick >> swiper와 함께 많이 쓰이나 jQuery가 있어야 함 (jQuery의존)

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

 

 

 

* 알씨(Alsee)가 깔려있으면 이미지이름 일괄편집 가능함! 

 

 

 

* airbnb prettier code config

; airbnb에서 prettier를 잘 사용하고 있어 공유되고 있는 설정환경