고을마을 : 나의 코딩 이야기

[스파르타코딩클럽] 웹개발 종합반 1주차 기록 본문

스파르타코딩클럽 웹개발종합반

[스파르타코딩클럽] 웹개발 종합반 1주차 기록

고을마을 2022. 3. 12. 00:58

기나긴 취업고민 끝에 개발자가 되기로 마음을 먹었다.

문과생이 수학적 지식이 요구되는 코딩을 잘할수 있을까? 라는 걱정도 있었지만 

걱정만 하고 시도해보지 않으면 후회만 남는법. 

부트캠프 항해99에 도전하기로 했다.

 

스파르타 코딩클럽의 부트캠프 항해99 7기에 참여하기 앞서 사전 준비 프로그램인 웹개발 종합반을 수강하게 되었다.

이번 글에서는 웹개발 종합반 1주차 내용을 공부하고 그 기록을 남기고자한다.

웹개발 종합반 1주차 과정

 

 

스파르타 코딩클럽의 이범규 대표가 직접 강의를 진행한다.

친절한 설명과 나처럼 한번도 코딩을 경험해보지 못한 사람들을 위해 차근차근히 수업을 진행해줬다.

 

  • 1-3 html css기본내용에서부터 1-7 폰트, 주석, 파일분리까지의 내용
<title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>

<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

 

위의 코드스니펫을 바탕으로 간단한 로그인 페이지를 만들어야했다.

처음 코딩을 해보는거라 몇분의 고민 끝에

 

 

위의 페이지를 만들어냈고 

 

 

최종적으로 위의 로그인 페이지를 만들어냈다.

여러차례 강의를 돌려보면서 완성해냈지만 내 인생 처음으로 로그인 페이지를 만들어 본거라 굉장히 기뻤다. 

<div>를 두개로 나눠서 코드를 작성해야한다는 것도 굉장히 흥미로웠다.

width, height를 작성해 크기를 설정하고,

background-image : url('')을 통해서 이미지를 넣고,

background-position: center; , background-size: cover; 를 통해서 중앙에 위치시켜줬다.

border-radius로 둥글게 표현하고, 

text-align: center; padding-top:40px; 를 통해서 글씨를 중앙에 위치시켜줬다.

https://fonts.google.com/?subset=korean 에서 폰트도 선택해서 입혀줬다. 

 

특히 margin과 padding의 개념은 가장 주목할만했다.

margin은 바깥 여백을, padding은 내 안쪽 여백을 말한다. 잊지말자.

 

  • 1-8 부트스트랩, 예쁜 CSS 모음집에서부터 1-11 포스팅박스를 완성하기까지의 내용

사실 로그인 페이지를 만들때

'개발자가 일일히 디자인해서 페이지를 구현해야하는거면 디자인 감각이 엄청 뛰어나야하는거 아니야?'

라는 의문을 가졌다. 나는 워낙 예술적감각이 떨어지기에 조금 걱정하기도 했다.

근데 부트스트랩이라니!

내 걱정을 덜어주는 획기적인 기능이라고 생각한다. 

 

위에는 구현사진, 아래는 코드스니펫!

 

부트스트랩을 잘 활용해서 홈페이지를 예쁘게 꾸밀수 있게되었다. 

부트스트랩을 사용하려면 링크를 달아줘야한다. 근데 이 링크를 어디서 가져와야하는지 잘 모른다. 강의에서 코드스니펫에 붙여넣어져 있었는데 링크의 출처가 어디인지 구글링을 통해서 확인해봐야겠다.

 

 

부트스트랩을 활용해서 위와 같은 페이지를 만들어봤다.

 

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 

내용물 안의 내용물을 가운데로 정렬하는 손쉬운 방법으로는 위의 내용을 작성하는 것이다.

flex-direction: column;을 통해서 위 아래로 구분할수 있고

flex-direction: row를 통해서 옆으로 나란히 둘 수 있다는 것도 신기했다.

 

.mytitle > button {
    width: 200px;
    height: 50px;

    background-color: transparent;
    border-radius: 50px;
    border: 1px solid white;
    color: white;
    margin-top: 10px;
}

.mytitle > button:hover {
    border: 2px solid white;
}

 

