프론트엔드 웹 개발을 하다 보면 HTML 요소에 동적 ID나 상태 값을 임시로 저장해야 하는 상황을 자주 겪게 된다.다만 클래스(class) 이름에 파싱하기 힘든 데이터 값을 억지로 욱여넣거나 브라우저 명세에 없는 비표준 속성을 무분별하게 정의해서 마크업을 오염시키는 경우가 많다.이번 글에서는 HTML5 커스텀 데이터 속성(data-*)이 정확히 무엇인지,···
웹 서비스에서 모달(Modal) 팝업을 구현할 때 z-index가 꼬이거나 배경 스크롤이 멋대로 움직이는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 여전히 z-index: 99999 같은 임시방편 스크립트를 남발하거나 중량 라이브러리를 설치해서 해결하려 한다. 이번에는 최신 HTML5 표준 요소인 dialog 태그와 showModal() 메서드가 ···
웹 애플리케이션을 개발하면서 마우스로 요소를 드래그하여 순서를 바꾸거나 파일을 업로드하는 드래그 앤 드롭(Drag and Drop) 기능을 한번쯤 구현해봤을 것이다.다만 대부분의 개발자들은 dragover 이벤트에서 왜 preventDefault()를 호출해야 하는지, 혹은 드롭 존(Drop Zone)에 진입할 때 자식 요소 때문에 이벤트가 튀는 현상을 정···