{창} 사전 과제 - 웹개발 종합반 1주차
html, css의 기본 내용을 빠르게 훑고, java script의 기본 개념까지 다뤘다. 기존에 대략 알고있는 내용이기도 했고, 강의가 필요한 것만 압축적으로 전달하는 형태로 잘 되어있어서 수월했다.
1주차 과제로 좋아하는 가수에 대해 응원 메세지를 남기는 팬명록 페이지를 만들었다. 닉네임과 응원댓글을 입력한 내용이 아래쪽에 실제로 보여지는 형태로 만들고 싶어서 java script를 추가로 좀 찾아가면서 했다. 일단 입력을 받아서 아래쪽에 띄우는 것 까지는 했는데, (1) 처음에는 비어있다가 최초록 입력을 하면 목록에 등장하는 것, (2) 여러개가 차례대로 쌓이게 하는 것 까지는 못했다. 찾아가면서 하기에는 시간이 불필요하게 소요될 것 같아 일단 여기까지 하고 넘어가본다. (아마 뒤에서 잘 가르쳐 주시겠지!)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>웹개발 종합반 | 1주차 과제</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
position: relative;
width: 100%;
margin: 0;
padding-top:15%;
padding-bottom:15%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbizaL4%2FbtqDah57DaS%2F8IWOjkHjJKKefOEpDekaC0%2Fimg.gif");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 3% auto 0px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 1%;
}
.mybutton {
margin-top: 2%
}
.myquote {
max-width: 500px;
width: 95%;
margin: 3% auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
padding: 1%;
}
</style>
<script>
function showInput() {
document.getElementById("showNickname").innerHTML =
document.getElementById("nickname").value;
document.getElementById("showComment").innerHTML =
document.getElementById("comment").value;
}
</script>
</head>
<body>
<div class="mytitle">
<h1>스텔라장 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nickname" placeholder="닉네임">
<label for="nickname">닉네임</label>
</div>
<div class="form-floating">
<textarea type="text" class="form-control" id="comment" placeholder="응원댓글"></textarea>
<label for="comment">응원댓글</label>
</div>
<div class="mybutton">
<button type="button" onclick="showInput()" class="btn btn-dark">응원 남기기</button>
</div>
</div>
<div class="myquote">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p><span id="showComment"></span></p>
<footer class="blockquote-footer"><span id="showNickname"></span>
</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
홈텐딩하는 데이터사이언티스트 - 스파르타 중입니다
안녕하세요~
스파르타 코딩클럽
창2기에 지원해볼까 하는데..정보가 너무 없네요 ㅠ 1기 해보시니 200만원의 가치가 있으신가여