[수업 목표]
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
느낀점
여러가지로 거의 다 아는 내용이었지만 그럼에도 배울점은 있었다.
우선 기초가 중요하다는 점
그리고 키-밸류의 딕셔너리를 api를 통한 서비스에서 잘 사용해야 한다는 점이다.
막연하게 당연하다 생각드는거지만 새삼 이렇게 배우니 다시금 중요하다는 생각이 든다.
스파르타코딩캠프는 확실히 실용성면을 매우 중요시 여기는 것 같다.
배우면서 느끼는것은 정말 서비스를 만드는데 있어 필요한것만 쏙쏙 빼와 강의를 구성한 느낌이다.
또한 부트스트랩도 알고는 있었지만 이렇게 사용하니 정말 활용력이 장난 아니었다.
물론 정석대로 우직하게 하나하나도 좋은점이 있지만 이제는 멀지만 프로에 다가갈 수 있게끔 다양한 기능들을 두루 섭렵하고 응용해야 하지 않나 생각이 들었다.
01. 1주차 오늘 배울 것
네이버를 해킹하며 웹의 동작 원리를 배워보자.
크롬브라우저의 검사를 통해 element의 텍스트를 바꿔주면 그대로 텍스트가 변경된채로 웹이 보이게 된다.
이것은 우리가 서버로 부터 받은 데이터를 수정했기 때문에 가능한 일인데 물론 우리가 수정했다고 해서 전세계 다른 사람들도 그 수정 내용으로 보이지는 않는다.
여기에 웹의 구동과정이 들어있다.
우리는 naver.com이라는 서버가 만들어놓은 API라는 창구 즉, “/”창구에 요청하게되어 html,css,js를 받게되고 웹은 그것을 우리에게 그려주는 것이다.
이렇게 하나의 페이지를 받게되면 그 다음에는 계속 html,css,js를 받는게 아닌 데이터를 받아 끼우게 된다. 이 데이터는 json이라는 형식으로 받게된다.
02. 필수 프로그램 설치
- 파이참 프로페셔널
- jetBrains 회원가입
- PyCharm Professional 등록
- AWS 가입
03. HTML, CSS 기본 내용
HTML은 뼈대, CSS는 꾸미기
서버는 프론트엔드를 준다.
코딩을 배울때는 한번 저질러 보고 왜 되는지 보는 것도 괜찮다.
head 안에는 meta, script, link, title 같이 당장 눈에는 안보이지만 중요한
속성등을 정의해줄 수 있습니다.
body태그 안에는
div ⇒ 구역을 나눠준다.
p ⇒ paragraph 문장을 뜻한다.
ul, li ⇒ 불렛포인트를 나타낸다.
h1 ⇒ 글자가 제일 크고 구글에서 잘 검색된다.
h2~h6 ⇒ 글자크기 조절
span ⇒ 특정글자 꾸밀때 사용
a ⇒ 하이퍼링크
img ⇒ 이미지를 삽입
input ⇒ 글자상자
button ⇒ 버튼상자
textarea ⇒ 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용.
04. Quiz_간단한 로그인 페이지 만들어보기
이런 페이지를 만들어본다.
나는 로그인페이지 문구는 h1태그로
id와 pw는 input으로
로그인하기는 button으로 그리고 사이사이 br태그를 두개씩 넣어줬다.
그리고 완성본을 보니 물론 결과는 같아보일지 모르지만 태그를 통해 다른 개발자가 나의 코드들 보면 분명 답에 있는 것과는 다를 것이다.
왜냐하면 나는 그저 br태그로 줄바꿈을 했을뿐이고 정답코드에는 p태그로 ID와 PW를 묶었기 때문이다.
이런 세세한 부분에서 아직도 부족함이 나오는 것 같다… 좀더 세밀하고 꼼꼼할 필요가 있다.
05. CSS 기초
꾸밀때는 항상 무언가 대상을 가리켜야 한다는 것을 명심해야한다.
만약 짱구의 바지를 바꾸고 싶을때는 짱구의 바지라고 지시하는 것처럼
웹에서 이런 기능을 하는 것이 class이다.
<h1 class=”myStyle”>hello</h1> 을 하면 이름표를 붙여준 것이다.
이제 html의 head태그내에서 style태그를 넣어 그 안에 .myStyle 에 여러가지 css속성들의 값을 넣어주면 html의 요소들이 꾸며지게 된다.
이때 html태그들이 누가 누구 안에 있느냐를 이해하는 것이 가장 중요하다.
왜냐면 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받기 때문이다.
그리고 자주쓰는 css속성들에는 아래왜 같은것들이 있다.
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-family
color
간격
margin
padding06. 자주 쓰이는 CSS 연습하기
margin과 padding
- margin은 바깥 여백
- padding은 안쪽 여백을 채운다.
background-image , background-position , background-size 이 3가지는
배경에 이미지를 넣을때 거의 항상 같이 다닌다.
07. 폰트, 주석, 파일분리
폰트
구글 폰트를 사용하자.
jua체를 쓸것이다.
select this style을 쓰자
link태그를 이용해 구글폰트를 가져오고
style 태그에서 font-family를 사용해 모든 폰트를 바꿔보자.
주석
필요없어진 코드를 임시로 작동하지 못하게 하거나
코드에 대한 설명을 넣을 때 쓴다.
단축키는 ctrl + / 를 해주면 된다.
08. 부트스트랩, 예쁜 CSS 모음집
현업에서도 많이 쓰이는 css모음집이라 생각하면 좋다.
우선 지금은 강의에 나와있는 시작 템플릿을 이용하여 사용해보도록 한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>이걸로 시작해보죠!
09. CSS 꿀팁 한번 더 배우기
배경, 이미지 어둡게 하기, 폰트넣기,
그리고 다양한 css 기술들을 썼다.
background 3개와
display: flex; flex-direction: column; align-items: center; justify-content: center;
를 사용했는데 저 display속성은 정말 많이 쓰는거라 익숙해서 좋다.
그 외 투명하게 해주는 속성 background-color: transparent;
이미지 어둡게 하기 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
는 앞으로도 유용하게 잘 쓰일 것 같다.
10**. 본격 부트스트랩 써보기**
부트스트랩 사이트의 card카테고리에서 내가 원하는 디자인의 card를 클릭하고
복사하여 그대로 쓰면 된다.
개수 조절하는 것도 직관적으로 알 수 있어 사용하기 매우편했다.
도대체 왜 지금까지 이렇게 안했는지…
이모티콘 또한 모음 사이트가 있어서 다음에도 활용하면 좋을 것 같다.
<https://kr.piliapp.com/facebook-symbols/>
11. Quiz_포스팅박스를 완성하기!
퀴즈를 풀며 실습을 진행했다.
bootstrap이 정말 유용했는데 간단히 큰 박스만 만들어두면
그 다음 안에다 bootstrap코드를 그대로 사용하는것으로 페이지를 만들 수 있었다.
심지어는 이 부트스트랩에서 모바일 전환을 미리 설정해놓았기에
max-width와 width 95%만 해주면 모바일 전환을 쉽게 할 수 있었다.
정말 자주 사용해야겠다.
12. Javascript 맛보기
간단히 따라하며 맛만 본다.
function hey(){
alert('안녕!');
}
를 <script>로 헤드 태그 안에 넣어주면 동작을 나타내는 함수를 만든것이다.
이제 이 함수를
<button onclick="hey()">영화 기록하기</button>
이렇게 사용해주면 html내에서 동작으로써 활용할 수 있다.
13. Javascript 기초 문법 배우기(1)
구글 크롬의 개발자도구는 구글에서 개발자들을 위해 만들어둔 도구로서
띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있는 도구다.
변수, 자료형, 함수, 조건문, 반복문 이렇게 5가지를 알아야한다.
나는 그동안 개발자 도구를 잘 사용하지 않았었는데 이제는 잘 써봐야겠다.
개발자도구는 새로고침하지않으면 변수들이 계속 유지된다.
변수는 값을 저장하는 박스이다.
리스트는 순서를 지켜서 가지고 있는 형태이다. 순서중요
딕셔너리는 키(key)-밸류(value) 값의 묶음이다. 키-밸류 중요
딕셔너리의 키는 우리가 실생활에서 키는 173이다. 몸무게는 60이다.
이런식으로 말할때 키와 몸무게이다.
특정 문자로 문자열을 나누고 싶은 경우는 split메서드를 사용하면된다.
예를 들어 'sparta@gmail.com' 라는 문자열이 있을경우
let result = myemail.split('@') // ['sparta','gmail.com']
let result2 = result[1].split('.') // ['gmail','com']
myemail.split('@')[1].split('.')[0] // gmail
처럼 중복해서 사용해 더 구체적으로 사용할 수 있다.
나는 평소에 키-밸류의 딕셔너리는 잘 사용하지 않았었는데 사용하면 편할때는 사용할 수 있도록 이번에 익숙해지면 좋을 것 같다.
14. Javascript 기초 문법 배우기(2)
함수는 정해진 동작을 수행한다.
여기서 한가지 유효한 점은 script태그를 이용해서 함수를 정의하면
웹페이지가 다 로딩되기 전 흰화면에서 alert창이 뜬다.
그 이유는 script가 body보다 코드 위치상 위에 있기 때문이다.
조건문은 특정 조건을 정의하고 그 조건에 맞추어 값을 반환하는 문법이다.
직관적이고 사용하기 좋다.
반복문은 for문 while문 등이 있는데 말 그대로 조건을 정해준 횟수만큼 반복하는 것이다.
여기서 리스트나 딕셔너리와 같이 사용하면 반복문을 아주 잘 사용할 수 있다.
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]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
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++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수 있다.
15. Javascript 연습하기
실전처럼 서울의 미세먼지 데이터를 json형식으로 받는다 가정하자.
그렇다면 반복문을 통해 미세먼지 데이터 전부를 출력할 수 있고
그 반복문 내에서 조건문을 설정하면 (ex 미세먼지 값이 40 미만이면)
그 조건에 만족하는 값들만 출력할 수도 있으며
이 반복문을 함수로 만들어주면 함수에 넣어주는 값만 조절해서 편하게 이 특정미세먼지 미만의 값들만 출력하는 기능을 사용할 수 있다.
function show_gus(index) {
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
if (mise["IDEX_MVL"] < index) {
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
}
// 이러면 아래와 같은 것이 가능!
show_gus(40) // 40보다 작은 구만 출력!
show_gus(35) // 35보다 작은 구만 출력!
이때 주요한 점은 리스트를 순회하며 2차원 리스트를 사용하는 것처럼 딕셔너리의 키값을 이용한다는 점이다.
나는 아직도 이 점이 익숙하지 않았다는게 정말 어이가 없었다…
16. 1주차 끝 & 숙제 설명
부트스트랩 시작 템플릿과 구글 폰트를 이용하여 팬명록을 만든다.
내가 완성한 팬명록은 다음과 같다.
'항해99' 카테고리의 다른 글
| [항해99] TIL 사전과제 스터디 D-37 (0) | 2022.06.04 |
|---|---|
| [항해99] TIL 웹개발 종합반 5주차 D-38 (0) | 2022.06.03 |
| [항해99] TIL 웹개발 종합반 4주차 D-39 (0) | 2022.06.02 |
| [항해99] TIL 웹개발 종합반 3주차 D-40 (0) | 2022.06.02 |
| [항해99] TIL 웹개발 종합반 2주차 D-41 (0) | 2022.05.31 |