Study/Development
[개발일지] 웹개발 종합반 1주
titann
2022. 7. 23. 17:31
<스파르타코딩 웹개발종합반 수강일지>
웹개발 종합반 1주차 수강
수업내용: 웹 - HTML/CSS/JS + Bootstrap
HTML/CSS를 이용하여 페이지를 구성하고, Bootstrap에서 컴포넌트를 가져다가 사용하는법을 학습했다.
JavaScript는 기초 문법정도만 학습했다.
ex) 변수/자료형/함수/조건문/반복문
이를 기반으로 영화 기록하기 페이지를 만들어 보았다.
<과제>
영화 기록하기 페이지를 짜집기하여 팬명록 페이지 만들기
<기억할것들>
1. display: flex
- CSS에 display: flex 를 적용할 때, 4줄을 같이 가져온다.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
2. background-image
- background-image를 적용할 때, 3줄을 같이 가져온다.
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://e3.365dm.com/19/09/2048x1152/skynews-sam-smith-gender-non-binary_4773202.jpg);
background-position: center;
background-size: cover;
3. Bootstrap
- Bootstrap 이용시, 아래 3줄을 같이 가져온다.
<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>
4. Google Font 사용하기
- Google Font를 불러올 때, link 는 맨 아래 링크를 복사하여 title 태그 아래에 넣는다.
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
- 폰트 적용 시 아래 내용을 복사하여 style 태그 내에 적용하고자 하는 부분에 넣는다.
* {
font-family: 'Gowun Dodum', sans-serif;
}
5. JavaScript 조건문/반복문
- 전형적인 조건문 + 반복문의 형태: 저장해 두었다가 이름만 바꾸어 쓰면 좋을 것 같다.
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30}
]
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
6. 팬명록 만들기: 숙제
- 복사 붙여넣기로, 정말 작은 시간이 걸렸다.
<!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>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
.mytitle {
background-color: green;
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://e3.365dm.com/19/09/2048x1152/skynews-sam-smith-gender-non-binary_4773202.jpg);
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap {
max-width: 500px;
width: 95%;
margin: 20px auto 0 auto;
}
.wrap div{
margin-top: 10px;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0 0 3px 0 gray;
padding: 20px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>샘스미스 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">응원남기기</button>
</div>
</div>
<div class="wrap">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>반응형