1. 수업 목표

1) 서버와 클라이언트의 역할에 대해 이해한다

2) html, css의 기초 지식을 이해한다. 부스트트랩을 가져다 쓸 줄 안다.

3) javascript 기초 문법을 익힌다.

2. 배운것들

1) 서버와 클라이언트의 역할에 대해 이해한다.

클라이언트는 크롬과 같은 브라우저이고, 기본적으로 우리가 인터넷서핑을 할 때, 브라우저가 서버가 만들어 놓은 'api'라는 창구에 요청을 보내면 서버에서 html 파일을 보내주고, 받은 html 파일을 브라우저가 그려준다고 한다.

2) html, css의 기초 지식을 html, css의 기초 지식을 이해한다. 부스트트랩을 가져다 쓸 줄 안다.

-html은 뼈대이고, css는 살, js는 움직임이라고 한다.
-html은 크게 head와 body로 구성되고 head에는 meta, script, link, title 등 페이지의 속성 정보를 담고, body에는 페이지의 내용을 담는다.
-html은 div 태그로 구역을 나누고 모자 관계로 이해하는 것이 중요하다.
-css는 head 안에 로 작성을 해도 되고, .css 파일을 만들어 작성해여 head 안에 (link rel="stylesheet" href="파일이름") 이렇게 불러와도 된다.
-css 배경 tip
background-image: url("");
background-position: center;
background-size: cover;
이 세줄을 이용하여 배경 이미지를 넣는다.
배경이 밝을경우 background-image에 (linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))를 추가하여 어둡게 조절할 수 있다.
-만들어 둔 화면을 가운데로 가져올려면 width를 주고 margin을 auto로 준다.
-내용정렬 tip
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
를 이용한다. 이때 가로일 경우 column이 아닌 row를 사용한다.
-웹폰트를 넣을 때는 구글웹폰트에서 link 태그를 head에 넣고 css를 복사해서 style에 *{}에 넣는다. (모든 태그에 적용하겠다는 뜻)
-부트스트랩은 시작 템플릿을 복사해서 사용하며, 필요한 요소를 부트스트랩 컴포넌트 5.0에서 찾아서 사용한다.

3) javascript 기초문법 배우기

모든 프로그래밍 언어에는 변수, 자료형, 함수, 조건문, 반복문 5가지를 기억해야한다.

-변수는 let 변수명= '...'로 선언한다.//변수명은 특수문자나 띄워쓰기 불가하다.
ex) let first_name = 'Bob'
let last_name = 'Lee'
first_name+last_name // 'BobLee'

-자료형에는 리스트와 딕셔너리 두종류가 있다.

리스트: 순서를 지켜서 갖고 있는 형태
ex) let alist = [1,2,'hey',3] 로 선언
a_list.push('...')로 요소를 추가할 수도 있다.
a.list.length로 길이를 구할수도 있다.

딕셔너리: key와 value 값의 묶음
ex) let a_dict = {'name':'Bob','age':21,'key':'value'}로 선언
a_dict['name'] // 'Bob'을 출력한다.

a_dict['height'] = 180 으로 딕셔너리에 key:value를 넣을수도 있다.

-함수
function 함수이름(변수들) {내릴 명령을 순차적으로 작성} // 로 만들수 있다.
함수이름(필요한 변수들); // 로 사용한다.
ex) function sum(num1,num2) {
console.log('숫자', num1,num2);
return num1+num2;
}

sum(3,5); // 8이 출력된다.

-조건문
ex) function is_adult(age){
if(age>20){
alert('성인입니다')} else{
alert('청소년입니다')}
}
if, else if, else if, else로 추가 가능한다.

-반복문
반복문은 90%가 list와 같이 논다고 한다.
for (let i = 0; i < ...; i++) {
console.log(i);
}
위 세줄로 반복문을 출력할 수 있다.

3. 느낀점, 보완점

아직은 1주차여서 쉬운 것 같다. 웹개발 종합반들 듣기 전 노마드코더에서 한번 클론 코딩 강의를 들어서 그런지 더 쉬운 것 같기도 하다. 부트스트랩을 이용한 팬명록 만들기 1주차 과제를 할 때도 하나도 막히는 부분없이 금방 다했다. 하지만 1주차 과제에서는 다루지 않았던 javascript 문법은 조금 헷갈리기도 한다. 2주차에 능숙하게 javascript를 다룰려면 반복문에 대한 연습이 더 필요할 것 같다.