.mytitle > button:hover{

    border: 2px solid white;

}를 통해서 마우스를 들이대면 깜빡깜빡 거리는것도 구현해봤다. 

 

.wrap{
    max-width : 1200px;
    width : 95%;
    margin : 20px auto 0 auto;
}
.mypost{
    max-width: 500px;
    width : 100%;
    margin : 10px auto 0 auto;

    box-shadow: 0px 0px 3px 0px gray;
    padding : 20px;
}

 

이번 페이지를 만들면서 가장 흥미로웠던 점은 스마트폰 화면에서도 어색하지 않게 보여주는 것이었다.

max-width와 width를 따로 설정해서 최대크기와 평소 크기를 설정해주면 스마트폰 화면해서도 잘 구현되었다. 

 

 

  • 1-12 javascript 맛보기에서부터 1-15 javascript 연습하기까지의 내용

우선 간단한 +,-,*,/,%에 대해서 배우고 리스트와 딕셔너리에 대해서 배워보았다.

 .split()을 통해서 문자열을 나누는 법도 배웠고,

 

함수의 기본 생김새를 배웠다.

function sum(num1, num2) {

   console.log('숫자', num1, num2);

   return num1 + num2;

}

sum(3, 5); // 8

sum(4, -1); // 3

 

조건문 if, else if, else까지 사용법도 익힐수 있었다. 

function is_adult(age){

     if(age > 20){

     alert('성인이에요')

     } else if (age > 10) {

     alert('청소년이에요')

     } else {

     alert('10살 이하!')

   }

 }

is_adult(12)

 

반복문 for도 사용법을 익힐수 있었다.

let scores = [

  {'name':'철수', 'score':90},

  {'name':'영희', 'score':85},

  {'name':'민수', 'score':70},

  {'name':'형준', 'score':50},

  {'name':'기남', 'score':68},

  {'name':'동희', 'score':30},

]

for (let i = 0 ; i < scores.length ; i++) {

   if (scores[i]['score'] < 70) {

     console.log(scores[i]['name']);  

   }

}

// 이렇게 하면 점수가 70점 미만 기남과 민수 동희를 출력할수있음.

 

for (let i = 0; i < mise_list.length; i++) {

  let mise = mise_list[i];

  if (mise["IDEX_MVL"] < 40) {

     let gu_name = mise["MSRSTE_NM"];

     let gu_mise = mise["IDEX_MVL"];

     console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);

  }

}

 

function show_gus(index) {

  for (let i = 0; i < mise_list.length; i++) {

     let mise = mise_list[i];

     if (mise["IDEX_MVL"] < index) {

         let gu_name = mise["MSRSTE_NM"];

         let gu_mise = mise["IDEX_MVL"];

         console.log(gu_name, gu_mise);

      }

   }

}

// 이러면 아래와 같은 것이 가능!

show_gus(40) // 40보다 작은 구만 출력!

show_gus(35) // 35보다 작은 구만 출력!

 

 

javascript 문법이 어렵게 느껴졌다. 이해는 할 수 있었지만 막상 내가 이 식을 직접 만들어 낼 수 있을까 라는 걱정이 들기도 했다. 다음 2주차 강의에서 좀 더 문법에 익숙해질수 있었으면 좋겠다.

 

 

  • 1-16 1주차 끝 & 숙제설명

 

위와 같은 페이지를 만들어보았다. 

글을 작성하고 응원남기기를 누르면 내가 쓴 글이 올라오진 않지만 차차 배워나가면 할수있을거라 믿는다.

1주차 복습 열심히 하고 2주차 강의도 들어봐야겠다.

'스파르타코딩클럽 웹개발종합반' 카테고리의 다른 글

첫 협업 미니프로젝트- NETNOTE  (0) 2022.05.02
[스파르타코딩클럽] 웹개발 종합반 5주차 기록  (0) 2022.03.16
[스파르타코딩클럽] 웹개발 종합반 4주차 기록  (0) 2022.03.15
[스파르타코딩클럽] 웹개발 종합반 3주차 기록  (0) 2022.03.14
[스파르타코딩클럽] 웹개발 종합반 2주차 기록  (0) 2022.03.13
'스파르타코딩클럽 웹개발종합반' Related Articles more