어쩌면 역사적인 한획이 될지도 모르는 (물론 내가 꾸준히 이 노트를 쓴다는 가정 하에나 가능한 말이겠지만) 첫 노트의 시작을 어떻게 적어야할지 잠시 곰곰히 생각해보았다. 생각이 나지 않는다. 방금 전 "인.생. 첫. 웹.페.이.지."를 만드는데 내 지적인 에너지를 모두 소진했기 때문인지도 모르겠다. 그냥 두서없이 의식의 흐름대로 이야기를 써 내려가볼까.
아, 우선 목적을 좀 밝혀두자. 훗날 내가 이 페이지를 다시 읽었을때 어쩌면 잃어버렸을지도 모르는 오늘의 초심을 다시 한번 불러일으킬 수 있게 말이다.
난 4일 전, 처음 코딩을 접했다. 생활코딩에서 HTML, CSS, JavaScript를 공부했고 이틀 전부터 '스파르타 코딩클럽'에서 '왕초보코딩반(이름이 정확히 맞는지 모르겠다)'을 수강해 듣고 있다. 사실 오늘 만든 웹페이지는 이 왕초보반이 나에게 부여한 숙제다.
결과물을 보면 진짜 별거 아닌 페이지인데, 꽤 고생하며 만들었다. 거의... 30분? 걸린 것 같은데, 미래의 내가 오늘의 결과물을 보면 내가 얼마나 성장했는지 알 수 있을 것이다. ("풉, 이 간단한 페이지를 30분에 걸려서 만들었어?" 라고 생각할지도 모르지만 글을 쓰는 지금의 내가 너의 모습을 만든 것이여. 말하자면 I'm your father 같은 것이랄까?)
그러니까 요지는, 성장이다. 아마 오랜시간 코딩을 접지 않고 공부를 이어간다면 나는 지금보다 분명히 성장해 있을거다. 그리고 아마 그 성장의 끝에서 벽을 만날지도 모르는데, 그 때 이 글을 읽고 '아 생각해보니 나 코딩의 코자도 모르던 때가 있었지.. 그래도 잘 성장했네' 하고 기운을 차릴 수 있었으면 좋겠다. 지금의 내가 성장해서 미래의 내가 될 것이고, 역경에 부딪힌 미래의 나도 새로이 성장할 또 다른 미래의 과거일테니까. 그래서, 이 글을 쓴다.
그럼.. 코딩한 결과를 적어볼까...
<!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=Nanum+Gothic&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Nanum Gothic', sans-serif;
}
body {
width : 800px;
margin : auto;
padding : 0 40px 0 40px;
}
img {
width : 500px;
height : 600px;
margin : auto;
display : block;
}
.priceTag {
font-size : 18px;
}
.client_forBuying {
width : 700px;
}
.col-sm-2 {
padding-right : 0;
}
.btn-outline-dark {
margin : 30px auto 30px auto;
display : block;
padding : 6px 80px 6px 80px;
}
</style>
</head>
<body>
<img src="http://ddaengshop.com/_goods_img/1970-01/1435_2_1619451554.jpg">
<br>
<div class = "product_information">
<h1>빨간망토를 팝니다 <span class = "priceTag">가격: 30,000원/ 개</span></h1>
<P>
이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨강망토의 늑대와 아기 돼지 삼형제의 숨결이 고루 녹아 있는 먹으면 120세까지 살 수 있다는 이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대로 만든 빨간망토이니라.
</p>
</div>
<br>
<div class = "client_forBuying">
<h1>주문하기</h1>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">주문자 성함 :</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">주소 :</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">수량 :</label>
<div class="col-sm-10">
<select id="inputState" class="form-control">
<option selected>--수량을 입력하세요--</option>
<option>1벌</option>
<option>2벌</option>
<option>3벌</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">전화번호 :</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="">
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-outline-dark" onclick=alert("품절되었습니다.")>주문하기</button>
</body>
</html>
음... 사실 마음에 든다. ㅋㅋㅋㅋㅋㅋ 근데 조금 수정하고 싶은 부분이 있다. 그걸 수정하고 싶어서 시간을 꽤 많이 허비한 것 같은데, 아직은 실력이 부족한 모양이다. 수정할 수 있는 방법을 모르겠다.
*우선은 첫 번째, 전체 페이지에서 상단의 margin값을 주고 싶은데, 그게 적용이 안된다. 상단의 사진 위의 공간과 하단의 <주문하기> 밑의 공간이 크기가 다른 것을 볼 수 있는데, 하단의 margin값은 적용이 된듯한데 상단의 것은 적용이 안된다. 왜 그런지 지금 상태에서는 알 수 없다.
*두 번째, '주문하기' 하단에 '주문자 성함', '수량', '주소', '전화번호'와 그 옆에 박스들의 공간구조를 좀 다르게 하고 싶다. 박스를 좀 작게 만들고(가로로 작게) 텍스트들과 박스 사이에 공간을 좀 두고 싶은데, 그게 안된다. 박스의 width값을 줄여도, 텍스트의 width값을 늘려도 요지부동. 왜일까......
'나를 향한 리펙토링' 카테고리의 다른 글
| 중간점검 [프로그래밍 시작 3달 차] (0) | 2021.10.17 |
|---|---|
| 중간점검 [코딩공부 시작 33일차] (0) | 2021.08.17 |
