본문 바로가기

전체 글

마우스의 위치 및 크기 관련 기능 클릭한 전역 위치 #윈도우(웹브라우저) 영역을 기준으로 하는 전역 위치 - 마우스 스크롤 값이 계산되지 않음 mouseEvent.clientX mouseEvent.clientY #문서 영역을 기준으로 하는 전역 위치 - 문서의 스크롤 값이 적용된 값 mouseEvent.pageX mouseEvent.pageY 클릭한 지역 위치 var offsetX = mouseEvent.pageX - $(target).offset().left; var offsetY = mouseEvent.pageY - $(target).offset().top; 더보기
transform center 정렬 센터로 정렬시킬 오브젝트에 높이와 너비 값을 주고아래와 같이 입력하면 된다. position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); https://css-tricks.com/centering-percentage-widthheight-elements/ 더보기
clip 이용 텍스트 숨김처리 .blind border: 0 clip: rect(0 0 0 0) height: 1px margin: -1px overflow: hidden padding: 0 position: absolute width: 1px border: 0; padding: 0;을 추가하여 상속되거나 적용될 수 있는 스타일을 삭제하여 안전하게 사용한다. margin: -1px;를 사용하여 부모요소 밖으로 위치시킨다. ​ 레이아웃에 영향을 끼치지 않도록 position: absolute;스크린 리더가 읽을 수 있도록 width: 1px; height: 1px;눈에 보이는 부분을 제거 clip: rect(1px, 1px, 1px, 1px);clip과 overflow의 차이점은 같은 박스를 대상으로 적용하지 않는다. clip은 con.. 더보기
lorem picsum lorem picsum코딩 시 최종 결과물에 들어갈 실제 사진이 없는 경우 사용해 보면 좋을 것 같다.https://picsum.photos 더보기
[vscode] multi-line editing vscode에서 코딩하다가 여러 줄에 같은 내용을 삽입해야 할 경우 한번에 입력할 수 있는 multi-line editing 방법. 1. 같은 위치에 삽입할 경우 Ctrl + Alt 누른 상태에서 방향키(↑, ↓)로 조작 후 입력 2. 다른 위치에 삽입할 경우 Alt 누른 상태에서 마우스로 각 위치 클릭 후 입력 3. 해제 시 Esc 버튼 클릭 더보기