{"id":13725308,"url":"https://github.com/SDuck4/type-hangul","last_synced_at":"2025-05-07T20:32:00.090Z","repository":{"id":40764005,"uuid":"272347686","full_name":"SDuck4/type-hangul","owner":"SDuck4","description":"⌨️ 한글 타이핑 효과 라이브러리","archived":false,"fork":false,"pushed_at":"2023-07-18T22:37:24.000Z","size":2019,"stargazers_count":87,"open_issues_count":6,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-06T14:54:08.522Z","etag":null,"topics":["hangul","javascript","korean","typing"],"latest_commit_sha":null,"homepage":"https://sduck4.github.io/type-hangul/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SDuck4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-15T05:11:57.000Z","updated_at":"2024-09-17T05:49:38.000Z","dependencies_parsed_at":"2024-02-09T05:15:08.974Z","dependency_job_id":null,"html_url":"https://github.com/SDuck4/type-hangul","commit_stats":{"total_commits":115,"total_committers":2,"mean_commits":57.5,"dds":"0.17391304347826086","last_synced_commit":"ea937a2e7893fcc8f7f65c882e7fa66aff1a945b"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SDuck4%2Ftype-hangul","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SDuck4%2Ftype-hangul/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SDuck4%2Ftype-hangul/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SDuck4%2Ftype-hangul/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SDuck4","download_url":"https://codeload.github.com/SDuck4/type-hangul/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645326,"owners_count":17346124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hangul","javascript","korean","typing"],"created_at":"2024-08-03T01:02:19.012Z","updated_at":"2024-11-14T15:31:11.141Z","avatar_url":"https://github.com/SDuck4.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Programming Languages"],"sub_categories":["JavaScript"],"readme":"# type-hangul\n\n⌨️ 한글 타이핑 효과 라이브러리\n\nhttps://sduck4.github.io/type-hangul/\n\n## 개요\n\n![데모](docs/demo.gif)\n\u003e 윤동주, *서시*\n\n한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다.\n\n## 설치\n\n### CDN\n\n한글 자모음 처리에 [Hangul-js](https://github.com/e-/Hangul.js)를 사용하고 있습니다.\n\n**Hangul-js**와 **type-hangul**을 따로 로드하려면 아래 코드를 사용하세요.\n\n```html\n\u003c!-- 의존 라이브러리와 별개로 로드 --\u003e\n\u003cscript src=\"https://unpkg.com/hangul-js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/type-hangul@latest/dist/type-hangul.min.js\"\u003e\u003c/script\u003e\n```\n\n**Hangul-js**를 번들링한 **type-hangul**을 로드하려면 아래 코드를 사용하세요.\n\n```html\n\u003c!-- 의존 라이브러리 번들한 파일 로드 --\u003e\n\u003cscript src=\"https://unpkg.com/type-hangul\"\u003e\u003c/script\u003e\n```\n\n### 직접 다운로드\n\n[GitHub Releases](https://github.com/SDuck4/type-hangul/releases)에서 최신 릴리즈를 직접 다운로드 받아 사용하실 수 있습니다.\n\n## 사용법\n\n```html\n\u003cdiv id=\"target\"\u003e안녕하세요.\u003c/div\u003e\n\u003cscript\u003e\n    TypeHangul.type('#target');\n\u003c/script\u003e\n```\n\n### `TypeHangul.type(selector [, options])`\n\n- `selector`: 타이핑 효과를 출력할 DOM의 CSS Selector, 필수\n- `options`: 효과 옵션, 생략 가능\n\n## 옵션\n\n### `text`\n\n- 타입: `string`\n- 기본값: `null`\n\n출력할 텍스트를 설정합니다. 설정하지 않을 경우, `selector`로 선택한 DOM의 텍스트를 출력합니다.\n\n### `append`\n\n- 타입: `boolean`\n- 기본값: `false`\n\n기존 텍스트 뒤에 이어서 출력할 지 여부를 설정합니다. `true`로 설정할 경우, `selector`로 선택한 DOM의 텍스트 뒤에 이어서 출력합니다.\n\n### `intervalType`\n\n- 타입: `number`\n- 기본값: `120`\n\n타이핑 사이 시간 간격을 설정합니다.\n\n### `humanize`\n\n- 타입: `number|function`\n- 기본값: `null`\n\n실제 사람이 타이핑하는 것처럼 매 타이핑 마다 `intervalType`를 랜덤화합니다.\n\n`number`을 설정할 경우, 해당 비율만큼 `intervalType`을 랜덤화합니다. 예를 들어, 다음과 같은 옵션인 경우\n```js\n{\n    intervalType: 100,\n    humanize: 0.5,\n}\n```\n`intervalType`은 원래 값의 0.5배인 `50`부터 1.5배인 `150` 사이의 랜덤한 값으로 설정됩니다.\n\n`function`을 설정한 경우, 해당 함수를 사용해 `intervalType`을 랜덤화합니다. 함수의 첫 번째 매개변수로 `intervalType` 값이 주어집니다.\n\n## 이벤트\n\n타이핑 진행 과정에 따라 `selector`로 선택된 DOM에 이벤트([CustomEvent](https://developer.mozilla.org/ko/docs/Web/API/CustomEvent))를 발생시킵니다. 이벤트 리스너의 첫 번째 매개변수 `e`의 `detail`로 이벤트 데이터를 전달합니다.\n\n```html\n\u003cdiv id=\"target\"\u003e타이핑\u003c/div\u003e\n\u003cscript\u003e\n    var $target = document.querySelector('#target');\n    $target.addEventListener('th.afterType', function (e) {\n        console.log(e.detail.progress);\n    });\n    TypeHangul.type('#target');\n\u003c/script\u003e\n```\n```\nㅌ\n타\n탕\n타이\n타잎\n타이피\n타이핑\n```\n\n### `th.startType`\n\n- `target`: 타이핑 효과 대상 DOM\n- `options`: `type()` 호출 시 옵션과 기본 옵션을 합친 객체\n\n타이핑을 시작할 때 발생합니다.\n\n\u003e `th.startType` 이벤트는 `type()` 호출 직후에 이벤트가 발생합니다. 이벤트 리스너가 정상적으로 동작하기 위해서는 `type()` 호출 이전에 리스너를 추가하세요.\n\n### `th.endType`\n\n- `target`: 타이핑 효과 대상 DOM\n- `options`: `type()` 호출 시 옵션과 기본 옵션을 합친 객체\n\n타이핑을 종료할 때 발생합니다.\n\n### `th.beforeType`\n\n- `target`: 타이핑 효과 대상 DOM\n- `options`: `type()` 호출 시 옵션과 기본 옵션을 합친 객체\n- `progress`: 현재까지 출력한 타이핑 텍스트\n- `typeChar`: 이번에 타이핑할 문자\n\n매번 타이핑 이전에 발생합니다.\n\n### `th.afterType`\n\n- `target`: 타이핑 효과 대상 DOM\n- `options`: `type()` 호출 시 옵션과 기본 옵션을 합친 객체\n- `progress`: 현재까지 출력한 타이핑 텍스트\n- `typeChar`: 이번에 타이핑한 문자\n\n매번 타이핑 이후에 발생합니다.\n\n## License\n\n[MIT](https://github.com/SDuck4/type-hangul/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSDuck4%2Ftype-hangul","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSDuck4%2Ftype-hangul","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSDuck4%2Ftype-hangul/lists"}