인프런의 '1분코딩' 님께서 진행하는 무료수업 BBC 인터랙티브 페이지 클론 코딩 수업을 듣고 정리했습니다.
좋은 강의를 무료로 제공해주신 '1분코딩'님께 감사드립니다.
스크립트로 스크롤 구간에 따라 그래픽 아이템들의 visible 클래스를 붙였다 뗐다 해주면 된다 각 말풍선과 이미지가 일치해야 하므로 말풍선에 따라 이미지를 정해주면 된다. 그러기 위해서는 이미지와 말풍선의 쌍을 맞춰주어야 한다. 이미지와 말풍선에 인덱스를 붙여서 같이 보여주도록 설정하면 된다.
- data-로 시작하는 속성은 html 표준 속성이다. 뒤에 아무 말이나 써서 원하는 값을 표준속성으로 지정할 수 있다.
- data-로 시작하는 속성은 조금 특별해서 JS의 .setAttribute로 속성을 추가할 수도 있지만 .dataset이라는 객체가 해당 엘리먼트에 미리 만들어져있다.
- getBoundingClientRect: 엘리먼트의 값을 가져온다. x, y, width, height등 해당 엘리먼트의 위치와 크기를 가지고 있다!
- 속성을 쓸때 caniuse에서 검색해보자. sticky는 IE에서 아예 사용불가(-_-) 하므로 position: fixed + JS로 스타일링 해줘야 한다.
- box-sizing: border-box;로 하면 패딩과 보더가 height, width에 포함된다.
- position의 기본값은 static이다.
- 만약 position이 기본값이 아니면 z-index 값을 가지고 있으며 이 값으로 높이를 지정한다.
- z-index가 활성화되는 position이고 z-index의 값을 안주면 아래에 있는 컴포넌트가 위에 올라온다.
- 기본적으로 transition은 가속도가 있다. linear를 붙여서 일정한 속도로 만들고 0.5초의 대기시간을 추가한다.
- transition: transition-duration transition-delay attrs;
- translateX 안에 퍼센트를 쓰면 해당 엘리먼트 자신의 크기가 된다.
- will-change의 의미: 해다 엘리먼트의 지정속성이 바뀔 것이라고 '미리' 브라우저에게 알려줘서 브라우저가 준비를 할 수 있게 함. 다만 남발하면 브라우저가 너무 많은 정보를 받으므로 과부하가 걸릴 수도 있음
- (() => {})(); 의 의미: 전역변수 사용을 회피하기 위해 즉시실행 익명함수를 만듬. 이 화살표함수 안에서 변수를 만들면 지역변수가 되어 외부에서는 접근할 수가 없게 된다. 즉, 변수들을 보호할 수 있고 충돌을 방지할 수 있다.
- 이벤트리스너의 콜백함수에 많은 코드가 들어가는 것은 좋지 않다. 이벤트핸들러는 조건 판별만 해주고 각각의 세세한 기능들은 함수로 쪼개주는 것이 좋다!
- 기능을 함수로 따로 빼면 각각의 기능을 호출하여 독립적으로 사용이 가능하다.
- intersection Observer: JS에 존재하는 기능. 이 기능을 통해 어떠한 요소가 눈에 보이는지 안보이는지를 체크할 수 있다. 기능이 많음. 현재화면의 스크롤된 비율, 보이는지, 얼마나큰지, 언제 보일지에 대한 판단 등등 옵션이 많음. 지금은 여기서 우리에게 필요한 기능만 사용. 더 공부하고 싶다면 IntersectionObserver를 구글에 검색해서 찾아보자 heropy.blog 추천해주심
- JS의 문자를 숫자로 바꾸는 방법은 여러가지가 있다. 문자열에 * 1 을 해줘도 된다.(물론 나는 회사에서 해당값을 명시적으로 int로 바꾼다는 뜻을 주기 위해 paseInt를 사용한다.)