- 숙제할때 어려웠던점
:디브를 어떻게 묶고 클래스로 이름을 지어서 스타일 주는거에서 버벅거림
그래서 숙제 힌트보고 대충 감 잡음 - 어느부분이 막혔나?
:이미지 넣는법도 까먹음ㅎ 그래서 힌트봄 - 또?
:전체적으로 어떻게 디자인할지 감이 안와서 일단 부트스트랩 가서 필요한 항목을 카피함. 근데 그 항목 찾을때도 버벅거림ㅋㅋㅋㅋㅋ
일단 가지고 와서 저장 새로고침 하면서 계속 확인하면서 하나씩 지우고 바꿔나감.
(이때 자괴감 들었다 ㅎ 다른사람들은 다 똑디 잘하던데ㅠ 하면서)
:마지막에 전체 중앙정렬이 안되서... 아니 마진 오토인건 아는데 어떻게 클래스를 만들어서 스타일을 줘야할지 막막했음 ㅜ 그래서 구글링함! - 숙제하고 느낀점
:강의 들으면서 잘 따라가고 있나 했는데, 생각보다 머리에 많이 들어와있었고
그걸 실용적으로 쓸때 버벅거리고 기억을 못하는게 문제....
많이 만들어보고 계속 꺼내려고 해야할듯
<!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">
<!-- 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>
<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=Sunflower:wght@300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Sunflower', sans-serif;
}
.wrap {
width: 500px;
margin: auto ;
}
.item_img {
width: 500px;
height: 400px;
margin: auto ;
background-image: url("https://previews.123rf.com/images/fouaddesigns/fouaddesigns1604/fouaddesigns160400137/55105827-%EB%B0%94%EB%9E%8C-%EC%95%84%EC%9D%B4%EC%BD%98%EC%9D%98-%EA%B7%B8%EB%A6%BC-%ED%9D%B0%EC%83%89%EC%97%90-%EA%B3%A0%EB%A6%BD.jpg");
background-size: cover;
background-position: center;
}
.price {
font-size: 19px;
}
.item_ex {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
.item_order {
width: 500px;
margin: auto ;
}
.btn-order {
width: 120px;
margin: auto ;
display: block;
}
</style>
<script>
function order(){
alert('주문이 완료되었습니다')
}
</script>
</head>
<body>
<div class="wrap">
<div class="item_img"></div>
<div class="item_ex">
<h1>시원한 바람을 팝니다 <span class="price">가격:10,000원/개</span></h1>
<p>이 바람은 올 여름 더위를 시원하게 날려 줄 거에요!</p>
</div>
</div>
<div class="item_order">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</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">30개</option>
<option value="2">60개</option>
<option value="3">100개</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
</body>
</html> 입력하세요
에이치아이~