[HTML, CSS, JavaScript] 오미쿠지(おみくじ) 사이트 만들기

250x250

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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

Archives

Today

Total

관리 메뉴

지나가던 개발자

[HTML, CSS, JavaScript] 오미쿠지(おみくじ) 사이트 만들기 본문

Developing/HTML, CSS, JavaScript

[HTML, CSS, JavaScript] 오미쿠지(おみくじ) 사이트 만들기

KwonYongHyeon 2021. 12. 31. 22:21

올해가 이제 2시간도 채 남지 않았다. 나는 올해 무엇을 했을까. 그래도 블로그도 하고, 아주 의미없는 한 해는 아니었던 것 같다.

오미쿠지는 일본 문화의 한 가지이다. 신토 문화의 하나로 신사나 절에서 운세가 써진 제비뽑기를 하여 길흉(吉凶)을 점친다. 굳이 번역한다면 '운세제비'라고 할 수 있다. 한국의 산통과 비슷한 개념이다.

나무위키에서 인용했다.

내가 일본인은 아니지만, 그래도 일본어와 일본 문화를 배우고 있는 입장에서 신년에 오미쿠지 한 번 정도는 해 주는게 좋을 것 같다는 생각이 들었다. 그런데 생각해 보니 문제가 있었다. 한국에는 신사가 없다는 것이다. 절에 가서 "오미쿠지 할 수 있나요?" 라고 물어보기도 좀 그렇고. 그래서 그냥 내가 만들기로 했다.

오미쿠지가 뭐 별건가. 그냥 랜덤으로 만들기만 하면 되는 것 아닌가.

그래서 만들어 봤다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>おみくじ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p id="syokai">이제 <b>신년(新年)</b>입니다!<br>올해의 안좋은 일은 다 떨쳐내고, 이제 신년의 운세를 온라인으로 봐 보는 것은 어떨까요?</p>
    <p id="button">올해 당신의 운세는?</p>
    <p class="hidden" id="uranai"></p>
    <p class="hidden" id="uranaiSyokai"></p>
    <script src="script.js"></script>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap');

body {
    font-family: 'Nanum Gothic', sans-serif;
    text-align: center;
}

.hidden {
    display: none;
}

script.js

const button = document.getElementById('button');
const syokai = document.getElementById('syokai');
const uranai = document.getElementById('uranai');
const uranaiSyokai = document.getElementById('uranaiSyokai');

function hidden(hidden) {
    hidden.classList.add('hidden');
}

function uranaiSyokaiFunction() {
    uranaiSyokai.classList.remove('hidden');
    if (uranai.innerText == '大吉') {
        uranaiSyokai.innerText = "축하드립니다! 대길이라니, 올해 좀 잘 나가시겠는데요?";
    }
    else if (uranai.innerText == '吉') {
        uranaiSyokai.innerText = "길입니다! 대길보다는 못하지만, 그래도 즐거운 한 해를 보내시겠네요!";
    }
    else if (uranai.innerText == '中吉') {
        uranaiSyokai.innerText = "중길입니다! 행복한 신년 보내세요 :)";
    }
    else if (uranai.innerText == '小吉') {
        uranaiSyokai.innerText = "소길입니다! 딱 가운데 운세네요..! 무난하게 보내실 수 있겠어요.";
    }
    else if (uranai.innerText == '末吉') {
        uranaiSyokai.innerText = "말길입니다! 아슬아슬하긴 했지만, 그래도 길입니다!";
    }
    else if (uranai.innerText == '凶') {
        uranaiSyokai.innerText = "흉입니다. 올해 조금 조심하셔야 할 수도... (웃음) 이런거는 다 재미일 뿐, 진지하게 받아들이지는 마세요!";
    }
    else if (uranai.innerText == '大凶') {
        uranaiSyokai.innerText = "대흉입니다. 액땜 한 셈 치죠..! (그래도 조금 조심하시는게 좋을 수도...?)";
    }
}

function uranaiFunction(event) {
    hidden(button);
    hidden(syokai);
    uranai.classList.remove('hidden');
    const unsei = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];
    uranai.innerText = unsei[Math.floor(Math.random() * unsei.length)]
    uranaiSyokaiFunction()
}

button.addEventListener('click', uranaiFunction);

꼭 2021년 안에 만들고 싶어서 급하게 만들다 보니 디자인이 아예 없다. 그리고 7개의 운세가 나올 확률이 모두 같다.

내년 말에 꼭 이어서 만들어야겠다. 디자인도 예쁘게 하고 싶고, 흉이 나올 확률은 좀 줄이고, 운세 소갯말을 더 예쁘게 하고 싶다.