1-1. 1주차에 배울 것들
크롬 웹브라우저를 열어서 네이버 메인 화면으로 가보자.
중간쯤에 보이는 "네이버뉴스" 텍스트 위에 마우스 커서를 놓고 오른쪽 클릭 후 "검사"를 누르면 온갖 코드로 범벅인 창이 하나 뜬다. 네이버 뉴스 링크를 검사했으니 창은 네이버 뉴스 <a> 태그에 하이라이트 되어 있다.
토글 키를 누르면 "네이버뉴스"라고 적혀있는 걸 볼 수 있다. 이걸 수정할 수 있을까? 답은 "그렇다"이다. 전세계 모두가 보는 웹페이지를 나 혼자 싹다 고칠 수는 없지만 적어도 지금 내가 보고 있는 페이지는 가능하다. 어떻게? "네이버뉴스"를 더블 클릭하고 내가 바꾸고 싶은 글자로 바꿔보자. 나는 "WOONY뉴스"로 하겠다.
이 행위를 통해 웹페이지의 역할 세 가지를 유추할 수 있다.
- 내가 보는 웹페이지에 한해서 마음대로 고치기가 가능함
- 내가 보는 웹페이지는 사실 인터넷이랑 관련 X
- 새로고침하면 다시 원상복귀
- 뭔가를 새로 받아서 (서버로부터) 다시 그려줘.
브라우저의 역할?
1) 서버에게 요청 (URL 엔터 => 요청)
2) 서버로부터 결과물 받아서 그려준다!
- 뭘 그려줘? HTML/CSS/JS!
- html: 뼈대
- CSS: 꾸며주는 역할 - 폰트 사이즈는 얼마, 글씨 두꼐는 얼마, ...
- JavaScript: 웹페이지에서 움직이는(동적 구현) 걸 만드는 역할
- 서버: 클라이언트에게 그릴 것을 주는 역할
뭘 그리나? => 데이터!
- 데이터만 받는 경우도 있음 => 웹페이지 전체를 새로 고치지 않고서도 (예쁜 걸 뺴고 데이터만 갈아끼워) => JSON 형식
1-5 CSS 기초
1-6 자주 쓰이는 CSS 연습하기
- padding: 안쪽에 패딩 넣기 (여백 넣는다고 생각하면 됨)
- 한 번에 여러 태그 움직이려면 어떻게 할까?
=> div 태그 하나 만든 다음 여러 태그를 다 div 안에 넣은 뒤, div 태그를 움직인다!
* div 태그는 눈에 보이지 않으니 background-color 넣어서 눈에 보이게끔! 이 태그가 어디까지 커버하고 있는지 체크하기 위해
button 태그: margin을 조절하려고 보면 안된다? => 글 속성은 가로세로 개념이 없다!
=> box와 유사하게 만들어야!
display: block 속성을 추가해라!
.mybtn {
width: 100px;
margin: auto; /* 이 코드는 먹히지 않음 */
display: block;
}* 클래스 중첩: 하나의 태그에 둘 이상의 클래스를 적용할 수 있음! => class = "class_A class_B" (공백 하나 끼워서 적용하고 싶은 여러 클래스 갖다 넣기)
1-7 폰트, 주석, 파일분리
* 주석 처리: Command + / (슬래쉬) => 거의 웬만한 언어는 다 주석 처리 된다! (IDE에서 작업할 때 단축키)
1-8 부트스트랩, 예쁜 CSS 모음집
부트스트랩(https://getbootstrap.com/): 예쁜 css를 모아둔 사이트. Docs 페이지로 들어가면 Introduction에 어떻게 start하면 되는지를 써뒀다. 개념만 간단히 설명하면, 이 사이트에서 자기네들이 레이아웃, 버튼 디자인 등 갖다쓰기 좋은 애들을 전부 만들어 둔 저장소를 갖고 있다. 우리는 그저 저장소 링크만 가져온 다음, 홈페이지를 둘러보며 쓰고 싶은 디자인의 요소를 갖다 쓰기만 하면 된다.
아래는 홈페이지를 캡쳐한 이미지다. 우리가 CSS 요소를 가져다 쓰고싶다? 그럼 아래 주소 링크를 복사한 다음 짜고 있는 코드에 붙여넣는다.
<head>
(...생략...)
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
(...생략...)
</head>만약 부트스트랩 CSS를 수정하고 싶다? 부트스트랩 css를 커스터마이징하거나 혹은 <div> 태그로 묶어서 수정!
1-12 Javascript 맛보기
Javascript: 프로그래밍 언어! 유일하게 브라우저가 알아들을 수 있는 언어!
*왜 JS만? 처음에 JS가 사용되다가 표준이 되어서!
Javascript 기초
특정 페이지에서 작성된 함수에 한해 개발자 도구 콘솔 창에서도 작동 가능!
리스트
리스트는 자료를 담는 자료형을 말함.
a_list = ['수박', '참외', '메론']
딕셔너리
리스트는 key와 value가 대응되어 저장된 자료형을 말함.
>> a_dict = {'name': 'bob', 'age': 27}
값을 추가하고 싶다면? 새로운 key와 value를 대입한다.
>> a_dict['height'] = 180
>> a_dict
a_dict = {'name': 'bob', 'age': 27, 'height':180}
* 딕셔너리 안에 value로 리스트를 넣을 수도 있다! 반대도 마찬가지!
나눗셈 - 몫과 나머지
>> let a = 100
>> a % 3
1
=> 이런 건 어디에다 쓸까? 트래픽을 균등하게 배분할 때라던지!
1-14 JS 기초 문법 배우기
함수
JS에서 함수 => return 안 받아도 작동함
조건문
- &&: and 를 의미
- ||: or를 의미 (|: shift + 백스페이스)
반복문
- let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
=> 반복문과 if 문을 동시에 쓴다?
for (let i=0; i < scores.length, i++) {
let name = scores[i]['name']
let score = scores[i]['score']
if (score < 70) {
console.log(scores)
}
}
=> for 문들 돌면서 name, score를 뽑아 하나하나씩 조건문에 대입하고 if 문에서 score < 70인 애들의 name, score를 출력.
'개발 강의 > 스파르타코딩클럽 웹개발 종합반' 카테고리의 다른 글
| 스파르타코딩클럽 웹개발 종합반 - 4주차 (0) | 2021.09.19 |
|---|---|
| 스파르타코딩클럽 웹개발 종합반 - 3주차 (0) | 2021.09.18 |
| 스파르타코딩클럽 웹개발 종합반 - 2주차 (0) | 2021.09.18 |