1.0
-내가 보는 웹페이지를 마음대로 바꿀 수 있었다.
-내가 보고 있는 페이지는 인터넷 연결과 관련이 없다(연결이 끊겨도 페이지는 살아있음)
-새로고침을 하면 원상복귀된다=>서버로부터 새로 받아오기 때문
=>웹서비스의 동작원리
브라우저의 역할: 서버에게 요청, 결과물(데이터)을 받아서 그려준다
HTML:뼈대(위치)
CSS:꾸미기(색깔,폰트..)
JAVASCRIPT:동작(클릭->움직임)
데이터만 받아오고 싶을때 (json형식)
1.1
파이참-파이썬을쓰기에 가장편함
HTML-문서형태
head and body 있음
1.2
~>background-image: url("");
background-size: cover;
background-position: center;
3개가 같이 다님
~>여백
-margin: 내 바깥으로의 여백
-padding: 내 안쪽으로의 여백
~>HTML에는 글 속성과 박스 속성이 있다
박스는 가로 세로가 존재,
글은 존재 안함->강제로 박스처리 해줘야함
=>display: block;
ex>버튼 옮길때 사용할 수 있음
~>class의 중첩
class에 명찰 두개도 가능
~>주석처리
주석처리하고 싶은 부분 드래그후 ctrl+/
1.3
부트스트랩-예쁜 CSS를 미리 모아둔 것
시작템플릿을 가지고 시작해야함
1.4
/ 너비 | 스타일 | 색 /
border: medium solid black;
1.5
javascript-브라우저가 유일하게 알아들을 수 있는 언어
style밑에
alert-경고창
개발자도구에서 바로 수정가능
1.6 자바스크립트 문법(1)
//변수, 자료형, 함수, 조건문, 반복문
1)변수는 값을 담는 박스(let으로 표시)
문자열을 담을 때 작은따옴표로(큰 따옴표도 상관 없음)
(+개발자도구에서 키보드 윗쪽 키 누르면 전에 쓴 statement들이 나옴)
(1) list-순서가 중요한 담기
ex> a_list = ['a','b']
불러올땐 a_list[index](0부터 시작)
ex> a_list[0]="a"
추가하고 싶으면 a_list.push('')
ex> a_list.push('g')
(2) dictionary-key에 대응하는 value
순서 중요하지 않음
ex>a_dict ={'name': 'hey', 'age':23}
불러올땐 a_dict['name']
추가하고 싶으면 a_dict['height'] = 162
+dict와 list 서로서로 사용 가능
++split도 가능
syntax) var.split('')
한번쪼갠 부분에서 더 쪼개기도 가능
ex>
let myEmail = 'hey@gmail.com'
myEmail.split("@")
(2) ["hey", "gmail.com"]
myEmail.split("@")[1]
"gmail.com"
myEmail.split("@")[1].split('.')
(2) ["gmail", "com"]
myEmail.split("@")[1].split('.')[0]
"gmail"
1.7 자바스크립트 문법(2)
//변수, 자료형, 함수, 조건문, 반복문
2)함수-부르면 정해진 동작을 하는 것
(자바에서 method와 비슷-)
function sum(num1, num2){
return num1+num2
}
let result = sum(2,5)
result=7
3)조건문,반복문
자바와 비슷- data type만 let으로 바뀐 조건문 반복문느낌
- println->console.log('')로 바뀐 느낌
ex>
let age = 23
if(age>20){
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
성인입니다
let sex = 'woman'
undefined
if(age>20 && sex== 'woman'){
console.log('adult woman')
} else {
console.log('not adult')}
adult woman
4)반복문
자바랑 거의 비슷
let people = ['철수','영희','민수','형준','기남','동희']
people.length
6
for(let i = 0; i<people.length ; i++) {
console.log(people[i])
}
VM3252:2 철수
VM3252:2 영희
VM3252:2 민수
VM3252:2 형준
VM3252:2 기남
VM3252:2 동희
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
undefined
scores[0]
{name: "철수", score: 90}
scores[1]
{name: "영희", score: 85}
scores[1]['score']
85
웹개발반 1주차 앞부분은 거의 무료특강과 비슷해서 처음 보는 자바스크립트빼고는 그냥저냥 이해하며 넘어갈 수 있었다.
자바스크립트와 자바는 아예 다른 언어지만 문법에서 꽤 많은 부분이 비슷해서 그나마 다행이었다.(역시 뭐라도 배워놓으면 어떻게든 도움이 된다는 말이 괜히 있는게 아니었어...)
자바스크립트 내용을 하나하나알려주기보단 계속 반복하면서 익힐 수 있게 하는 방식이라 어렵게 느껴졌다.(내가 대충 내용을 따로 정리하고 들으면 더 이해가 잘 갈거같음)
숙제가 훅 어려워진느낌이었지만 한줄한줄 내 코드로 인해 내용이 생기고 지워지는게 신기하고 부트스트랩을 이용해서 만들긴 했지만 내맘대로 나만의 웹페이지를 만들 수 있다는 게 너무 재밌었다.
1주차 완료!
