css transition에 opacity 적용 시 주의사항
페이지 세로 위치에 따라 네이게이션의 표출/숨김을 부드럽게 처리하거나, 팝업 닫기 버튼을 클릭했을 때 창을 서서히 사라지게 하기 위해 transition: opacity 스타일이 많이 사용됩니다. 화면상에서는 아주 부드럽고 자연스러워 아무 문제가 없을 것 같지만, opacity는 말그대로 투명도이므로 눈에 보이지만 않을 뿐, 여전히 그 자리에 놓여있다는 것을 주의해야합니다. transition: opacity 스타일을 설정했을 경우, transition이 완료되었을 때 해당 엘리먼트의 display: none 스타일을 설정해야 의도하지 않은 사용자 인터렉션을 방지할 수 있습니다. 위 gif 에서 커서가 포인터로 변하는 것을 확인할 수 있습니다. 클릭하면 해당 메뉴로 이동도 됩니다. 큰 문제가 아니라고 생..
이 글은 1년 전 게시한 은행 적금 그리고 P2P 글에 이어지는 후기입니다. 은행 적금/예금과 이율을 간략히 계산해본 후, 나는 세 가지 타입의 P2P 투자를 시작했다.1. 부동산: 피플펀드2. 자영업자: 펀다3. 개인: 렌딧 먼저, 예상 수익을 포함한 결과부터 정리해보면 다음과 같다.1. 피플 펀드- 누적 투자금: 15,000,000- 총 이자수익: 974,985- 투자 기간: 18.03. - 19.03.2. 펀다- 누적 투자금: 12,430,000- 총 이자수익: 389,418- 투자 기간: 18.01. - 19.07.3. 렌딧- 누적 투자금: 2,100,000- 총 이자수익: 155,363- 투자 기간: 18.02.02. - 21.03.23. 각 타입에 대한 의견은 다음과 같다.1. 피플펀드- 부동..
WebGL 결과물은 보통 PNG 이미지와 비교를 하는 방식으로 테스팅을 진행합니다. context 가 2D 인 경우, pixelmatch 의 도움을 받아 다음과 같이 진행하면 됩니다. const width = targetCanvas.width; const height = targetCanvas.height; const refCanvas = document.createElement("canvas"); refCanvas.width = width; refCanvas.height = height; const refContext = refCanvas.getContext("2d"); refContext.drawImage(image, 0, 0); const mismatch = pixelmatch( context.ge..