[240902] CSS & JS 마스터 3일차 TIL (스크롤 & 이벤트 버블링)

수업 중 기억하고 싶은 내용

CSS 

1. 상대위치 & 절대위치

• 절대위치: 좌상단, (0, 0)을 기준으로 하는 위치 
  • (0, 0)애서 고정되어 있기 때문에 전체에서 고정된다. 스크롤의 이동에 영향을 받지 않고 위치를 유지한다.
  • position: absolute -> 부모 요소 중, position의 속성이 [relative, absolute, fixed, sticky]인 요소를 찾아 절대좌표의 기준으로 잡음. 부유 객체(다른 요소와 겹치지 않음)
• 상대위치: 현재 좌표를 기준으로 하는 위치
  • position: relative -> 원래 있던 자리 기준으로 위치 조정
  • position: fixed -> viewport 기준으로 위치 조정 (브라우저 창 기준 -> 위치가 변하지 않음)
  • position: sticky -> 부모 요소의 좌표 기준으로 위치 조정

 

2. Overflow: 영역을 벗어난 부분을 표현하는 방법 (default: overflow-y)

• overflow[-y, -x]: scroll; -> x좌표는 가로 스크롤, y좌표는 세로 스크롤
  • flex-shrink: 0; -> 가로 스크롤 시 자식 요소가 찌그러지는 일 방지, 지정된 크기 유지
• overflow: hidden -> 넘치는 부분 숨기기

 

3. position: sticky

• 웹 페이지나 특정 요소 스크롤 시 특정 위치에 고정되는 기능
• position: fixed와 차이점

sticky VS fixed	Sticky	Fixed
고정 위치	스크롤 이동, 임계점 고정	항상 고정된 위치
기준	부모 요소	브라우저 창(스크롤 상관 없음)
위치	항상 부모 요소 안에 존재	화면에서 위치 변화 없음

• backdrop-filter: blur(); -> filter: blur()와 다르게 sticky element 뒤의 배경만 흐리게 만든다. 뒤에 있는 요소가 보임. filter는 요소 자체를 흐리게 만듦.

 

Javascript

1. 스크롤 기능

• 윈도우 스크롤 (window.-)
  • window.scrollTo({ top: 0 }): 지정된 위치(스크롤 맨 위)로 이동
  • window.scrollTo({ top: 0, behavior: "smooth" }): behavior: "smooth" : 부드럽게 이동
  • window.scrollBy({ top: -500 }): 현재 위치를 기준으로 이동 (지금 위치에서 위로 500 이동)
• 요소에서 사용하는 스크롤
  • 요소.scrollTo({ top: 0 }): 요소의 스크롤바를 지정된 위치로 이동
  • 요소 안에서만 동작, 전체 페이지와는 무관
  • 스크롤하려고 하는 요소는 overflow 사용해서 스크롤 가능하도록 설정 필요
• 스크롤 감지 (EventListener 사용)
  • 이벤트 리스너: 사용자의 이벤트를 감지하고, 그에 대한 반응을 정의
  • addEventListener("이벤트 종류", 기능(함수));
  • removeEventListener("이벤트 종류", 기능(함수)); -> 선언한 add문과 완전히 동일하게 입력해야함.
  • window.scrollY: 수직으로 얼마나 스크롤했는지를 픽셀 단위로 반환
  • 요소.scrollTop: 선택한 요소의 수직 스크롤 위치를 픽셀 단위로 반환

 

2. 주소창

• URI(Uniform Resource Identifier)
  • 웹에서 자원을 식별하는 문자열의 집합 : URL + URN
• URL(Uniform Resource Locator)
  • 웹 주소, 자원의 위치를 지정
• URN(Uniform Resource Name)
  • 자원의 이름 지정, 자원의 위치와 무관 자원을 고유하게 식별하는 데 사용
• 앵커(Anchor, Fragment)
  • 브라우저에게 특정 HTM 요소로 스크롤하도록 지시

 

3. 이벤트 버블링

• 이벤트 버블링: 하위 요소의 이벤트가 상위 요소에도 영향을 미치는 현상
  • 원인 1. 함수가 있는 곳이 전체를 감싸는 곳인 경우 -> 해결 1. event.target.id 말고 event.currentTarget.id 사용
  • preventDefault: 이벤트가 기본적으로 수행하는 동작 막음(링크 클릭 시 페이지 이동, 폼 제출 시 페이지 리로드 등)
  • 기존에 있는 함수로는 preventDefault만 사용해도 괜찮지만, 내가 만든 함수는 stopPropagation을 사용해야 함.
  • stopPropagation: 이벤트가 상위 요소로 전파되는 동작 막음
• 이벤트 리스너 추가 & 삭제
  • 이벤트 리스너 추가: addEventListener("이벤트 종류", 기능(함수));
  • 이벤트 리스너 삭제: removeEventListener("이벤트 종류", 기능(함수)); -> 선언한 add문과 완전히 동일하게 입력해야 함.

 

4. 이벤트 캡처링

• 이벤트 캡처링: 이벤트 버블링의 반대 개념, 클릭 시 부모에서 자식으로 가는 식의 이벤트 진행
• 기본 기능이 아니라 강제로 실행시켜줘야 함. : {capture: true}
  • addEventListener("이벤트 종류", 기능(함수), {capture: true});
  • removeEventListener("이벤트 종류", 기능(함수), {capture: true});

 

짧은 회고

스크롤 기능은 꽤 많이 만들어봤다고 생각했는데 차근차근 따라 만들어보니까 어떻게 만들어야 하는지 이해가 됐다. (그동안은 이해 못 하고 만드셨다는 거지~) 이벤트 버블링 부분은 중요하다고 하셨으니까 꼼꼼하게 복습해야겠다. 이벤트 버블링이라고 들었을 땐 뭔지 몰랐는데 코드로 보니까 다른 코드를 참고할 때 자주 보이던 코드여서 조금 반갑기도 했고, 제대로 모르고 사용한 게 한두 개가 아니라는 생각에 어지러웠다. 지금부터라도 잘 알면서 쓰면 되는 거지...