링크를 함부로 바꾸지 마세요

1 week ago 19

링크는 클릭하면 이동하는 버튼 이상의 기능을 제공함. JavaScript로 이동시키는 버튼은 새 탭 열기, URL 복사, 키보드 탐색 등 실제 링크의 기능을 대체하지 못함 실제 링크의 클릭을 가로채 팝업으로 열면 브라우저의 로딩 상태 확인, 취소, 오류 확인과 재시도, 탭 정리 등 기본 기능을 활용할 수 없게 됨 페이지 이동과 로딩은 브라우저에 맡기는 것을 권장함. 직접 만든 로딩 애니메이션과 JavaScript 팝업 대신 실제 링크와 target="_blank"를 사용해야 함 무한 스크롤은 페이지 내 검색, 북마크, Home/End 키와 종종 뒤로 가기까지 망가뜨림. 브라우저는 큰 HTML 페이지도 부분적으로 다운로드된 상태에서 렌더링할 수 있음 <details>와 기본 폼 입력 요소를 직접 재구현하지 않는 것이 좋음. 기본 요소가 제공하는 검색과 스크린 리더 지원, 날짜 형식 처리, 키보드 조작 등을 활용할 수 있음 실제 링크와 브라우저 기본 동작을 유지해야 하는 이유 밑줄과 색상을 입힌 <span>에 onclick으로 window.location을 변경하는 코드를 붙여도 실제 링크의 기능까지 갖추지는 못함 실제 링크에서는 Ctrl로 새 탭, Shift로 새 창을 열거나 Alt로 파일을 저장할 수 있음 우클릭으로 URL을 복사하고, Tab과 Enter로 키보드 탐색과 실행이 가능함 검색 엔진과 스크린 리더가 인식할 수 있고, 마우스를 올리면 목적지 URL을 확인할 수 있음 실제 링크라도 클릭 이벤트를 가로채 팝업을 열면 <a target="_blank">가 제공하는 브라우저 동작을 잃게 됨 브라우저에서는 로딩 진행 상황을 확인하거나 취소하고, 상세 오류 페이지를 확인한 뒤 재시도할 수 있음 여러 페이지를 동시에 열고, 로딩 중에도 원래 페이지를 읽을 수 있음 브라우저 탭이나 창 관리자로 페이지를 정리하고, 북마크하거나 URL을 복사해 다른 사람에게 보낼 수 있음 일관된 동작도 중요함. 팝업을 닫으려다 사이트 전체를 닫아 버리는 일이 있고, 느린 연결에서는 끝없이 도는 로딩 표시만으로 실제 진행 여부나 남은 시간을 알기 어려움 로딩 표시가 원래 페이지까지 가리면 기다리는 동안 기존 내용도 읽을 수 없음 페이지 이동과 로딩은 브라우저의 기본 기능에 맡겨야 함 JavaScript 버튼을 링크 대신 사용하거나 자체 로딩 애니메이션을 만들지 않음 링크 미리보기는 클릭이 아니라 마우스를...

Read Entire Article




피플앤툴즈 네트워크
🛍 샵