Ssa!
(sparta)웹개발 종합반 1주차 복습 본문
웹개발 종합반 1주차를 들었다. 목차를 설명하자면
- HTML, CSS 기초 내용 -> 로그인 페이지 만들기
- Javasciprt 기초 문법
이렇게 배운 것 같다. 또한
- 구글 웹 폰트(https://fonts.google.com/?subset=korean)
- 부트스트랩(https://getbootstrap.com/docs/4.0/components/alerts/)
에 대해서 배웠다
Html과 css로 부트스트랩에 있는 코드를 카피해 '나홀로 메모장'이란 것도 만들었다.
1주차에서 가장 중요하게 생각하는 개념들을 정리하면
- html의 div로 구역을 나누어 class를 이용하여 css를 적용하는 것
- 구글링의 중요성 (검색 키워드에 대한 것)
- html은 글 속성과 박스속성으로 나뉘어짐/ 박스 속성은 가로, 세로 개념이 존재하는 반면, 글 속성을 이동시키려면
박스로 강제로 바꿔준 다음 이동 시켜야함
- javascript에서 리스트와 딕셔너를 잘 이용하여 for과 if에 잘 적용하는 것
- 연산 기호 중 나머지를 구하는 %를 이용하여 쓰이는 곳(1. 짝수,홀수 나뉠 때 2. 트래픽이 다량으로 들어올 때 균등하게 나눌 때)
이정도로 정리해볼 수 있다. 1주차 강의가 끝나면 숙제를 내주는데 그 숙제를 한 코드는 아래와 같다
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- google font -->
<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=Hahmlet:wght@500&display=swap" rel="stylesheet">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<style>
* {
font-family: 'Hahmlet', serif;
}
.mytitle {
width: 500px;
height: 400px;
margin: auto;
background-image: url('http://kr.people.com.cn/NMediaFile/2014/0922/FOREIGN201409221055000177283683513.jpg');
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.span_font_size {
font-size: 15px;
font-weight: bold;
}
.font_align {
width: 700px;
margin: auto;
}
.btn_align {
width: 100px;
margin: auto;
}
</style>
<body>
<div class="mytitle">
</div>
<div class="font_align">
<p></p>
<h3>집사 서비스 <span class="span_font_size"> 가격: 50,000원/1시간 </span></h3>
<p></p>
<h6>집안일로 피로한 당신! 단 몇 시간이라도 현실에서 벗어나고 싶습니까? 우리 집사 서비스로
그 현실에서 벗어나게 해드리겠습니다. </h6>
<br></br>
<h3> 주문하기</h3>
<div class="form-group row">
<label for="inputname" class="col-sm-2 col-form-label">주문자 성함</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="inputname" placeholder="주문자 성함">
<p></p>
</div>
</div>
<div class="form-group row">
<label for="inputaddr" class="col-sm-2 col-form-label">주소</label>
<div class="col-sm-10">
<input type="addr" class="form-control" id="inputaddr" placeholder="주소">
<p></p>
</div>
</div>
<div class="form-group row">
<label for="inputnumber" class="col-sm-2 col-form-label">전화번호</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputnumber" placeholder="전화번호">
<p></p>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">시간</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>-- 시간대를 선택하세요 --</option>
<option value="1">12:00 ~ 13:00</option>
<option value="2">13:00 ~ 14:00</option>
<option value="3">14:00 ~ 15:00</option>
<option value="4">15:00 ~ 16:00</option>
<option value="5">16:00 ~ 17:00</option>
<option value="6">16:00 ~ 17:00</option>
</select>
</div>
</div>
<br></br>
<div class="btn_align">
<button type="button" class="btn btn-primary">신청하기</button>
</div>
</body>
</html>보완할 점
강사님과 나랑 다른 점을 본다면 나는 처음부터 완벽한 상태를 요구하는 것 같다. 내가 하는 방식은 글씨를 적었다면 글꼴과 크기 위치를 처음부터 다 바꾼다는 것이다. 강사님이 하는 것을 보니 큰 틀의 기준을 먼저 맞추고 글꼴과 크기를 효율적으로 나눠 바꾸는 것이다. 내가 하는 행동이 시간 효율성도 떨어지고 나중에 에러가 발생했을 때 문제 해결 시 여러 단계로 쪼개는 것도 어려운 것 같다. 강사님 처럼 큰 숲을 먼저 보고 작은 디테일을 꾸려나가는 것이 시간 효율과 문제 해결에 더 도움이 주는 것 같다. 코드의 차이를 보는 것이 아니라 어떻게 하면 실용적으로 코드를 짤 수 있는지 생각할 수 있는 시간이 되어 매우 유익했다.
'스파르타 내일배움캠프 > 내일배움캠프 사전과제' 카테고리의 다른 글
| 파이썬 사전과제 ) 파이리 드래곤볼 깨기! (0) | 2022.08.19 |
|---|---|
| (sparta)웹개발 종합반 1 ~ 5주차 회고 (0) | 2022.08.18 |
| (sparta)웹개발 종합반 4주차 복습 (0) | 2022.08.17 |
| (sparta)웹개발 종합반 3주차 복습 (0) | 2022.08.16 |
| (sparta)웹개발 종합반 2주차 복습 (0) | 2022.08.16 |
