내일배움단으로 나름 제대로 시작하게 된 코딩!
맨날 'freecodecamp 할 거다'만 백만번 생각하다가, 백수된 김에 코딩이 맞나 확인해보고 이직준비를 할까해서 시작!
나름 시작이라고 패기롭게 아이패드 굿노트로 필기도 했닼ㅋㅋㅋㅋ
그리고 내가 만든 html 홈페이지 코드
<!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 href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.product_image {
width:500px;
height:300px;
margin:auto;
background-image: url("https://www.10wallpaper.com/wallpaper/1366x768/1511/MacBook_air-Digital_HD_Wallpaper_1366x768.jpg");
background-size: cover;
background-position: center;
}
.myproducttitle{
font-weight: bold;
}
.content{
text-align: center;
margin: auto;
margin-top: 20px;
}
.price{
font-size: 20px;
}
.order_info{
margin: auto;
width: 500px;
}
.custom-select{
text-align: center;
}
.btn-dark{
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="product_image"></div>
<div class="content">
<h1 class="myproducttitle">MacBook Air 팝니다 <span class="price">가격:1,290,000원</span></h1>
<p>이 MacBook Air가 있으면 개발자 되는 거? 어렵지 않아요~</p>
</div>
<div class="order_info">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">주문자 이름</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</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">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">주소</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">전화번호</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<button type="button" class="btn btn-dark">주문하기</button>
</div>
</body>
</html>일단 div tag를 활용하는 것과 class에 naming을 하여 css로 꾸미는 것까진 이해가 이제 완죠니 되어버림!
그리고 처음에 나 혼자 독학할 때는 하나하나 외우려고만 했는데,
확실히 알려주는 분이 있는 수업을 들으면서 수행해나가니 이해하는 데에 있어 수월한 편이다!
(튜터님께서 처음에 외우지 말라고 하실 땐 내일배움단이라고 그러시는 건가? 했는데 그게 아니었음...)
오늘까지 내가 지금 기억나는 걸로 복습하자면
1. css에 있어서 모르는 것은 홈페이지를 활용하자!
(BootStrap, css border관련한 홈페이지)
2. Style tag로는 내가 원하는 만큼 꾸밀 수 있겠구나!
(font나 button 등등 홈페이지에서 직관적으로 보이는 것들)
이정도인데 아직까지는 좀 더 공부해봐야할 것 같다!
'Coding' 카테고리의 다른 글
| 2주간의 스파르타코딩클럽 웹개발종합반 회고록 (0) | 2021.12.19 |
|---|---|
| 같이 배워봅시다! 코딩 공부 # 2 . [ Day 1. freeCodeCamp 사용방법 ] (0) | 2020.03.28 |
| 같이 배워봅시다! 코딩 공부 # 1 . [ freeCodeCamp 커리큘럼 미리보기 ] (0) | 2020.03.28 |
