-
Notifications
You must be signed in to change notification settings - Fork 0
/
handwriting.html
111 lines (96 loc) · 6.87 KB
/
handwriting.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42711199-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-42711199-4');
</script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="./assets/css/common.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" href="favicon.png">
<style>
@font-face{font-family:'sanghyukchun'; src:url('assets/NanumSanghyukchun.ttf')}
</style>
<title>Sanghyuk Chun - Clova AI Research</title>
</head>
<body>
<div class="jumbotron" style="padding: 2rem 2rem;">
<div class="mx-auto text-center mt-5 mb-3">
<h1>Sanghyuk Chun</h1>
</div>
<div class="mx-auto text-center">
<ul class="list-unstyled">
<li>Lead Research Scientist</li>
<li>NAVER AI Lab</li>
<li><a href="https://sanghyukchun.github.io/home/">[Homepage]</a> | <a href="https://scholar.google.co.kr/citations?user=4_uj0xcAAAAJ">[Google Scholar]</a></li>
</ul>
</div>
</div>
<div style="width: 92%; margin:0 auto;">
<div class="container text-justify">
<div class="row mb-2">
<h2 id="desc">Hangul Handwriting Font Generation</h2>
</div>
<div style="font-family:sanghyukchun; font-weight:normal; font-size:2em;" class="row">
<a href="index.html">← Go back to main page</a>
</div>
<div class="form-group">
<label for="text_area">Type your sample text</label>
<textarea class="form-control" id="text_area" rows="10">한글한글 아름답게 앞으로 쓰여질 우리의 이야기를 응원합니다.
훈민정음으로 처음 발표된 한글은 500년이 넘는 시간 동안 많은 변화를 겪었습니다.
한글의 변화는 쓰는 사람의 성향, 필기구의 변화, 인쇄술의 발전에 의한 것이었습니다.
1446년 편찬한 훈민정음에 적힌 한글부터, 오늘날의 스마트폰 등 모바일 디바이스에 쓰이는 폰트, 그리고 이제는 AI 기술을 통해 만들어진 한글 글꼴까지 이어지고 있습니다.
역사는 기록을 가능하게 하는 문자에서 시작됩니다.
한글의 창제 이후 우리는 우리의 역사를 온전히 기록하고, 보존할 수 있게 되었습니다.
바르고 아름다운 한글을 보전하기 위한 노력을 이어가고자 합니다.
한글을 돌보는 마음으로 한 땀 한 땀 손글씨를 쓰는 것, 그것은 한글을 가꾸는 것이며 동시에 우리 문화를 지키기 위한 시작입니다.
과학적이고 단순한 훈민정음체 세종은 1443년 한글을 창제하고 3년 후 이를 해설하는 훈민정음을 편찬하였습니다.
한글은 소리가 나오는 입 속 모양을 본뜬 닿자와 하늘, 땅, 사람을 추상화한 홀자를 서로 조합하여
소리 내는 구조입니다.
모양이 단순하고 정교하여 점, 가로선, 세로선, 빗금, 동그라미만으로 모든 글자를 표현할 수 있습니다.
조선 초기까지 한국은 중국의 한자를 빌려 썼습니다.
그러나 우리말과 한자는 서로 맞지 않았고, 우리말 표현에 알맞은 문자가 필요했습니다.
이에 세종은 집현전 학자들과 함께 한글을 만들었습니다.
이것은 우리말을 보존하려는 세종의 지혜이자, 한글을 통해 백성들의 삶을 이롭게 변화시킨 새로운 도전이었습니다.
한글은 유신들의 반대에도 불구하고, 일반 백성들 사이에서 빠르게 퍼져나갔습니다.
당시 한문을 읽고 쓰는 것은 양반 계층만의 특권이었기에 일반 백성들은 쓸 수도 기록할 수도 없었습니다.
한글은 읽고 쓰기가 쉬워 누구나 배울 수 있었기 때문에 수많은 백성에게 큰 사랑을 받았습니다.
다양한 지식과 유익한 정보의 근원은 바로 한글입니다.
한글을 생각하는 마음을 담아 한글한글 아름답게 캠페인이 시작되었습니다.
아름다운 한글을 간판에 담고, 최초의 한글 신문인 독립신문을 누구나 볼 수 있도록 했습니다.
한글의 멋과 가능성이 끝이 없듯, 변함없이 한글의 가치를 전하며 한글과 함께 걸어가겠습니다.
한글로 된 생각과 정보가 더욱 많아지기를 바라는 마음에서 한글한글 아름답게 캠페인을 진행해오고 있습니다.
한글의 특성과 아름다움을 살린 나눔글꼴을 배포하고, 뜻깊은 이야기가 담긴 손글씨를 찾아 글꼴을 제작하는 손글씨 공모전을 개최하기도 했습니다.
앞으로도 한글과 함께 걸으며 더 많은 사람들과 한글의 아름다움을 나누고자 합니다.</textarea>
</div>
<div class="row">
<p id="text_content" style="font-family:sanghyukchun; font-weight:normal; font-size:2em;"></p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="assets/js/anchor.min.js"></script>
<script>
// for font
$(document).ready(function() {
$("#text_content").html($("#text_area").val().replace(/\n/g, '<br>'));
});
$("#text_area").on("propertychange change keyup paste input", function() {
$("#text_content").html($(this).val().replace(/\n/g, '<br>'))
});
</script>
</body>
</html>