[스파르타코딩클럽] 웹개발 종합반 강의 1주차 회고🙋🏻‍♀️

Bay·2023년 1월 12일

코딩일지

목록 보기

2/3

웹개발 종합반 1주차 : HTML+CSS+Javascript 기초 문법 연습

[Ⅰ] 오프닝

스파르타코딩클럽!

SQL강의(SQL 1주차 회고록)와 마찬가지로 내일배움카드를 활용해서 강의를 수강하게 되었다. 스파르타클럽에서는 국비지원과정에서 강의 2개부터 수강할 수 있도록 되어있는 듯 하여, 그동안 궁금했던 웹개발 종합반을 우선적으로 선택했다.

웹개발 선택 이유

사실 2022년 초에 『모두의 HTML5&CSS3』 를 보면서 기초적인 지식은 파악해둔 상태였다. 하지만 빠른 템포의 실습 위주의 강의가 필요했고, 책에서는 예시로 든 프로젝트가 너무 단일성을 띄고 있어 한계가 있었다. 따라서 결국에는 관심을 가지고 호시탐탐 노리던 웹개발반을 선택했다. 현재 웹 포트폴리오는 어도비 플랫폼을 사용하여 제작해 둔 상태이다. 다만 플랫폼 내 프리셋만으로는 생각한 웹을 그려내는데 한계가 커, 코딩을 통해 웹포폴을 만들자는 원대한 꿈이 있다. 스파르타 코딩 클럽의 강의들은 (우선 보기에) 이론보다는 실습위주의 다양한 예시로 진행되는 듯하여 웹포폴이란 목표를 이룰 수 있을 듯 하다!

[Ⅱ] 강의 수강

HTML과 CSS에 대한 기본적인 지식이 있어서 그런지 이론이 적고 빠른 템포의 실습 위주의 강의는 우선적으로 잘 맞았다. 하지만 기초가 없었으면 초반에 ~~무작정 따라하는 수업방식에 적응하지 못했을 것 같다는 느낌~~도 어렴풋이 들었다. 다만 자바스크립트에 진입하기 전까지는 딱 원했던만큼의 속도와 내용으로 강의가 진행됐다.

1) 학습 내용

HTML,CSS의 기초 파악 및 활용
부트스트랩 사용 및 컴포넌트 Html 문서에 활용
Javascript 기초 문법 파악

2) 주요 내용

background 속성

(background-position 사용 예시 정리)

background-image : url('link');
background-position : center;
/**bottom 10px right 20px와 같은 방식으로도 사용 가능**/
background-size: cover;

컨텐츠 중앙 정렬하기 (margin 속성의 auto값과 display 속성 사용)

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/**flex-direction 사용, column-좌우정렬, Row-상하정렬**/

margin : 20px auto;
/**상단마진-20px, 좌우여백은 auto로 중앙배치**/

화면 가로 사이즈에 따른 모바일 처리

width: 95%;
max-width: 500px;
/**화면 폭 500px 전에는 가로 사이즈 95%로 노출, 넘으면 최대 500px으로 노출**/

javascript 기초 문법 - 변수선언과 리스트&딕셔너리

let 변수명 = 20 // 숫자
let 변수명 = '변수' // 문자
let a_list = []  // 리스트 선언
	let a_list = ['변수1', '변수2', '변수3']
let a_dict = {}  // 딕셔너리 선언
	let a_dict = {'key1':'value','key2':'value2'}

함수와 조건문 & 반복문

// 함수만들기
  function 함수이름(필요한 변수들) {
      내릴 명령들을 순차적으로 작성
}

//반복문
  for (1. 시작조건; 2. 반복조건; 3. 더하기) {
      4. 매번실행
}
  for (let i = 0; i < 100; i++) {
      console.log(i);
}

//조건문
  function 함수이름(변수값){
      if(변수값 > 20){
          alert('알림메세지1')
      } else {
          alert('알림메세지2')
      }
  }

3) 보완점

css의 속성 중 컨텐츠의 중앙 정렬을 위해 display 속성과 margin에서 auto 사용값이 아직은 익지 않아 빠르게 파악하고 적용해보는 연습이 필요할 듯 하다.
자바스크립트가 특히나 어려웠는데, 강의에서는 function과 Let등의 다양한 문법의 활용과 변수에 대한 기본적인 설명이 생략되어 이 부분 복습이 절실히 필요하다. 다행히 회고록을 작성하면서 강의자료를 참고하니 꽤 자세하게 설명이 되어 있어서... 다시 확인해야겠다.
return 명령문에 대한 명확한 사용법이 애매함>질문 필요!
부트스트랩을 사용할 수 있게되어 간단한 레퍼를 찾아 웹포폴의 간단한 구조정도는 짜볼까 싶다. 진도나간 1주차 내용 까먹기 전에 적용할 수 있을듯?