스파르타코딩클럽 비개발자를 위한 웹개발 종합반 1주차 3줄요약
1. 프론트엔드의 기초 학습 및 실스 (HTML, CSS, JS)
2. 특히 자바스크립트의 기초 문법 (변수, 자료, 함수, 조건, 반복)
3. 개발은 외워서 하는 것이 아니라 내가 예전에 했던 것, 남들이 했던것을 상황에 맞게 활용하는 것.
-- 강의노트 --
1주차 오늘 배울 것
1. 서버/클라이언트/웹의 동작 개념
- 이미 받아온 화면은 내꺼 (naver.com 홈) - (네이버의) 서버로부터 받아옴
- 브라우저 역할: 1) 요청하는 것, 2) 가져와서 보여주는 것 - 클라이언트
- HTML: 뼈대 (위치, 내용 등)
- CSS: 꾸미기 (색깔, 사이즈 등)
- JS: 움직이는 것 (링크, 로그인 등)
2. 필수프로그램 설치
- Pycharm
- AWS (Amazon Web services)
- 두가지 프로그램을 설치하였다. Pycharm은 4개월짜리 discount 코드를 스파르타코딩클럽을 통해 받았고, AWS는 기본 서비스의 경우 돈이 들지는 않는 것 같다. 할인코드 받고 하느라 좀 복잡하긴 했는데, 영상을 따라서 하다보니 어느새 회원가입이 되어 있었다.
3. HTML (뼈대), CSS (꾸미기) 기본내용
- 파이참에서 HTML 만들어보기: 항상 먼저 저질러보고, 실습하고, 그다음 왜 (안)되는지 만들어본다.
3.1. HTML
- 열고 - 닫기로 구성: e.g., <head> </head> (-> 요걸 태그라고 부름)
- head: 본문에 안들어가는 애들, 파비콘, 구글검색엔진이 내 웹사이트를 잘 긁어가게 하는 속성들 등
- 태그들에 익숙해지기!: 굳이 암기할 필요는 없지만, 익숙해질 필요는 있겠음.
3.2. CSS 기초: 꾸미기. 뭔가 꾸미려면 가리킬 수 있어야 해.
- class = 'mytitle" : 가리키기
- <style> -> 꾸미기
.mytitle {}
- CSS (cascading style sheet) 개념: 물 흐르듯 따라간다. 더 작은 파트 (자식)의 정의가 더 큰 파트(부모)의 정의에 우선
- 이미지는 이미지 사이즈 포지션이 함께 감
- 위 간격(여백)
- margin vs. padding (헷갈리지 말기)
- margin: 테두리 바깥쪽 (위 오른쪽 아래 왼쪽 - 시계방향)
- padding: 안쪽 여백 (padding-top = 400px
- 전체 내용을 가운데로 정렬: 전체를 하나로 묶기 (div)
- margin: auto -> 상하좌우를 다 미세요
- 폰트 (google fonts 에서 폰트 링크 & font-family 다운로드)
* '*{}' 는 모든 태그에 해당 명령을 내리겠다.
* . {} <> ; 등등- 그냥 받아들여
- 주석: 설명 붙여넣기 (cirl+/)
- 파일정리
3.3. 부트스트랩: 예쁜 CSS 모음집
- 부트스트랩에서 각종 디자인 가져오기
- 이미지 어둡게 만들기
- 마우스 hover 했을 때 버튼 모양 바꾸기
3.4. 부트스트랩 본격
- 부트스트랩 저장소 https://getbootstrap.com/
- 페이스북이모티콘 저장소: https://kr.piliapp.com/facebook-symbols/
3.5. Quiz_포스팅 박스를 완성하기
- 사이즈 조정: max-width 와 width: 00% 활용
- 왠만한 태그는 부트스트랩 저장소를 통해서 받아오기
4. Javascript (기초문법)
- 자바스크립트란? 프로그래밍 언어 중 하나. 브라우저가 알아들을 수 있는 언어
4.1. 프로그램 언어를 배울때 알아야 할 5가지
4.1.1. 변수: 값을 담는 것
4.1.2. 자료형: 숫자냐 문자냐
4.1.2.1. 리스트 (숫자가 중요.. 순서?)
let a = 2; let first_name = 'gusu'
let a_list = ['수박', '참외', '배']
a_list.push('감')
let b_list = ['철수', '영희'
a_list.push(b_list)
a_list[4]
a_list[4][0]
4.1.2.2. 딕셔너리 (key:value)
let a_dict = {'name':'bob','age':27}
a_dict['name']
a_dict['height']=180
4.1.3. 함수: a 하면 b 한다
4.1.3.0. 자체함수들
let myemail = 'gusu5772@gmail.com'
myemail.split('@') #@를 기준으로 나눠라
myemail.split('@')[1] # gmail.com 이 나옴 (0부터 시작하니까 1은 두번째를 의미
myemail.split('@)[1].split('.')
myemail.split('@)[1].split('.')[0]
4.1.3.1. 함수는 정해진 동작을 하는 것. 정해진 값을 주는 것
<script>
function sum(a,b) {
let('계산을 하자')
return a + b
}
let result = sum(2,3)
let(result)
</script><script>
function sum(a,b) {
console.log('계산을 하자')
return a + b
}
let result = sum(2,3)
console.log(result)
</script>console.log -> 콘솔창에 띄워줘라.
4.1.4. 조건문: if, else
<script>
function is_adult(age) {
if (age > 20) {
alert('성인입니다')
}else{
alert('청소년입니다')
}
}
</script>
4.1.5. 반복문: 반복하기
4.1.5.1. 기본
<script>
let a_list = ['사과', '배', '감', '딸기']
for (let i =0; i<a_list.length;i++) {
console.log(a_list[i])
}
// 1. a_list는 다음과 같이 정한다
// 2. 반복문을 한다.
// 3. 0부터 시작; a_list length까지; i 에 1씩 더함
// 4. console에 이 반복을 출력시켜줘
// 자주 틀리는 것 let i =o, 세미콜론으로 구분, 중괄호 명령 console.log 안에 i는 대괄호
</script>
4.1.5.2. if절과 함께 쓰일 때 (반복문의 90%)
<script>
let scores = [
{'name':'철수', 'score':90},
{'name': '영희', 'score': 85},
// score에 0번째의 이름은 철수
{'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) {
// i번째 스코어가 70인 이상인 조건의
console.log(scores[i]['name'])
// 이름을 console에 찍어주세요
}
// console.log(scores[i]['score'])
// 리스트에서 스코어만 뽑아주세요.
}
</script>- 실제 데이터로 연습해보기
* Chrome의 Console: 개발자도구 (script와 똑같은 역할을 함)
*코딩은 외워서 하는 것이 아니라, 예전에 썼었던 것을 살짝 바꿔서 고쳐쓰기
'프로그래밍 > 개발일지' 카테고리의 다른 글
| [스코클] 비개발자를 위한 웹개발 종합반-2주차 (0) | 2022.10.13 |
|---|---|
| [스코클] 엑셀보다 쉬운 SQL - 3주차 (0) | 2022.10.12 |
| [스코클] 엑셀보다 쉬운 SQL - 2주차 (0) | 2022.10.11 |
| [스코클] 엑셀보다 쉬운 SQL - 1주차 (0) | 2022.10.10 |
| [스코클] 비개발자를 위한 웹개발 종합반 0주차 (0) | 2022.10.10 |