2021. 8. 5. 10:04ㆍ카테고리 없음
HTML, CSS, Javascript를 배울 수 있었던 1주차였다.
비록 초심자로서 배우는 아주 기본적인 튜토리얼이겠지만 재밌게 배울 수 있었다.
강의에서 여러 번 강조했던 것들부터 정리한 다음, 1주차의 숙제에 대해서 돌아보도록 하겠다.
1. HTML은 웹의 뼈대, CSS는 뼈대를 꾸며주는 장식품, Javascript는 웹에서 명령을 수행하게 하는 언어
2. 코드 정렬의 중요성: 굉장히 여러 번 강조를 하셨다. 아무래도 작업을 하고 난 후에도 수정을 가할 일이 많기 때문에 기본적으로 알아보기 쉽도록 이름도 알기 쉽게 적어야 하고, 한 글자라도 꼬이지 않도록 뭉탱이들끼리 잘 정렬을 해놔야 한다. 이번에도 첫 숙제를 하면서 그 중요성을 바로 알 수 있었다. div구조가 한번이라도 꼬이면 굉장히 귀찮아진다는 것을 말이다.
3. CSS에서 가장 기본적으로 알아야 할 것: h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding 나머지 세세한 것들은 구글링으로 충분히 해결할 수 있었다.
4. bootstrap의 소중함: 첫 숙제를 하면서도 사실상 여기 있는 코드들을 이거저거 갖다 쓴 게 전부였던 것처럼 느껴졌다. 아예 다 가져오기도 하고, 어떤 건 일부만 떼서 잘 갖다붙이기도 했다.
5. Javascript에 대해선 아직 생소하지만 앞으로 자주 복습을 해서 익숙하게만 좀 해야겠다. 첫 숙제에서 썼던 Html과 연결하는 과정만 정리해보자면 {함수를 만들어두기>버튼에 함수를 연결하기. 버튼을 누르면 함수가 불립니다.} 간단하지만 앞으로 더 배운다면 응용할 수 있을 것 같다.
6. [크롬 개발자도구]를 열어서, console 탭에 작성합니다!: 명령어를 빠르게 테스트해보기 좋게 하는 것이다.
7. Javascript 기본 문법: a, let, list, dict, function, if, else, else if, and, or
밑은 첫 주차 숙제 결과물이다
<!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">
<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=Stylish&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>
<style>
* {
font-family: 'Stylish', sans-serif;
}
.whole {
width: 500px;
margin: auto;
}
.btn {
display: block;
margin: auto;
font-family: 'Stylish', sans-serif;
}
</style>
<script>
function btn() {
alert("주문이 완료되었습니다");
}
</script>
</head>
<body>
<div class="whole">
<div class="card">
<img class="card-img-top"
src="https://m.belleu.co.kr/web/product/big/202103/6f4485f6fd5a630e4407d6dfd8f0d387.gif"
alt="Card image cap">
</div>
<div>
<span style="font-size:40px;">랜덤박스</span>
<span style="color:orangered">가격: 1개 10,000원</span>
<span style="color:dodgerblue">*10개 구매시 1개 증정*</span>
<p>자신의 운을 시험해보고 싶다면.</p>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">주문자 이름</label>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</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">1</option>
<option value="2">5</option>
<option value="3">10</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">주소</label>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">전화번호</label>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btn();">주문하기</button>
</body>
</html>
처음에 부트스트랩에서 폼을 가져올 때 div가 약간 꼬였는지 영역이 제대로 설정되있지가 않았고,
가져온 박스들 중에서 하나의 다른 박스가 있었는데 그 박스만 사이즈가 다른 상태로 정렬이 되지가 않아서 애먹었다.
그래서 이리하고 저리하다가 결국 다시 다 날리고
아무래도 원래 가져왔던 Small이라고 써진 박스가 사이즈가 강제돼있어서 충돌이 되던 것 같아 2번째의 박스인 dropdown박스를 기준으로 select부분만 날려버리고 그 밑에 원래 가져왔던 Small박스의 input부분만 가져와서 그 밑에다가 붙여버렸더니 만족스러운 결과가 나왔다 그리고 4개를 다시 묶어서 정렬에 성공했다.
근데 맨밑의 버튼은 묶어버렸더니 박스 정가운데 오지 않고 박스의 왼쪽으로 가버려서 결국 div에서 떼버리고 따로 margin을 넣었더니 잘 해결되었다.
마지막에 버튼에 alert이 뜨도록 하는 걸 했는데, 배운 게 잘 기억나지 않아서 그냥 구글링해버렸다.
아무래도 처음하는 거다 보니...간단하다고 하는 것도 생각보다 헤매게 되었다.
그래도 다음주엔 더 나아지리라 생각하고 연습을 해야겠다.