TIL 2023.01.17

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법

• 요소__일부분 Undersore(Lodash) 기호로 요소의 일부분을 표시 
• 요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시 

> 선택자 사용함에도  예기치못한 중복 css 적용을 막기위해 요소__일부분   button이라는 class 와 primary, success, error class 의 종속성을 명시하기 위해 요소--상태로 표시

position: fixed , absolute 적용시

1. width: auto 로 변환됨. -> width: 100% 명시 혹은 너비 명시

2. positon:fixed,absolute top: 0 bottom 0 margin: 0 auto 와 같이 세로중앙정렬을 postion으로 할때 height 명시해야함 .

3. inline 태그내 적용시 자동으로 display :block 화

 

둥근 모서리 사각형 내부 자식 img 태그로 이미지를 채워 넣을 때: 부모요소에 overflow: hidden

 <div class="badges">
        <div class="badge"><img src="./images/badge1.jpg" alt="badge1" /></div>
        <div class="badge"><img src="./images/badge2.jpg" alt="badge2" /></div>
      </div>

header .badges {
  position: absolute;
  top: 132px;
  right: 12px;
}
header .badges .badge {
  border-radius: 10px;
  overflow: hidden;
  /* 둥근 모서리로 된사각형에 이미지를 넣을때 모서리밖으로 넘치지 않도록  */
  margin-bottom: 12px;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.15);
}

 

gsap

js animation library.  제이쿼리보다 성능이 좋고 사용법이 간단하다는 장점. 

옵션 작성시 css 속성값에 해당하는 객체 속성값 작성시 숫자는 그대로 작성하는 반면 문자열은 '' 따옴표를 감싸서 작성해야함에 유의한다.

const badgeEl = document.querySelector('header .badges');
window.addEventListener(
  'scroll',
  _.throttle(() => {
    // console.log(window.scrollY);
    // badgeEl.style.display = window.scrollY > 500 ? 'none' : 'block';

    if (window.scrollY > 500) {
      // gsap.to(요소,지속시간,옵션)
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: 'none',
        // 숫자는 그대로 작성하는데 문자열은 '' 에 감싸기
      });
    } else {
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: 'block',
      });
    }
  }, 300)
);

 

lodash.js 에서 throttle 

 화면을 스크롤하면 함수 수십개가 한 번에 실행이 되는데 그것을 0.3 초 단위로 부하를 줘서 

이를 방지하는 용도

const badgeEl = document.querySelector('header .badges');
window.addEventListener(
  'scroll',
  _.throttle(() => {}, 300)
);

 

기타 

DOM :  웹사이트의 콘텐츠 구조, 스타일 요소를 구조화시켜 표현 

API Application programming interface 

defer HTML 을 전부 읽고 해당 파일을 읽으라는 명령어 

querySelector : 1 개 혹은 제일 처음 1개 

querySelectorAll :  여러개 

classList.add()

classList.contain()

element.textContent :  모든 텍스트를 그대로

element.innerText : 불필요한 공백을 제거하고 텍스트로 반환