Element.scrollIntoView는 element의 부모 컨터이너를 scrollIntoViewOptions에 따라 element가 보이도록 스크롤합니다. Element.scrollIntoView()// 또는Element.scrollIntoView(alignToTop)// 또는Element.scrollIntoView(scrollIntoViewOptions) 매개변수alignToToptrue element의 top이 스크롤 가능한 부모 컨테이너의 top과 정렬됩니다.scrollIntoViewOptions: {block: "start", inline: "nearest"}와 동일한 동작을 합니다.default 동작입니다.false element의 bottom이 스크롤 가능한 부모 컨테이너의 bottom과..

Window.scrollBy는 문서의 지정된 위치로 스크롤합니다.현재좌표 좌표를 기준으로 페이지를 스크롤합니다.scrollTo와의 차이점은 scrollTo는 절대좌표를 기준으로 스크롤하고 scrollBy는 상대좌표(현재 스크롤 위치)를 기준으로 스크롤합니다. 사용법window.scrollBy(x_좌표, y_좌표)Element.scrollBy(x_좌표, y_좌표)// 또는window.scrollBy(scrollByOptions)Element.scrollBy(scrollByOptions) 매개변수x_좌표는 스크롤할 수평 픽셀값y_좌표는 스크롤할 수직 픽셀값또는scrollByOptionstop 창 또는 요소를 스크롤할 Y축을 따라 픽셀 수를 지정left 창 또는 요소를 스크롤할 X축을 따라 픽셀 수를 지정..

Window.scrollTo는 문서의 지정된 위치로 스크롤합니다.절대 좌표를 기준으로 페이지를 스크롤합니다.Window.scroll과 같은 동작을 수행합니다.scrollBy와의 차이점은 scrollBy는 현재좌표(상대좌표)를 기준으로 스크롤하고 scrollTo는 절대좌표를 기준으로 스크롤합니다. 사용법window.scrollTo(x_좌표, y_좌표)Element.scrollTo(x_좌표, y_좌표)// 또는window.scrollTo(scrollToOptions)Element.scrollTo(scrollToOptions) 매개변수x_좌표는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축y_좌표는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축또는scrollToOptionstop 창 또는 요소를 스크롤..

최근 모 기업의 과제를 진행했는데, 평소에는 당연시 여기는 기능을 구현하는 것이었습니다.이 기능을 구현하면서 Selection API와 Range에 대해 처음 알게 되었고, 당연히 과제를 미흡하게 완성했습니다.최근 회사에 입사지원서를 넣으면서 자기소개로 "기본에 충실하면서 ~"라는 문구를 넣었는데, 과제를 진행해 보니 기본에 충실하지 못하다는 것을 깨달았습니다.기본에 충실한 개발자가 되도록하는 노력의 일환으로 Selection API와 Range에 대해 조사해 봤습니다. Selection API를 사용하려면 우선 Range 객체에 대해 알아야합니다.RangeRange는 사전적으로 시작점과 끝점의 쌍(Pair)을 의미합니다.Range 객체는 Selection의 범위를 관리하는 객체입니다. Range 객체..