[수업 목표]
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
1) 서버/클라이언트/웹의 동작 개념
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것이다.
즉, 브라우저가 하는 일은 1)요청을 보내고, 2)받은 HTML 파일을 그려주는 일!
여기서 요청은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것!
예) https://naver.com/
→ 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!
이런 생김새를 JSON형식이라고 함! (데이터만 내려올 경우)
2)CSS
margin과 padding ( → 헷갈리지 말기!)
- margin은 바깥 여백을, padding은 내 안쪽 여백을
이 세가지 명령어는 같이 다님!
(백그라운드이미지 잘 보이게 하기 위함!)
background-image: url('');
background-position: center;
background-size: cover;
이것또한 가운데로 가져오기 위한 명령
여기서 flex-direction: column; 으로 바꾸면 세로로 변경됨
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
만들어둔 화면을 가운데로 가져오기위한 명령어
width를 주고, margin: auto를 사용하자!
그래도 안되면? display:block을 추가!
3)폰트, 주석, 파일분리
- 구글 폰트 사용하기
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">이것을 <head> ~ </head>사이에 넣는다
그리고
*{
font-family: 'Jua', sans-serif;
}
이걸 <style> ~ </style> 에 넣으면 된다
-
여기서 *{ } 은 HTML 전체에 CSS를 적용한다는 뜻!!
-
주석은 주석하고 싶은 곳을 지정해서 컨트롤+/ 하면 그곳이 전체 주석이 됨!
-
파일 분리
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
이것을 head태크에 넣으면 된다!
4) 부트스트랩
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)
5) JAVASCRIPT
우선 변수를 선언할 때에는 let 변수명 으로 선언을 한다
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.
-
리스트와 딕셔너리 (중요!!!)
-
리스트: 순서를 지켜서 가지고 있는 형태입니다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let b_list = [1,2,'hey',3] // 로 선언 가능 b_list[1] // 2 를 출력 b_list[2] // 'hey'를 출력 // 리스트에 요소 넣기 b_list.push('헤이') b_list // [1, 2, "hey", 3, "헤이"] 를 출력 // 리스트의 길이 구하기 b_list.length // 5를 출력 -
딕셔너리: 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let b_dict = {'name':'Bob','age':21} // 로 선언 가능 b_dict['name'] // 'Bob'을 출력 b_dict['age'] // 21을 출력 b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기 b_dict // {name: "Bob", age: 21, height: 180}을 출력 -
리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}] // names[0]['name']의 값은? 'bob' // names[1]['name']의 값은? 'carry' new_name = {'name':'john','age':7} names.push(new_name) // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] // names[2]['name']의 값은? 'john' -
특정 문자로 문자열을 나누고 싶은 경우
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, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3- 조건문
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)- 반복문
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가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.- 반복문 예제 (중요! 주로쓰임)
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점 미만인 사람들의 이름만 출력할 수도 있습니다.