height: 100%인데 자식이 부모의 min-height를 채우지 않는다
부모의 min-height가 180px이어도 height: 100%인 자식은 24px에 머물 수 있다. 일반 블록의 auto·최소 높이·명시 높이를 실제 브라우저에서 비교하고, 스타일 조회값과 확정 높이의 차이 및 flex stretch를 선택할 조건을 설명한다.
빌드노트
프런트엔드
프런트엔드 카테고리의 글입니다.
글 검색
글 목록
총 48개의 글
-
-
위임한 once 클릭 리스너는 다른 버튼 클릭에도 소모된다
부모에 위임한 once 클릭 리스너는 대상 버튼을 거르기 전에 소모될 수 있다. 메뉴를 먼저 누른 경우의 호출·처리 횟수를 비교하고, 원하는 처리를 한 번 끝낸 뒤 removeEventListener로 제거하는 위치를 확인한다.
-
새 카드를 붙였는데 querySelectorAll 결과 개수는 그대로다
querySelectorAll로 저장한 목록은 새 카드 추가와 삭제를 자동 반영하지 않는다. 같은 길이인데 ID가 다른 관찰과 제거된 노드 참조를 확인하고, 작업 시 재조회할지 유지되는 부모의 이벤트 위임을 사용할지 고른다.
-
JSON에서 받은 큰 ID의 마지막 숫자가 바뀐다
JSON 숫자로 받은 큰 ID 두 개가 파싱 뒤 같은 값이 되는지 비교한다. 뒤늦은 String·BigInt 변환으로 잃은 숫자가 돌아오지 않는 이유와, 정확한 원본부터 문자열로 전달할 위치를 실제 Node 출력으로 설명한다.
-
버튼 클릭 핸들러에서 await 뒤 currentTarget이 null이 된다
네이티브 버튼 클릭에서 타이머 대기 뒤 currentTarget이 null이 되는 조건을 확인한다. 동기 구간에 요소 참조를 보존하는 수정과 target의 차이, 즉시 완료된 Promise로는 증상이 숨을 수 있는 이유를 실제 실행 결과로 설명한다.
-
flex order로 버튼을 옮겼는데 Tab 초점은 원래 순서로 간다
flex order로 바뀐 화면 순서와 Tab 순서를 버튼 세 개에서 비교했다. DOM 목록·실제 좌표·키보드 초점을 대조해, 단계의 순서를 CSS 대신 마크업에서 맞추는 방법을 설명한다.
-
ellipsis를 넣었는데 긴 제목이 계속 튀어나온다
ellipsis 선언만으로 제목의 폭과 줄바꿈은 바뀌지 않는다. inline·block, nowrap, overflow와 실제 사용 폭을 비교하고, 같은 clientWidth·scrollWidth에서도 표시가 달라지는 이유를 확인한다.
-
Object.assign으로 복사했는데 원본의 중첩 배열도 바뀐다
Object.assign과 spread로 최상위 객체를 새로 만들어도 중첩 배열은 원본과 공유될 수 있다. 실제 수정 경로의 참조를 비교해 배열과 중간 객체를 함께 복사하고, 전체 분리가 필요할 때 structuredClone의 지원 타입을 확인하는 방법을 설명한다.
-
cloneNode(true)로 복제한 버튼에 클릭 동작이 없는 이유
cloneNode(true)는 자식 노드와 속성을 복사해도 addEventListener 리스너는 옮기지 않는다. 실제 클릭으로 원본·복제·재등록 복제를 비교하고, 고유 ID와 객체 참조를 확인한 뒤 직접 등록 또는 유지되는 컨테이너의 이벤트 위임을 선택한다.
-
버튼 안 아이콘만 반응이 없으면 event.target에서 버튼을 다시 찾는다
목록에 위임한 클릭이 버튼 안 span·SVG에서 빠지면 target과 currentTarget을 구분한다. 실제 클릭으로 matches와 closest의 차이를 비교하고, 컨테이너 포함 관계와 중첩 영역의 소유권을 확인하는 코드를 제시한다.
-
width 100%인데 padding을 넣자 부모 밖으로 넘친다
width 100%인 일반 블록에 padding과 border를 더하면 content-box에서는 테두리 폭이 부모보다 커진다. 320px 부모의 실측값으로 border-box 적용 전후를 비교하고, margin은 지정 폭에 포함되지 않는다는 경계까지 확인한다.
-
preventDefault를 호출했는데 휠 스크롤이 멈추지 않는다
wheel 핸들러의 preventDefault 호출만으로 취소 성공을 판단할 수 없다. 명시적 passive true/false와 cancelable 조건의 실제 브라우저 비교로 defaultPrevented와 dispatch 반환을 읽고, 취소가 필요한 등록만 조정한다. 합성 이벤트와 실제 스크롤 검증의 한계도 구분한다.