1. 개발자로서의 동기
4월 18일(월) 부터 스파르타코딩 웹개발 종합반이 시작되었다.
비전공자에다가 코딩 지식이 전무한 나로서는 이 강의는 한줄기 빛과 같은 희망이었다.
'나도 할 수 있을까?', '너무 늦지 않았을까?' 회피성 짙은 생각들이 망설이게도 했지만
결국엔 도전을 선택했고 한 주를 무사히 마치게 되었다.
코딩을 시작하게 된 가장 큰 동기와 원동력은 '절실함' 이다.
아프리카에서 봉사활동도 해보고, 해외에서 짧게 유학도 다녀와보고 어학원에서 아이들도 가르치는 등
이것저것 해보았지만 결과는 늘 좋지 않았고 내 인생에 대한 비전이 보이지 않았다.
코딩을 배우고 개발자로서 취직을 한다는 것은 나에게 남은 유일하면서도 마지막 기회라고 생각하고
이 배수진과 같은 절실함을 무기로 목표를 달성 할 것이다.
2. 1주차에서 배운 것들
1주차에서 배운 내용은 크게 어렵거나 멘붕되는 내용은 많이 없었다.
비전공자인 내가 처음 접하기에 아주 좋은 내용들로 구성 되어 있었다.
특히 1시간 용어정리를 통해 OS, server, 개발언어, 프레임워크, 협업의 과정 등 비전공자인 내가 알기 어려운
내용들을 알 수 있던 점이 굉장히 좋았다.
1주차 과정을 통한 가장 유의미한 배움은 코딩에 대한 두려움을 조금은 덜어 낸 것이다. 1주차 내내 강의를 들으며
강사님께서 코딩하는 과정을 따라하고 똑같이 만들어냈지만, 그때 그때 일뿐 결국 강사님의 도움없이는
제대로 된 코드를 한 자도 만들 수 없다는 두려움이 많았다.
하지만 1주차 과정을 마치고 숙제 제출을 하다보니 한가지 깨달은 점이 있었다.
코딩은 다른 자격증이나 시험 공부처럼 내 머릿속에만 저장공간이 있는 것이 아니라는 점이다.
1주차 강의가 끝나고 숙제를 시작 했을 때, 내 머릿속에 남은 것들이 없어서 어떻게 시작 할지 당황스러웠다. 어떻게 하면 숙제 예시와 최대한 비슷하게 할까? 어디서부터 시작해야 할 지 어려움이 있었고 내 기억력만으로는 도저히 수행 할 수 없는 과제였다.
하지만 내가 이제껏 강사님을 따라서 해 온 코드들이 고스란히 나의 파일들에 저장되어 있었고, 그것을 통해 또 기억이 안나는 코드들은 다시 한번 강의를 들으면서 숙제를 진행해 나갈 수 있었다. 나의 파일들은 이미 숙제를 위한 프레임워크가 되어 있었고 거기서 부족 한것들은 구글링을 통해서 해결 할 수 있었다.
3. 1주차 과제 완성 과정
부트스트랩 코드를 복붙함으로써 시작하였고 첫번째로 숙제 예시에 있는 네개의 박스를 똑같이 구현하는데 집중하였다.
부트스트랩 리스트를 살펴본 결과 'Input group' 항목에서 예시와 똑같은 박스를 찾을 수 있었고 세개를 복사하였다.
수량을 선택할 수 있는 박스를 찾는 데 조금 해맸는데 이 역시 Input group -> custom forms 에서 찾아서 네개의 박스를 구현하였다. (이 과정에서 <form></form> 을 그냥 <div></div>로 바꾸라는 강사님의 말이 생각 나 실행하였다.)
이 네 박스들은 왼쪽에 몰려 있었는데 여백을 주기 위해서 이 네 박스들을 모두 <div class= "boxes"> 로 묶은 뒤,
.boxes {
width: 500px;
margin: auto;
}명령어를 실행하였다. (전에 했던 작업을 참고하였다.)
그러자 예시와 같이 네 박스가 가운데로 정렬 되었다. 그 다음은 박스 안에 있는 글씨를 default 에서 한글로 바꾸었는데, 박스 안에 여백이 예시와 달라서 padding을 주어야 하나 생각했는데, 다행히 글씨 수에 달라서 박스 안 여백이 조정되어 따로 코드를 입력 할 필요는 없었다.
그 다음으로는 이미지를 넣었다. 이미지는 인터넷 주소복사를 통해 넣었고, 이미지 코드 또한 잘 기억나지 않아 구글링을 하였다. 여백과 크기조정은 처음엔 div로 묶어 margin을 주려 했으나 잘 실행이 되지 않아 구글링을 통해 가운데로 정렬 하였다.
style="display: block; margin: 0 auto;
width:500px; height:500px;">
그 다음으로는 문구를 넣었는데 문단을 나누는 <p>,</p> 와 줄바꿈 <br>이 기억이 나서 어렵지 않게 설정 할 수 있었다. 이때 문구의 정렬을 위해 <div>로 묶었는데 조금 더 효율적인 코드를 입력하고 싶어 구글링을 한 결과, 앞서 정렬헀던 네박스와 같이 명령을 수행하는 법을 알게 되었다. 그로 인해 각각 다른 <div class="phrase">, <div class="boxes">
에 같은 명령어를 집어넣을 수 있었고 다행히 오류없이 작동 되었다.
.phrase, .boxes {
width: 500px;
margin: auto;다음으로는 폰트 설정을 하였는데, 역시나 잘 기억이 나지않아 다시 구글폰트 설정하기 강의로 들어가 강사님의 말을 따라서 내가 마음에드는 폰트를 설정 할 수 있었다. ***<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=Dongle:wght@400;700&family=Stylish&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Dongle', sans-serif;
font-family: 'Stylish', sans-serif;
}마지막으로 주문하기 버튼을 넣을 차례인데, 부트스트랩의 button 항목으로 가서 예시와 같은 버튼을 찾고 버튼을 만들었다. 생각보다 간단 할 줄 알았던 버튼 넣기가 애를 먹었다. 왜냐하면 <div class="boxes">에 넣어서 정렬했기 때문이다. 당연히 가운데로 정렬 될 줄 알았던 버튼이 네 박스의 밑의 맨 왼쪽에 정렬 되었고 왜 그런지 몰라서 한참을 해맸다.
결국 독립된 <div class="button"> 으로 묶고 왼쪽 여백을 줌으로써 숙제 예시와 똑같이 완성 할 수 있었다.
.btn {
margin-left: 450px;
}
