완성본 링크 : https://new-year.spartacodingclub.kr/gWhQ9ufHfwVi/index.html
신년운세 by 르탄!
2021년 띠 별 운세를 알려드립니다
new-year.spartacodingclub.kr
간단한 웹디자인 코딩이지만 흥미가 붙어 불과 3시간만에 2일차 강의를 전부 듣고 완성작까지 만들었다.
어려운 코딩이 아니라고는 하지만 처음하는 나에게는 꽤나 머리를 쓰는 강의었지만 강사님께서 차근차근 설명해주셔서 그나마 따라갈만 했던거 같다
처음 코딩을 시작하자 맘먹었을 때는 완전히 낯선 방식과 단어들 때문에 겁이 나서 쉽게 도전해볼 수 없는 분야라고만 생각했는데 이번 스파르타코딩의 강의를 듣고나서 나도 해볼 수 있겠다 싶은 자신감이 붙었다!
남은 한해 목표는 내가 원하는 페이지 하나 만들기!!
코드 완성본
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="https://new-year.spartacodingclub.kr/images/favicon.png">
<meta property="og:title" content="신년운세 by 르탄!"/>
<meta property="og:description" content="2021년 띠 별 운세를 알려드립니다"/>
<meta property="og:image" content="https://new-year.spartacodingclub.kr/images/ogimage.png"/>
<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=Yeon+Sung&display=swap" rel="stylesheet">
<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>2021년 신년운세!</title>
<script type="text/javascript" src="https://new-year.spartacodingclub.kr/newyear.js"></script>
<style>
.mytitle {
color: darkred;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}
.mytitle>h1 {
font-size: 56px;
margin-bottom: 0;
}
body {
background-color: ivory;
background-image: url(https://new-year.spartacodingclub.kr/images/pattern.png);
background-position: 600px 100px;
background-repeat: no-repeat;
}
* {
font-family: 'Yeon Sung', cursive;
}
.rtans>a {
display: block;
width: 150px;
height: 150px;
border: solid 3px darkred;
background-color: white;
border-radius: 150px;
box-shadow: 0px 0px 10px 0px darkred;
margin: 10px;
background-size: cover;
background-position: center;
color: white;
font-size: 24px;
text-decoration: none;
text-align: center;
}
.rtan1 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png');
}
.rtan2 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS2.png');
}
.rtan3 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS3.png');
}
.rtan4 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS4.png');
}
.rtan5 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS5.png');
}
.rtan6 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS6.png');
}
.rtan7 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS7.png');
}
.rtan8 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS8.png');
}
.rtan9 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS9.png');
}
.rtan10 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS10.png');
}
.rtan11 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS11.png');
}
.rtan12 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS12.png');
}
.rtans {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 1200px;
margin: auto;
}
.rtans>a:hover {
background-color: darkred;
}
@media screen and (max-width: 780px) {
body {
background-position: 70px -70px;
background-size: 500px;
}
.rtans {
width: 100%;
}
.mytitle {
margin-top: 20px;
margin-bottom: 20px;
}
.rtans>a {
color: darkred;
}
}
</style>
</head>
<body>
<div class="mytitle">
<h1>2021년 신년운세</h1>
<h2>by 르탄, 믿거나 말거나~</h2>
</div>
<div class="rtans">
<a class="rtan1" href="result.html?year=1">쥐</a>
<a class="rtan2" href="result.html?year=2">소</a>
<a class="rtan3" href="result.html?year=3">호랑이</a>
<a class="rtan4" href="result.html?year=4">토끼</a>
<a class="rtan5" href="result.html?year=5">용</a>
<a class="rtan6" href="result.html?year=6">뱀</a>
<a class="rtan7" href="result.html?year=7">말</a>
<a class="rtan8" href="result.html?year=8">양</a>
<a class="rtan9" href="result.html?year=9">원숭이</a>
<a class="rtan10" href="result.html?year=10">닭</a>
<a class="rtan11" href="result.html?year=11">개</a>
<a class="rtan12" href="result.html?year=12">돼지</a>
</div>
</body>
</html>
Result.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="https://new-year.spartacodingclub.kr/images/favicon.png">
<meta property="og:title" content="신년운세 by 르탄!"/>
<meta property="og:description" content="2021년 띠 별 운세를 알려드립니다"/>
<meta property="og:image" content="https://new-year.spartacodingclub.kr/images/ogimage.png"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세!</title>
<script type="text/javascript" src="https://new-year.spartacodingclub.kr/newyear.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Yeon Sung', cursive;
}
body {
background-color: ivory;
background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');
background-position: 600px 100px;
background-repeat: no-repeat;
}
.rtan {
display: block;
width: 200px;
height: 200px;
border: solid 3px darkred;
background-color: darkred;
border-radius: 200px;
box-shadow: 0px 0px 10px 0px darkred;
margin: 10px;
background-size: cover;
background-position: center;
background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png');
color: white;
font-size: 32px;
text-decoration: none;
text-align: center;
margin: 80px auto 50px auto;
}
.title {
font-size: 32px;
color: darkred;
text-align: center;
}
.msg {
font-size: 32px;
color: darkred;
text-align: center;
line-height: 48px;
display: none;
}
.btns {
display: flex;
justify-content: center;
flex-direction: row;
}
.btn-back {
width: 150px;
height: 50px;
color: darkred;
border: 2px solid darkred;
background-color: white;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
.btn-share {
width: 150px;
height: 50px;
color: white;
border: 2px solid darkred;
background-color: darkred;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
margin-left: 5px;
}
@media screen and (max-width: 780px) {
body {
background-position: 70px -70px;
background-size: 500px;
}
.rtan {
margin-top: 50px;
}
.msg {
font-size: 24px;
line-height: 36px;
margin-bottom: 36px;
padding: 10px;
}
.msg>br {
display: none;
}
}
</style>
<script>
function back() {
let url = window.location.href;
let new_url = url.split('result.html')[0] + 'index.html';
window.location.href = new_url;
}
function share() {
var t = document.createElement("textarea");
document.body.appendChild(t);
t.value = window.location.href;
t.select();
document.execCommand('copy');
document.body.removeChild(t);
alert('복사 완료!')
}
</script>
</head>
<body>
<div class="rtan">쥐</div>
<h1 class="title">2021년 쥐띠의 운세는!</h1>
<p class="msg" id="rtan1" aria-label="쥐띠">
마음을 알아주는 따뜻한 사람을 만날 것이야!<br/>
일이 잘 안 풀리는 것 같아도<br/>
연말에는 호탕하게 웃을 수 있을 지어니<br/>
너무 걱정하지 말고 하루하루 잘 나아가봐~
</p>
<p class="msg" id="rtan2" aria-label="소띠">
올해 큰 돈이 들어올 것 같은데?<br/>
어디든 투자하고 싶은 곳이 있으면<br/>
자신 있게 해봐도 좋을 것 같아!<br/>
너무 무리는 하지 말구!
</p>
<p class="msg" id="rtan3" aria-label="호랑이띠">
주변 사람들로부터 많은 도움을 받는<br/>
한 해가 되겠구만!<br/>
오랜 지인들에게 미리 연락을 해보는 건 어떨까?<br/>
지금 전화기를 들어봐!
</p>
<p class="msg" id="rtan4" aria-label="토끼띠">
취업운이 특히 좋은 한 해야!<br/>
승진, 이직, 취직 모두 다 잘 되겠는 걸?<br/>
꼭 하고 싶은 일이 있었으면<br/>
주저 말고 도전해봐!
</p>
<p class="msg" id="rtan5" aria-label="용띠">
가까운 친구나 가족에게 좋은 일이 생기는 한 해구만!<br/>
컨디션도 좋고 준비하는 일 모두 좋은 결과를 얻을거야~<br/>
망설이지 말고!<br/>
앞으로 나아가봐~!
</p>
<p class="msg" id="rtan6" aria-label="뱀띠">
봄날에 선선하게 부는 바람처럼<br/>
올해는 무난~하게 지나가겠어!<br/>
너무 조바심 갖지 말고, 마음 편안히 먹고<br/>
한 걸음 한 걸음 나아가자!
</p>
<p class="msg" id="rtan7" aria-label="말띠">
긍정적인 마음으로 천천히 일을 추진해봐!<br/>
어려울 땐, 주변의 도움을 받아보는 것도 좋겠어~<br/>
하루하루 성실히 보내다보면,<br/>
반드시 바라던 일이 이루어질거야!
</p>
<p class="msg" id="rtan8" aria-label="양띠">
모처럼 컨디션이 최상인 해!<br/>
새해 다짐으로 운동을 시작하면 어떨까?<br/>
달리기, 헬스트레이닝, 요가 .. 뭐든 좋아!<br/>
기분 좋고 에너지 넘칠 일만 있을거야!
</p>
<p class="msg" id="rtan9" aria-label="원숭이띠">
미래에 대한 고민이 많은 해가 될거야!<br/>
자기계발도 틈틈히 잊지말고,<br/>
기회가 왔을 땐 주저말고 잡도록해!<br/>
또 어떤 재밌는 인생이 펼쳐질지 모르니까!
</p>
<p class="msg" id="rtan10" aria-label="닭띠">
고생 끝에 낙이 온다라는 말,<br/>
올해를 두고 하는 얘기일까?<br/>
오랫동안 준비해온 일이 있다면<br/>
드디어 결실을 맺는 한 해가 될거야!
</p>
<p class="msg" id="rtan11" aria-label="개띠">
올해 분위기가 심상치 않아.<br/>
좋은 것만 먹고, 운동도 좀 더 하고!<br/>
건강에 특히 신경 쓰는 한 해가 되도록 해!
</p>
<p class="msg" id="rtan12" aria-label="돼지띠">
새로운 인연을 아주 많이 만나는 해가 될 것 같은데?<br/>
그 중에 평생 도움 받을 귀인이 있으니,<br/>
만나는 모든 사람들에게 친절하고,<br/>
따뜻하게 다가가봐!
</p>
<div class="btns">
<button onclick="back()" class="btn-back">뒤로가기</button>
<button onclick="share()" class="btn-share">공유하기</button>
</div>
</body>
</html>
'Review' 카테고리의 다른 글
| [코드캠프] 프리캠프 2일차 (0) | 2021.10.27 |
|---|---|
| [코드캠프] 프리캠프 1일차 (0) | 2021.10.26 |
| 메가 IT 아카데미 자바 웹프로그래밍과정 청강 1, 2일차 후기 (0) | 2021.10.18 |
| 메가IT 아카데미 세미나 <NAVER 개발자가 말하는 WEB 백엔드 공부는 이렇게> 후기 (0) | 2021.10.14 |
| 스파르타 코딩클럽 신년운세 코딩패키지 1일차 (0) | 2021.09.21 |
