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

hanna·2022년 2월 27일

📗 CSS

배경관련
background-color, background-image, background-size
사이즈
width, height
폰트
font-size, font-weight, font-famliy, color
간격
margin, padding ( → 헷갈리지 말기! margin은 바깥 여백을, padding은 내 안쪽 여백을)

단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것(템플릿)

📗 Javascript

<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성

기초문법
변수, 자료형, 함수, 조건문, 반복문

변수(값을 담음)

let a = 2 ;; a에다가 2라는 값을 담음
a+3 = 5
let last_name = 'hanna' ;;문자열을 담는 것은 작은 따옴표
자료형(list형, dictionary형)
a. list형 (순서가 중요)

let a_list = ['봄','여름','가을']
a_list[0] → '봄'
*추가시
a_list.push('겨울')
a_list[3] → '겨울'

b. dictionary형 (key:value)

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

++기본함수
* % : 나눗셈의 나머지를 구하는 함수
```
 let a = 20
  let b = 7
  a % b = 6
```
== 같다, != 같지 않다

.split('') : 특정 문자를 기준으로 나눔

let myemail = 'sparta@gmail.com'
  let result = myemail.split('@') // ['sparta','gmail.com']
  result[0] // sparta
  result[1] // gmail.com
  let result2 = result[1].split('.') // ['gmail','com']
  result2[0] // gmail -> 우리가 알고 싶었던 것!
  result2[1] // com
  myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

함수

기본 생김새

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

예시

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('num1: ', num1, ', num2: ', num2);
	return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
``` `

조건문

20 보다 작으면 작다고, 크면 크다고 알려주는 함수

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
 is_adult(25)

if, else if, else if, else if else

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}
  is_adult(12)

AND 조건과 OR 조건!

  // AND 조건은 이렇게
  function is_adult(age, sex){
  	if(age > 20 && sex == '여'){
  		alert('성인 여성')
  	} else if (age > 20 && sex == '남') {
  		alert('성인 남성')
  	} else {
  		alert('청소년이에요')
  	}
  }
  // 참고: OR 조건은 이렇게
  function is_adult(age, sex){
  	if (age > 65 || age < 10) {
  		alert('탑승하실 수 없습니다')
  	} else if(age > 20 && sex == '여'){
  		alert('성인 여성')
  	} else if (age > 20 && sex == '남') {
  		alert('성인 남성')
  	} else {
  		alert('청소년이에요')
  	}
  } 
  is_adult(25,'남')
  ``` `

반복문

반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

for (let i = 0; i < 100; i++) {
	console.log(i);
}

  for (1. 시작조건; 2. 반복조건; 3. 더하기) {
  	4. 매번실행
  }
  1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
   와 같은 순서로 실행됩니다.
  i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
반복문 예제2

 let scores = [
 	{'name':'철수', 'score':90},
 	{'name':'영희', 'score':85},
 	{'name':'민수', 'score':70},
   {'name':'형준', 'score':50},
   {'name':'기남', 'score':68},
   {'name':'동희', 'score':30},
 ]
 ```

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++) {
	console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

📓 숙제제출

개발일지 작성하면서 숙제를 틀리게 냈다는 것을 알아버렸다.
완전 초보자가 코딩에 익숙해지려면 당연히 1번 수강하는 것으로는 턱없이 부족하고
반복적으로 연습해서 내것으로 만들어야 겠다.
왕초보에게는 벨로그에 글을 쓰는 것도 처음에 쉽지 않았다...ㅜㅜ
어찌어찌 1주차를 마무리 하였으니 스스로를 격려하자:)

hanna

다음 포스트

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

📗 CSS

📗 Javascript

[스파르타코딩클럽] 엑셀보다 쉬운 SQL - 1주차

0개의 댓글