-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (213 loc) · 8.14 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>만 나이: 오늘부터 당신의 나이는?</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nanum Gothic', sans-serif;
}
#wrap {
width: 90vw;
margin: 30px auto 0 auto;
background-color: #e0e0e0;
padding: 20px;
}
header {
height: 15vh;
}
.title {
display: inline-block;
width: 100%;
padding: 30px 0 0 30px;
font-size: 35px;
}
.calForm {
height: 12vh;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#inpBirthDate {
border: none;
width: 50vw;
height: 8vh;
border-radius: 30px;
background: #e0e0e0;
box-shadow: 8px 8px 8px #848484,
-8px -8px 8px #ffffff;
text-align: center;
font-size: 30px;
}
#inpBirthDate::placeholder {
font-size: 30px;
text-align: center;
}
.result {
height: 20vh;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.result > .calAge {
font-size: 40px;
}
.result > .calYearAge {
font-size: 30px;
}
.result > p:first-child {
width: 100%;
text-align: center;
font-size: 35px;
}
.result > p:last-child {
font-size: 25px;
}
.intro {
font-size: 18px;
}
.moreArticle {
font-size: 18px;
}
.thanks {
font-size: 25px;
text-align: center;
padding: 30px;
}
.hidden {
display: none !important;
}
@media screen and (max-width: 400px) {
.intro {
font-size: 16px;
}
header {
display: flex;
flex-flow: row wrap;
align-items: center;
height: 15vh;
}
.title {
padding: 0;
text-align: center;
}
.result > p:first-child {
font-size: 24px;
}
.result > p:last-child {
font-size: 18px;
}
.moreArticle {
font-size: 16px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h2 class="title">만 나이 계산기</h2>
</header>
<article>
<div class="calForm">
<form action="">
<input type="text" id="inpBirthDate" name="birthDate" placeholder="YYYYMMDD"
pattern="(?:19|20)\d\d(?:0[1-9]|1[012])(?:0[1-9]|[12][0-9]|3[01])"
title="YYYYMMDD 형식에 맞게 입력해주세요."/>
</form>
</div>
<div class="result">
<p>
당신의 생일에 근거한 만 나이는 <span class="calAge"></span>세입니다!
</p>
<p>
연 나이는 <span class="calYearAge"></span>세입니다!
</p>
</div>
<div class="intro">
<p>
<span style="font-weight: bold;"> 개정후 민법 제158조(나이의 계산과 표시) </span>
나이는 출생일을 산입하여 만(滿) 나이로 계산하고, 연수(年數)로 표시한다.
다만, 1세에 이르지 아니한 경우에는 월수(月數)로 표시할 수 있다.
[전문개정 2022. 12. 27.] [시행일: 2023. 6. 28.]
</p>
<br>
<p>
지난 2023년 06월 28일부터 시행되는 나이의 계산과 표시에 대한 민법 제158조에
의해 대한민국에서 "세는 나이"가 사라졌습니다.
물론 공식적인 전산 상에서는 만 나이를 사용해왔으나 우리의 일상 속에서
세는 나이는 오랫동안 자리매김 하고 있었습니다.
일상에서도 이젠 만 나이를 사용하기 위한 정부의 노력에 힘입어
여러분의 만 나이 계산을 도와드리겠습니다.
</p>
</div>
<div class="moreArticle">
<br>
<p>
연 나이는 무엇일까요?
연 나이 역시 나이를 세는 방법 중 하나로, 그저 현재 연도에서 출생 연도를
단순히 빼기만 하면 그것이 연 나이입니다.
(당신은 연 나이로 <span class="calYearAge"></span>살 입니다!)
법적으로는 특정 법률에서만 사용되나 계산법이 간단해
일상에서 쓰기 좋습니다. 생일이 지났는지 알 수 없거나 알지 않아도 되는
상황에서는 편의상 이런 방식을 사용하기도 합니다.
일상에서 당신은 <span class="koreanTraditionalAge"></span>살로 소개하곤
했지만 이제 당신은 <span class="calAge"></span>살로,
<span class="ageOffset"></span>살 만큼 젊어졌어요! (물론 생물학적으로가 아닙니다.)
</p>
</div>
<div class="thanks">
<p>방문해주셔서 감사하고 좋은 하루 되세요!</p>
</div>
</article>
</div>
<script>
const date = new Date();
const form = document.querySelector("form");
const calAge = document.querySelectorAll(".calAge");
const calYearAge = document.querySelectorAll(".calYearAge");
const spanKoreanTraditionalAge = document.querySelector(".koreanTraditionalAge");
const result = document.querySelector(".result");
const moreArticle = document.querySelector(".moreArticle");
const thanks = document.querySelector(".thanks");
const ageOffsetSpan = document.querySelector(".ageOffset");
result.classList.toggle("hidden");
moreArticle.classList.toggle("hidden");
thanks.classList.toggle("hidden");
const handleSubmit = e => {
e.preventDefault();
const birthDate = document.querySelector("#inpBirthDate").value;
const birthYear = parseInt(birthDate.substring(0, 4));
const birthMonth = parseInt(birthDate.substring(4, 6));
const birthDay = parseInt(birthDate.substring(6, 8));
let age = date.getFullYear() - birthYear;
if (birthMonth > date.getMonth() + 1) {
age--;
} else if (birthMonth == date.getMonth() + 1) {
if (birthDay > date.getDate()) {
age--;
}
}
const yearAge = date.getFullYear() - birthYear;
const koreanTraditionalAge = date.getFullYear() - birthYear + 1;
const ageOffset = koreanTraditionalAge - age;
calAge[0].textContent = calAge[1].textContent = age;
calYearAge[0].textContent = calYearAge[1].textContent = yearAge;
spanKoreanTraditionalAge.textContent = koreanTraditionalAge;
ageOffsetSpan.textContent = ageOffset;
result.classList.toggle("hidden");
moreArticle.classList.toggle("hidden");
thanks.classList.toggle("hidden");
};
form.addEventListener("submit", handleSubmit);
</script>
</body>
</html>