1주차 수업내용 정리

1주차 수업

 

1) HTML, CSS 기본

• HTML, CSS 기본
• 간단한 로그인 페이지 만들기

2) CSS

• CSS 기초
• 폰트, 주석, 파일분리
• 자주 쓰이는 CSS 연습하기부트스트랩, 예쁜 CSS모음집
• Bootstrap 사용하기

3) Javascript Javascript 맛보기

• Javascript 기초문법 배우기(1)
• Javascript 기초문법 배우기(2)
• Javascript 연습하기

4) 1주차 끝 / 숙제

---

1주차 끝내며 느낀 점 >>

HTML, CSS는 이전에 배웠던 것을 빠르게 복습하며 기억을 되살릴 수 있어 좋았다.

Javascript는 이전에 자바기초 배웠을 때와 비슷한 내용이라서 이전 자바를 배울 때 보다는 쉽게 이해할 수 있었다.

다만 이해 하는것과 실제로 활용하는것은 차이가 있어 익숙해 질 때까지 반복해야될 것 같다.

 

---

공부한 내용 정리 >>>

서비스 동작개념 (서버/ 클라이언트 / 웹의 동작개념)

 

1) 서버 / 클라이언트 / 웹의 동작개념

웹의 동작개념

새로고침을 하면 브라우저에서는 서버에 정보를 요청하고 결과물을 받아 화면에 출력함(HTML을 받는 경우)

콘서트 예매할 경우 새로고침 없이 이미 선택된 좌석 데이터만 넘겨주기도 함 (데이터만 받는 경우 - JSON 데이터 형식으로 받아옴)

 

 

 

부트스트랩 (https://getbootstrap.com/docs/4.0/components/alerts/)

 

부트스트랩을 사용하면 CSS를 직접 쓰지 않아도 예쁘게 꾸밀 수 있다.

사이트에서 원하는 디자인, 컬러, 유형을 확인하고 복사 붙여넣기하여 꾸밀 수 있다.

 

Javascript

자바스크립트 -> 브라우저가 유일하게 알아들을 수 있는 언어

 

자바 스크립트는 header에 넣으며

페이지에 직접 넣는 경우엔 <script> ~ </script> 사이에 넣어줌

 

Javascript 기초문법 (1)

변수, 자료형, 함수, 조건문, 반복문만 알면 자바스크립트 사용할 수 있음

 

**변수

let 변수명 = 값

ex) let a = 2

>> a라는 박스에 2를 넣어라

 

변수이름은 남이 봤을 때도 알아볼 수 있도록 명확하게 지어준다.

 

let에는 숫자 외에 문자도 넣을 수 있음

' ' 작은 따옴표 안에 문자를 넣으면 됨(큰 따옴표도 상관 없음)

let first_name = 'gildong'

let last_name = 'Hong'

first_name + last_name

= gildongHong이 출력됨

 

** 자료형

리스트 자료형 

: 순서가 중요함

기본 형식

let a_list = ['수박','참외','배']

리스트 순번은 0부터 시작함

0 = 수박

추가방법

a_list.push['감']

 

사전 자료형

let a_dict = {'name' : 'bob', 'age' : 27}

 

추가방법

let a_dict['height'] = 180

하면 a_dict 안에는 'name':'bob', 'age':27, 'height':180 이 추가되어 있다.

a_dict 안에는 리스트도 추가할 수 있음

 

a_dict['fruits'] = a_list 하면

a_list에 있던 과일들이 추가됨

a_list['fruits'][2] 하면 '배'가 출력됨

 

사용자가 남긴 이메일 서비스회사? 확인할 때 ↓

 

let myeamil = 'abcdefg@gmail.com'

myemail.split('@') == @를 기준으로 나눠달라

=> 'abcdefg', 'gmail.com' 두개로 나눠짐

myemail.split('@')[1]

=> 'gmail.com'

myemail.split('@')[1].split('.')

=> 'gmail', 'com'

myemail.split('@')[1].split('.')[0]

=> 'gmail'

 

** 함수

funtion sum(num1, num2) {

     sum(num1 + num2)

}

sum(1,2)

=> 3

 

** 조건문

let age = 24

if (age > 20) {

     console.log('성인입니다.')

} else {

     console.log('청소년입니다.')

}

 

&& : 그리고

|| : or

 

if ( 조건) {

} else if(조건2) {

} else ( 그외의 것들)

 

**반복문 = for문

for (let i = 0;  i<값; i++) {

    

}

 

자바 스크립트 복습 (2주차 시작)

버튼 누를 때 마다 짝수 / 홀수 카운팅 하기

<script>

function hey() {

      let count = 1;

      if (count % 2 == 0) { // count를 2로 나눴을 때 나머지가 0 이면 짝수

          alert('짝수입니다!')

      } else {

            alert('홀수입니다!')

      }

      count += 1;

      // 클릭할 때마다 카운트 +1이 되지만 이 문장이 끝나고 나면 count는 사라짐

         다시 처음으로 돌아가 count가 1이 됨

}

</script>

 

↓↓↓↓↓↓↓↓↓↓↓↓↓ 아래처럼 변경해야 함 ↓↓↓↓↓↓↓↓↓↓↓↓↓

 

<script>

let count = 1; // 변수를 함수 밖에서 선언해주면 함수가 끝나도 +1 된 정보가 남아있음

function hey() {

      if (count % 2 == 0) { // count를 2로 나눴을 때 나머지가 0 이면 짝수

          alert('짝수입니다!')

      } else {

            alert('홀수입니다!')

      }

      count += 1;

}

</script>