본문 바로가기

html+CSS+JS

스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #1~5

반응형

인프런에서 이벤트를 한다길래ㅎㅎ

무료 수업도 받았겠다, 회사 지원으로 코드잇 수업도 있겠다.

안 그래도 미루던 판국이라 스터디를 진행하기로 함.

스터디 리더에겐 5만포인트, 스터디원에게는 2만포인트

스터디 인원은 최소 3명

근데 이거 선착순 60팀인듯...

 

여튼 사람을 딱 3명까지만 모아서

스터디를 진행하기로 했다.

 

현재까지 5회를 진행했고

4회차부터 어라 싶었는데 5회차부터는 확실히 정리가 필요할 것 같아서

블로그 다시 부활...

 

 

#1회차
스터디 규칙 확정 / html, css의 기본 복습 -1- (box모델, display, position)
HTML과 CSS를 대충 알 것 같은데 Grid는 잘 모르겠고, <input>의 종류와 <figure>같은 걸 잘 모르겠고... jQuery도 배운 거 같은데 잘 못 쓰겠고... SASS 설치는 어떻게 하는거지? 어중간한 초급자들이 모였다. 기초는 아닌데 기본인 거 같기도 하고, 전문가영역은 절대 아닌 질문들이 넘쳐나는 사람들의 모임이 되었다.

참여자
기초 중의 기초만 배우고 학원에서 많이 쓰는 거라면서 가르쳐준 것만 조금 알게된 후폭풍을 견뎌내다 못해 만든 스터디에 총 2명의 사람과 함께 스터디를 하게 되었다.

룰 설정
모집은 이벤트 덕에 순식간이었고 바로 토의해서 결정한 건, 최소 일주에 3일을 모이도록 하는 것. 인즉, 서로서로 미루거나 호출할 때 없으면 금, 토, 일 연짱 하게 될 것이다.한 번 하면 1시간동안 같이 영상을 키고 진행을 하며 모두 납득이 된 후에 넘어가기로 했다.

목표
목적은 당연히 어중간한 초급자를 넘기는 것.

벌칙 및 인증
따위는 없다. 나갈 사람은 막지 않겠다고 서로 합의를 봤다.하면서 나중에 생길지도 모르겠다.

 

 

#2회차
html, css의 기본 복습-2- (float, list, 부트스트랩) / 편집기 다운(vs code)

지난 번 1회차에서는 일단 다 아는 거지만 혹시나 하는 마음에 서로 놓친게 있을까 초스피드로 복습을 진행했다. 오늘은 남은 부분에 대한 복습을 진행하는게 궁극적인 목표였고, 복습 뚝딱하고 자바스크립트를 배우기 위해 편집기를 통일해서 다운받았다. vscode로 통일하기로 했고 다들 다운받고 확장 프로그램을 공유하는 시간을 가졌다.

 

 

#3회차
자바스크립트 (세미콜론, 자료형/추상형 개요, 변수(개념, 작명방법), 함수, 파라미터)

2회차에서는 기본 html, css의 복습 마무리를 짓고 코딩 프로그램을 'vscode'로 통일하기로 한 후, 서로 사용하는 확장 프로그램을 공유했다. 그리고 js를 배우는데 정말 기본적이라 생각했던 내용도 조금씩 까먹은 상태라 확실히 진도가 조금씩 느려졌다. 하지만 꼼꼼하게 배우고 지나갈 수 있어서 좋은듯.

 

 

4회차
자바스크립트 (다수 파라미터, return문, 간단퀴즈, 자료형-숫자)

1) 다수 파라미터

- function 이름 뒤 괄호 안 파라미터를 ,를 사용하여 여러개를 넣을 수 있다. 파라미터 = 변수와 같은 개념

 

2) return문

- 파라미터가 function의 input 개념이었다면, return은 output 개념이다.

- function에 return이 들어가면 그 function은 return 다음에 오는 값을 반환하게 된다.

function number5() {
  return 5;
}

console.log(number5())

   이 경우, number5라는 함수에는 return을 통해 5라는 값이 반환되고 있기 때문에 콘솔에는 5가 나오게 된다.

 

3) 자료형-숫자

- 모든 값은 특정 자료형을 가지고 있다. 숫자 형태를 띤다고 무조건 숫자형이 아니고, 문자형태를 한다고 무조건 문자형태가 아니다.

 

 

5회차
자바스크립트 (자료형-문자열, 자료형-Boolean, typeof, 형 변환)

1) 문자열
- "" / '' / ``(백틱. 1옆) 를 사용해야함. 각각 똑같은 기호로 시작하고 끝내야함.
- "/'를 사용하고 내부에 같은 기호를 써야한다면 안에 역슬래시를 입력.
- +를 사용하여 문자열 연결 가능.

*** 문자열 안에서 엔터 = \n (역슬래시)

 

2) 불대수 = 불린(Boolean)
- 값: True / False
- && : and 연산자. 거론되는 모든 명제가 true여야 true (or보다 우선순위 높음)
- || : or 연산자. 거론되는 명제 중 하나라도 true면 true
- ! : not 연산자. 거론되는 모든 명제가 false여야 true (!를 2번 쓰면 이중부정=긍정)

*** 명제로 활용할 수 있는 기호: 등호, 부등호
- > / < / >= / <=
- 값만 비교: ==(동등) / !=(부등)
- 값&자료형 비교: ===(일치) / !==(불일치)

 

3) typeof 연산자
- typeof 다음에 값을 적으면 해당 값의 자료형을 알려준다. (Number, Boolean, String 등)
- typeof 연산값은 String이다.
- 변수의 값에 대해서도 똑같이 적용이 되기 때문에 'typeof 변수'를 적으면 변수값의 자료형을 알 수 있다.
- typeof 연산자는 사칙연산보다 우선적용. so, 괄호를 사용하여 우선순위를 적용해야함.
   ex) typeof 8-3 =>NaN (Not a number)
        typeof (8-3) => Number

 

4) 형 변환
- 각각의 자료형 이름을 연산자로 쓸 수 있음.
- String(내용) : 내용의 자료형을 '문자'로 변경.
- Number(내용) : 내용의 자료형을 '숫자'로 변경. 값이 숫자가 아니면 NaN, true=1, false=0
- Boolean(내용) : 내용의 자료형을 '불린'로 변경. 값이 불린 아니면 대부분 true.
   but, '', 0, NaN(=Falsy 값)은 False로 반환됨

반응형