BEM (Block Element Modifier)
html 클래스 속성에 이름을 부여하는 작명법으로
두가지 방법이 있는데
- 요소__일부분
- Underscore (Lodash) 기호로 요소의 일부분을 표시
- 요소--상태
- Hyphen (Dash) 기호로 요소의 상태를 표시
- 요소__일부분
<div class="container">
<div class="name"></div>
<div class="item">
<div class="name"></div>
</div>
</div>만약 위에와 같이 html이 작성되었으면
클래스 요소를 정의할 때 css 선택자를 이용해
.container .name
container 안의 name 이라는 요소를 지칭하게 되는데 이때 하위 선택자를 사용하면 item 안 name 에도 원하지 않게 스타일이 적용될 수도 있다.
이 부분을 BEM 방식을 사용해 명시해주면 정확하게 요소를 지칭할 수 있다.
<div class="container">
<div class="container__name"></div>
<div class="item">
<div class="item__name"></div>
</div>
</div>특정한 내용의 일부분을 의미한다는 __ 가 들어가면
이 div 요소가 container의 일부분이고 그 일부분의 이름이 name 이다. 라고 해석할 수 있다.
container__name의 형제요소인 item 요소의 자식요소 name 도 item__name 이라고 작성을 하면
이 요소가 item 요소의 일부분이고 그 이름이 name 이다. 라는 것.
이렇게 작성을 하게 되면 이게 어떤 요소의 일부분이구나! 라는 것을 직관적으로 알 수 있게 된다.
- 요소--상태
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>버튼이 세개 있는데 별도의 클래스 이름이 부여가 되어 있음.
이런 클래스 이름은 버튼의 상태를 의미하는데
첫째줄은 일반 버튼
둘째줄은 무언가 완료가 되었을 때, 전송되었을 때 버튼
셋째줄은 삭제 버튼
이 버튼에 종속되어 있다는 느낌이 안 드는데
이 부분을
<div class="btn--primary"></div>
<div class="btn--success"></div>
<div class="btn--error"></div>--로 변경해 주면 버튼의 상태를 명확하게 알 수 있다.
lodash cdn
함수의 수를 외부에서 가지고 올 수 있는 자바스크립트 라이브러리.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>오픈소스~
위 페이지 젤 처음 항목 </> 를 눌러 head 태그의 script를 불러오는 태그 위에 붙여줌.
그래야 외부에서 가지고 온 것을 프로젝트에 연결해 사용할 수 있음.
위처럼 작성 시 스크롤 할 때마다 함수가 몇십개씩 실행되니
window.addEventListener('scroll', _.throttle());라고 작성을 해주면 설치한 lodash 라이브러리를 통해 명령을 쓸 수있게 script 태그로 연결이 된 거고
throttle 소괄호 사이 함수를 넣어주면 됨.
window.addEventListener('scroll', _.throttle(function(){
console.log('scroll!');
},300)); 여기서 300은 0.3초를 의미. 윈도우 스크롤 이벤트를 통해 함수 수십개가 실행되는데 그것을 0.3초 부하를 줘서 우르르 실행되는 것을 방지하는 기능을 도입한 것.
이 lodash 의 throttle 메소드는 특히 스크롤을 통한 이벤트를 사용할 때 많이 사용함.
_.throttle(함수, 시간)
gsap cdn
gsap 은 자바스크립트 애니메이션 라이브러리.
마찬가지로 첫번째 부분의 </> 를 눌러 내용 복사 -> main.js 앞에 붙여넣기.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>오픈소스. 자유롭게 사용 가능.
gsap.to(badgeEl, .6,{
opacity: 0
});gsap 이라는 애니메이션 라이브러리를 통해 to 라는 메소드로 애니메이션을 동작시킬 건데 동작되는 요소는 badgeEl 이며 0.6초동안 애니메이션 처리가 되고 옵션으로 지정된 opacity가 0으로 점점 투명해지는 애니메이션 처리가 됨.
gsap.to(요소, 지속시간, 옵션);
옵션은 기본 {} 객체데이터가 사용되는 경우가 많음.
이렇게 하면 눈에만 안 보이는 것 뿐이지 그 곳에 배지가 존재하긴 함. 완전히 사라진 것이 아님.
따라서
gsap.to(badgeEl, .6, {
opacity : 0,
display: 'none'
});display 를 none 으로 해주면 되는 데 이때 값이 숫자인 경우는 상관 없지만 문자로 적어야 하는 경우 '' 가 필수이다.
