index.html
3.35 KB
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
112
113
114
115
116
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - iOS 10 chat bubbles Pure CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section>
<!-- 1번 대화 -->
<div class="from-them">
<p>안녕하세요!!<br>
저는 이모지 인간이라고 해요 @.@ <br>
당신을 만나게 되어서 매우 반가워요 :)
</p>
</div>
<div class="clear"></div>
<div class="from-me slam">
<p>말풍선을 눌러 이모지 인간에게 인사하기</p>
</div>
<div class="clear"></div>
<!-- 1번 대화 -->
<!-- 2번 대화 -->
<div class="from-me gentle">
<p>이모지 인간은 뭔가요...?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>이모지 인간은 말그대로
“이모지”로 이루어진 인격체입니다.
여러분이 알고 계시는 다양한 이모지들이 있죠?
저는 그 어떤 모습의 이모지든 다 될 수 있어요.
이모지 자체가 저의 몸이라고 생각하시면 됩니다.
예를 들어, 옆의 태양이나 파라솔까지도요!
(하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
</div>
<!-- 2번 대화 -->
<!-- 3번 대화 -->
<div class="from-me gentle">
<p>어...이모지 인간은 어떻게 생겨났나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>요즘 10대-20대들은 SNS 사용시,
주로 이모지를 사용하여 대화를 하곤 합니다.
문자로 길게 설명을 하는 것보다 표정이나 감정들을
직관적으로 전달할 수 있는 이모지가
더 간편하기에 그렇습니다.
이에 현대인들의 일상은 이모지로 가득 찬,
“<이모지 인간>이 아닐까”
하는 발상에서 제가 생겨나게 되었답니다.</p>
</div>
<!-- 3번 대화 -->
<!-- 4번 대화 -->
<div class="from-me gentle">
<p>그럼 이모지 인간은 뭘할 수 있나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>첫째, 저와의 간단한 대화!
둘째, 이모지로 보내는 문자!
셋째, 이모지 MBTI 카드!</p>
</div>
<div class="from-them">
<p>첫번째...보다는
두번째와 세번째에 대한 설명을 더 해볼께요...
이모지로 보내는 문자는 Emo-ssage라고 해요.
아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
대화 중 일부를 이모지로 채워줄 거랍니다.
작성이 완료되면 여러분만의 emo-ssage를
이미지로 저장할 수 있어요!</p>
</div>
<div class="from-them">
<p>이모지 MBTI 카드는 EMOTI라고 해요.
여러 이모지들을 활용해서 각 16개 mbti
고유의 이모지들을 탄생시켰어요.
아, 그리고 각 mbti 카드를 넘길 때마다
어울리는 노래도 흘러나온답니다! </p>
</div>
<!-- 4번 대화 -->
<!-- 5번 대화 -->
<div class="from-me gentle">
<p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>This page cannot be found</p>
</div>
<!-- 5번 대화 -->
</section>
<script src="./script.js"></script>
</body>
</html>