파일 구성
html 파일
진행과정
index.html -> story.html -> no_flower.html
->purple_flower.html
->red_flower.html
->white_flower.html
소스코드와 페이지화면
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>심리테스트</title>
<style>
* { margin: 0; padding: 0; }
#wrap { width: 100%; }
.box { width: 100%; height: 720px; background: #F5F5F5; }
.img { background: url("./images/back2.jpg") no-repeat center center; width: 100%; height: 100%; margin: 0 auto; }
.img h1 { color: pink; text-align: center; position: relative; }
.img a { text-decoration: none; display: flex; width: 196px; height: 60px; background: #fff; color: skyblue; justify-content: center; align-items: center; font-size: 20px; margin: 0 auto; position: absolute; bottom: 100px; left: 44%; }
#animation1 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 5s infinite; position: fixed; top: 100px; left: 200px; }
#animation2 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 2s infinite; position: fixed; top: 300px; left: 300px; }
#animation3 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 3s infinite; position: fixed; top: 600px; left: 150px; }
#animation4 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 4s infinite; position: fixed; top: 500px; left: 500px; }
#animation5 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 5s infinite; position: fixed; top: 400px; right: 250px; }
#animation6 { background: url("./images/flower.png") no-repeat; width: 80px; height: 200px; text-indent: -9999px; background-size: 80%; animation: flower 6s infinite; position: fixed; top: 200px; right: 350px; }
@keyframes flower {
0% { transform: translate(0); }
50% { transform: translate(5px); }
100% { transform: translate(0); }
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div class="img">
<h1>내 사랑은 어떤 모습일까?</h1>
<div id="animation1">flower</div>
<div id="animation2">flower</div>
<div id="animation3">flower</div>
<div id="animation4">flower</div>
<div id="animation5">flower</div>
<div id="animation6">flower</div>
<a href="story.html">시작하기</a>
</div>
</div>
</div>
</body>
</html>
story.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스토리</title>
<style>
* { margin: 0; padding: 0; }
section { width: 70%; height: 700px; background: #f5f5f5; text-align: center; border: 5px solid; margin: 0 auto; }
.img1, .img2, .img3 { width: 500px; height: 700px; background: url("./images/bread.jpg") no-repeat center; background-size: 100%; margin: 0 auto; text-indent: -9999px; }
.img2 { background-image: url("./images/pot.jpg"); }
.img3 { background-image: url("./images/smile.jpg"); }
h1 { color: #000; padding-top: 50px; }
ul { width: 90%; height: 500px; display: flex; justify-content: space-between; margin: 0 auto; }
ul > li { width: 17%; height: 65%; list-style: none; background: url("./images/purple.png") no-repeat center center; background-size: 80%; border: 3px solid;}
ul > li:nth-child(2) { background-image: url("./images/white.png"); }
ul > li:nth-child(3) { background-image: url("./images/red.png"); }
ul > li:last-child { background-image: url("./images/no.png"); }
ul > li > a { width: 325px; height: 400px; display: block; text-indent: -9999px; }
</style>
</head>
<body>
<div id="wrap">
<div class="content_box">
<section class="content1">
<div class="con1_img">
<h1>화창한 오후 기분 좋게 당신은 제과점에 들어가 빵을 고르고 있었습니다.</h1>
<p class="img1">1</p>
</div>
</section>
<section class="content2">
<h1>이때 나가려는 당신에게 직원분이 줄게 있다며 새싹하나를 건내줍니다.</h1>
<p class="img2">2</p>
</section>
<section class="content3">
<h1>직원은 "이 새싹을 드릴께요. 매일 물을 주고 정성껏 키우면 꽃이 필 거에요." 라고 말합니다</h1>
<p class="img3">3</p>
</section>
<section class="content4">
<h1>그렇다면 당신이 소중하게 키운 그 화분에선 어떤 꽃이 필까요?</h1>
<br>
<ul>
<li>
<a href="purple_flower.html">1</a>
<span>커다란 자주색 꽃 한 송이</span>
</li>
<li>
<a href="white_flower.html">2</a>
<span>여러 송이의 작고 하얀 꽃</span>
</li>
<li>
<a href="red_flower.html">3</a>
<span>귀여운 느낌의 새빨간 꽃 세 송이</span>
</li>
<li>
<a href="no_flower.html">4</a>
<span>말려버려서 꽃이 피지 않는다</span>
</li>
</ul>
</section>
</div>
</div>
</body>
</html>
각 4가지 리스트를 선택할 수 있다.
no_flower.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마른 꽃</title>
<style>
* { margin: 0; padding: 0; text-align: center;}
.box { width: 70%; height: 700px; text-align: center; background: ivory; margin: 0 auto; border: 5px solid; }
h1 { padding-top: 10px; }
span { background: url("./image/rabit.jpg") no-repeat center center; width: 400px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
p { width: 60%; height: 200px; margin: 50px auto 0; margin-bottom: 50px; background: white; border: 5px solid;}
strong { width: 80%; height: 80%; display: block; line-height: 2.0; font-size: 0.95rem; font-weight: normal; margin: 0 auto; }
body { font-size: 16px; }
.a { font-size: 2vh; }
</style>
</head>
<body>
<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
<div id="wrap">
<div class="box">
<h1>당신은 신중한 토끼 같군요!</h1>
<span>1</span>
<p><strong class="a">
당신은 상대방에게 마음을 닫아 놓고 있거나 친절한 마음으로 대하지 않으면 모처럼의 만남도 그저 스쳐 지나가는 인연에 불과해질 수 있어요. 만약 당신이 진심으로 멋진 이성을 만나고 싶다면 동성이든 이성이든 능숙하게 사람들과 교제 하는 방법을 터득하는 것이 선결과제에요. 만약 실패하는 경우가 있더라도 그것을 통해서 터득한 교제 방법은 언젠가 반드시 '능숙하게 사랑을 키워 나 가는 방법'에 응용시킬 수 있을거에요!</strong></p>
<!-- SNS버튼 시작 --> <div style="width: 100%; text-align: center; margin-bottom: 64px;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./image/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./image/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./image/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./image/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- SNS버튼 끝 -->
</div>
</div>
</body>
</html>
purple_flower.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자주색꽃</title>
<style>
* { margin: 0; padding: 0; text-align: center;}
.box { width: 70%; height: 700px; text-align: center; background: ivory; margin: 0 auto; border: 5px solid; }
h1 { padding-top: 10px; }
span { background: url("./images/kitten.jpg") no-repeat center center; width: 300px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
p { width: 60%; height: 200px; margin: 50px auto 0; margin-bottom: 50px; background: white; border: 5px solid;}
strong { width: 80%; height: 80%; display: block; line-height: 2.0; font-size: 0.95rem; font-weight: normal; margin: 0 auto; }
body { font-size: 16px; }
.a { font-size: 1.8vh; }
</style>
</head>
<body>
<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
<div id="wrap">
<div class="box">
<h1>당신의 사랑은 눈이높은 고양이 같군요!</h1>
<span>1</span>
<p><strong class="a">당신은 '최고의 연인'이될 수 있습니다 당신은 지금 보기만 해도 가슴이 두근거리는 멋진 연인을 만나고 싶어하지는 않는지... 언제라도 좋은 사람을 받아들일 마음의 준비가 되어 있는 듯이 보이지만 정말로 행복에 이룰 수 있는 기회는 단 한 번밖에 오지 않으므로 연인을 고를 때에는 신중을 기해야 합니다. 그러나 만약 '정말 이 사람밖에 없다'고 생각된다면 적극적인 자 세로 사랑에 임하세요. 분명히 어느세 정열적인 사랑에 빠져 있는 자신을 발견 하게 될 테니깐!</strong></p>
<!-- SNS버튼 시작 --> <div style="width: 100%; text-align: center; margin-bottom: 64px;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- SNS버튼 끝 -->
</div>
</div>
</body>
</html>
red_flower.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>빨간 꽃</title>
<style>
* { margin: 0; padding: 0; text-align: center;}
.box { width: 70%; height: 700px; text-align: center; background: ivory; margin: 0 auto; border: 5px solid; }
h1 { padding-top: 10px; }
span { background: url("./images/pang.jpg") no-repeat center center; width: 200px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
p { width: 60%; height: 200px; margin: 50px auto 0; margin-bottom: 50px; background: white; border: 5px solid;}
strong { width: 80%; height: 80%; display: block; line-height: 2.0; font-size: 0.95rem; font-weight: normal; margin: 0 auto; }
body { font-size: 16px; }
.a { font-size: 2.2vh; }
</style>
</head>
<body>
<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
<div id="wrap">
<div class="box">
<h1>당신의 사랑은 행복한 펭귄 같군요!</h1>
<span>1</span>
<p><strong class="a">당신은은 이상적인 연인과의 만남을 할 가능성이 높아요! 지금 상태로는 그 사람이 당신에게 최고의 연인이라고 말할 수는 없지만, 당신 쪽에서 먼저 친절한 행동으로 은근한 접근한다면 언젠가는 서로 소중히 여기는 사이가 되고 행복한 사랑이 이루어지게 될 것입니다!</strong></p>
<!-- SNS버튼 시작 --> <div style="width: 100%; text-align: center; margin-bottom: 64px;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- SNS버튼 끝 -->
</div>
</div>
</body>
</html>
white_flower.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하얀 꽃</title>
<style>
* { margin: 0; padding: 0; text-align: center;}
.box { width: 70%; height: 700px; text-align: center; background: ivory; margin: 0 auto; border: 5px solid; }
h1 { padding-top: 10px; }
span { background: url("./images/rottweiler.jpg") no-repeat center center; width: 400px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
p { width: 60%; height: 200px; margin: 50px auto 0; margin-bottom: 50px; background: white; border: 5px solid;}
strong { width: 80%; height: 80%; display: block; line-height: 2.0; font-size: 0.95rem; font-weight: normal; margin: 0 auto; }
body { font-size: 16px; }
.a { font-size: 2vh; }
</style>
</head>
<body>
<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
<div id="wrap">
<div class="box">
<h1>당신의 사랑은 소심한 강아지 같군요!!</h1>
<span>1</span>
<p><strong class="a">당신은 지적 허영심이 강해서 지적으로 보이는 사람에겐 약한 타입입니다. "전 프랑스 문학에 심취해 있어요" 또는 "요번에 브로드웨이에서 들어온 뮤지컬이나 보러 갈까요?" 라고 상대방이 말하면 당신은 먼저 꼬리를 내리는 사람입니다. 즉 상대방을 볼 때 사람 됨됨이 보다 그 집안에 혹하는 경우가 많으므로 항상 조심하세요!</strong></p>
<!-- SNS버튼 시작 --> <div style="width: 100%; text-align: center; margin-bottom: 64px;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- SNS버튼 끝 -->
</div>
</div>
</body>
</html>
'심리테스트 만들기(웹)' 카테고리의 다른 글
| 무의식 테스트(html,php) (0) | 2020.05.28 |
|---|---|
| 나에게 아직 연인이 없는 이유(html) (0) | 2020.05.27 |
