사전작업 - 웹개발 종합반 크런치 수강하기 1주차
7기생들의 모집이 언제부터 시작했는지는 모르겠지만 다들 1회강 정도는 한 것 같다
5월 9일까지인줄 알았는데 5월 4일날 시험본다니까 넉넉히 5월 전까지 다 들어야 하는 페이스다
이정도 페이스라면... 다음주 주간 내내 하루에 두주차씩 달리면 된...다?
이거 너무 잔인하구먼
아무튼 1주차 강의소감은 - 약간 무작정 따라하기 느낌으로 강의가 간다
사실 이게 뭔가를 배우는데 가장 빠른 방법은 맞긴 한데 이해의 깊이가 빠르게 깊어지는 방식은 아니다
때문에 이해를 늘리기 위해서는 따로 시간을 할애해야 할 듯 하다
그리고 어쨌거나 이 강의를 통해서 코딩 자산을 늘려나가야 한다
거의 대부분의 코딩은 이미 잘 짜여져 있는 코딩을 잘 긁어오고 내용을 잘 파악하는걸로 시작이 되는 듯 하다
즉 긁어와서 쌓아 놓는게 곧바로 자산이 된다는 말씀 - 그야말로 카피레프트 ㅋ
1. 요소 내부 정렬
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
이를테면 이런거? 아마 많이 쓰게 될 것들일텐데 그때마다 하나씩 타이핑하고 있으면 속도적으로 못따라간다
즉 이런걸 적극적으로 써야 공부하는 과정에서도 현업에서도 속도로 밀리지 않을 수 있다는거
일단 영타 속도랑 키보드 기호를 익숙하게 해야할 것 같다
튜터의 타이핑속도를 못따라가서 멈추는 경우가 허다하다
2. 배경 이미지 가져오기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("");
background-position: center;
background-size: cover;
리니어 그라디언트 옵션은 안쓰면 버리자
부트스트랩 사용법도 배웠다
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
아마 비슷한 걸 지원하는 홈페이지는 더 있을 것이다
물론 돈받고 배포하는 데도 있을거라고 본다
일단 이번 수업에서는 이걸 많이 쓰니까 일단 링크 남기고 -
자바스크립트는 겉햩기만 살짝
변수
함수 function 함수이름(필요한 변수들) { 내릴 명령들을 작성}
조건문 if ()
반복문 예시
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
여기까지는 대단히 쉬워보이는데 이제 변수에서 호출하는 것이 리스트인 경우, 리스트의 일부인 경우가 이제 헷갈릴 수 있다. 많은 예를 많이 접하는게 좋을 듯 하다
마지막으로 과제 코드 올리고 1주차는 끝
정답지랑 조금 다르긴 한데 딱히 잘못만든건 아닌거 같다
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Dongle&family=Gaegu:wght@300&display=swap" rel="stylesheet">
<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 {
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.ytimg.com/vi/OxgiiyLp5pk/maxresdefault.jpg");
background-position: top;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Gaegu', cursive;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
padding: 20px;
font-family: 'Gaegu', cursive;
}
.qutset {
max-width: 500px;
width: 95%;
margin: 10px auto 0px auto;
font-family: 'Gaegu', cursive;
}
</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" style="margin-top: 10px">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div style="margin-top: 10px">
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
</div>
<div class="qutset">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>대한민국 갬성 보컬의 꼭짓점!</p>
<footer class="blockquote-footer">쏠트리</footer>
</blockquote>
</div>
</div>
</div>
<div class="qutset">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>뭐라구? 꼭지라구 하앜?</p>
<footer class="blockquote-footer">사생팬</footer>
</blockquote>
</div>
</div>
</div>
<div class="qutset">
<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>