방향

[CSS] 텍스트 세로로 표시하기

텍스트를 세로로 타이핑하는 방법으로 쉬운 방법인 CSS에 존재하는 writing-mode 속성을 소개하겠습니다. 코드 /* 세로로 왼쪽 -> 오른쪽 */ writing-mode: vertical-lr; /* 세로로 오른쪽 -> 왼쪽 */ writing-mode: vertical-rl; /* 영어는 추가로 사용해야함 */ text-orientation: upright; CSS의 writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있습니다. vertical-lr - 왼쪽에서 오른쪽 vertical-rl - 오른쪽에서 왼쪽 하지만 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시됩니다. 이를 해결하는 방법으로는 text-orientat..

[JS] 마우스 이동 방향 판단하기

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다. 코드 See the Pen mouse movement direction by hyukson (@hyukson) on CodePen. 코드 풀이 // 이벤트 생성 window.addEventListener("mousemove", getMouseDirection); 마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다. let prevX = 0, prevY = 0; // 이전에 있던 좌표 function getMouseDirection(event) { const xDir = prevX