ToMakeSure

태그를 사용해서 표를 만들때 헤더에 position:sticky , top:0 값을 주고 스크롤을 하면 헤더 border가 사라지고 그 뒤로 body의 정보가 보인다. 이럴때 테이블에 borderCollapse: "separate", borderSpacing: 0 값을주면 이러한 현상을 막을 수 있다. No. {transactionData.map((data, index) => ( { }} > {index + 1} ))} tableContainer: { width: "100%", height: "76vh", overflow: "auto", borderBottom: "1px solid #dfdfdf", }, table: { width: "100%", borderCollapse: "separate", bord..

이벤트 버블링은 선택한 엘리먼트가 부모 요소를 가지는 경우에 발생합니다. 모든 요소들은 body부터 하위 자식 요소들까지 계층 구조를 가지고 있습니다. 만약 부모 요소 안에 있는 어떤 엘리먼트를 클릭한다고 생각해봅시다. 아래와 같이 dep1, dep2를 지나야 dep3를 클릭할 수 있습니다. dep3를 클릭하면 dep2와 dep1이 모두 클릭됩니다. 만약 dep3 만 클릭하고 싶다면 stopPropagation() 함수를 사용하여 이벤트 버블링을 막을 수 있습니다. { alert("전체 영역 클릭"); }} > 전체 영역 { event.stopPropagation(); alert("겹쳐진 영역 클릭"); }} > 겹쳐진 영역 위와 같이 stopPropagation() 함수를 넣어주면 이벤트가 부모요소로 ..