텍스트

[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] 자동으로 글자 적는 타이핑 효과 구현하기

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 예시 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요! 무한반복 막기 // 지우는 효과 if (letters[i + 1]) remove(); 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 const $text = document.querySelector(".text"); // 입력될 글자 모음 const letters = ["HTML", "CSS", "JavaScript"]; // 글자 입력 속도 const speed = 100; // 현재 지정된 글자 l..

[JS] Canvas에서 가운데 정렬 텍스트 그리기

다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다. 첫 번째 코드 const cw = width / 2; const ch = height / 2; // 그리는 기준점을 글자의 가운데로 ctx.textAlign = "center" ctx.fillStyle = "#000"; ctx.fillText( text, cw, ch ); ctx.fill(); 글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다. 두 번째 코드 const cw = width / 2; const ch = height / 2; // 그릴 텍스트의 넓이 구하기 const textWidth = ctx.measureText(text).width; ct..