2일치꺼 같은데 하루에 하니깐 3시간이면 끝나네요! 간단하게 배울수 있을꺼같습니다
새로 배운것 정리
og = 다른사람들에게 카톡으로 보낼시 뜨는 이미지와 텍스트
link rel = 컴퓨터 기준으로 타이틀 옆에 뜨는 아이콘
제일 힘들었던 부분은
@media screen and (max-width: 760px)
이것이였다
이유는 저걸 실수로 Style 안에 안넣어서 생긴 오류때문이였다.. 스택에 질문을 했다가 바로 찾아서 지웠다
2주차 후기
옛날에 스파르타 코딩클럽에서 공부했었다 그걸 다시 복습한다는 생각으로 하니까 좋았다
재밌었고 관리자 분들.. 보고계시면 또 이벤트 부탁드려요
<!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>2021년 크리스마스~!</title>
<link rel="shortcut icon" href="https://freepngimg.com/download/christmas/26196-6-christmas-stocking.png">
<meta property="og:image"
<meta property="og:title" content="이현우의 카드">
<meta property="og:description" content="2021의 크리스마스">
<script src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/snow.js"></script>
<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=Poor+Story&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Poor Story', cursive;
}
body {
background-color: #9b070f;
}
.envelope {
background-image: url(https://pngimg.com/uploads/envelope/envelope_PNG18366.png);
background-size: cover;
width: 200px;
height: 200px;
margin: 200px auto 0px auto;
cursor: pointer;
}
.envelope-msg {
color: white;
text-align: center;
}
.letter-close {
display: block;
}
.letter-open {
display: none;
}
.rtan {
background-color: white;
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/Webp.net-gifmaker+(2).gif');
.gif'){kind=link}
background-size: cover;
width: 200px;
height: 200px;
margin: 100px auto 0px auto;
border-radius: 200px;
border: 5px solid white;
box-shadow: 0px 0px 10px 0px white;
}
h1 {
color: white;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.message-box {
background-color: ivory;
color: brown;
box-shadow: 0px 0px 20px 0px white;
width: 400px;
line-height: 30px;
font-size: 20px;
margin: auto;
padding: 30px;
}
.from {
text-align: right;
margin: 0px;
}
@media screen and (max-width: 760px) {
.messagebox {
width: 300px;
padding: 20px;
}
.rtan {
width: 150px;
height: 150px;
margin: 70px auto 0px auto;
}
h1 {
font-size: 28px;
}
.envelope {
margin: 150px auto 0px auto
}
}
</style>
<script>
function open_letter() {
document.getElementsByClassName("letter-close")[0].style.display = 'none'
document.getElementsByClassName("letter-open")[0].style.display = 'block'
}
function go_rtan() {
alert('앗 어떻게 찾았지!')
window.location.href = 'https://spartacodingclub.kr/?f_name=%EC%9D%B4%ED%98%84%EC%9A%B0&f_uid=601bbfc0ec0bc5ad3fb83450'
}
</script>
</head>
<body>
<div class="letter-close">
<div class="envelope" onclick="open_letter()"></div>
<h2 class="envelope-msg">봉투를 열어봐!</h2>
<h2 class="envelope-msg">얼른!</h2>
</div>
<div class="letter-open">
<div class="rtan" onclick="go_rtan()"></div>
<h1>2021년 수고 많으셨습니다!</h1>
<div class="message-box">
안녕하세요!. <br />
올해 코로나 때문에 모두 바빴는데 <br />
내년에는 없어지면 좋겠네요 <br />
내년에는 다같이 힘내서 이겨냅시다! <br />
모두들 방역 꼭 잘 지키세요! <br />
<p class="from">2021-09-13 이현우가</p>
</div>
<h1>앞으로도 코로나를 잘 이겨냅시다!</h1>
</div>
</body>
</html>
'Study > 스파르타 코딩클럽' 카테고리의 다른 글
| 스파르타 코딩클럽 나홀로 코딩 패키지 1주차 (0) | 2021.09.12 |
|---|