0주차에는 개발환경 구축이었다. 간단히 슬랙 설치 및 스파르타코딩클럽방 들어가고, 크롬을 설치하는 것이서 금방 끝났다. 1주차에는 웹의 기초인 html, css, javascript에 대해서 간단한 문법을 배웠고, 웹 페이지 구현을 해보았다. 예전에도 웹 개발공부를 한 적이 있어서 1주차는 간단히 끝낼 수 있었다. 20개의 강의를 반나절만에 클리어했고, 예전에 이해되지 않았던 부분도 완벽히 이해되고 정리되는 시간이었다.
1주차 강의목록
1-1 1주차 오늘 배울 것
1-2 필수 프로그램 설치
1-3 HTML CSS 기본 내용
1-4 Quiz_간단한 로그인 페이지 만들어보기
1-5 CSS 기초
1-6 자주 쓰이는 CSS 연습하기(1)
1-7 자주 쓰이는 CSS 연습하기(2)
1-8 폰트, 주석, 파일분리
1-9 부트스트랩, 예쁜 CSS 모음집
1-10 CSS 꿀팁 한번 더 배우기
1-11 CSS 꿀팁-폰트넣기
1-12 본격 부트스트랩 써보기
1-13 Quiz_포스팅박스를 완성하기!
1-14 JavaScript 맛보기
1-15 JavaScript 기초 문법 배우기(1)
1-16 JavaScript 기초 문법 배우기(2)
1-17 JavaScript 기초 문법 배우기(3)
1-18 JavaScript 기초 문법 배우기(4)
1-19 JavaScript 연습하기
1-20 1주차 끝 & 숙제 설명
배운 것 요약 정리
- 웹(Web) = HTML + CSS + JavaScript
HTML : 뼈대
CSS : 꾸미기
JavaScript : 동작
- HTML
.html 파일을 만들어서 하나의 웹 페이지를 생성한다. html은 크게 head와 body로 구성되어 있다. head에는 웹 페에지 이름, 아이콘 등을 설정한다. 이 부분에서 페이지 구성에 필요한 링크들, style(CSS)와 script(JavaScript)를 넣어서 구성한다. body에는 페이지의 내용을 구성한다. div 태그를 이용해서 구성요소를 하나로 묶어서 관리하면 웹 페이지의 유지보수가 쉬워질 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- CSS
웹 페에지를 이쁘게 하기 위해서 사용한다. head에 style 속성을 이용해서 페이지를 편집한다. 부트스트랩을 이용해서 이미 구현된 코드를 가져다가 사용할 수 있다.
.mybtn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
- JavaScript
웹 페이지의 동작을 구현할 때 사용한다. alert를 이용해서 알람을 설정하거나, alert 말고 console.log를 이용해서 필요한 정보를 개발자 도구의 console 창에 띄울 수 있다. 간단한 문법에 대해서 배웠다.
function hey() {
alert('안녕!');
}
let a_list = ['사과', '배', '감', '딸기']
for (let i = 0; i < a_list.length; i++) {
console.log(a_list[i])
}
느낌점
이때까지 웹개발 프로그램으로 web용 eclipse, atom 등을 사용했는데, 이번에는 처음 들어보는 프로그램인 "PyCharm"을 이용해서 웹 개발을 진행하였다. 유료 쿠폰 4개월치를 받아서 유상 프로그램을 사용하였다. PyCharm은 자동완성기능이 잘되어있어서 나랑 잘 맞는 것 같았다.
처음에는 간단한 웹 페이지를 뼈대인 html을 이용해서 구현하였다. 그 후 CSS와 관련된 폰트 사이트, 부트스트랩 사이트에서 이쁜 소스코드를 가져와서 구현할 수 있었다. 코드를 잘 작성하는 것도 중요하지만 요즘은 외부 코드를 적재적소로 이용하는 것도 중요한 것 같다. 배운 것들을 이용해서 웹 페이지 클론코딩을 간단히 해보았는데, 아직 1주차여서 그런지 큰 어려움없이 진행할 수 있었다. 선생님도 설명이 친절해서 이해하는데 어려움이 없었다. 강의를 보고 있으면 생각나는 교수님이 계시긴하는데...
1주차 과제는 좋아하는 가수 팬명록 사이트 만드는 것이었다. 아직 자바스크립트 문법만 배우고, 자세한 기능은 배우지 않아서 사이트에 기능을 넣지 못해서 아쉬웠다. 그래서 웹페이지만 구현하는 것만 과제였고, 배운 것들을 이용해서 쉽게 구현할 수 있었다. 난이도는 전공과목의 주차별로 있는 간단한 과제인 수준이었다. 아래는 내가 만든 웹사이트이다. 허접하긴 하다... 더 배우면 기능을 넣어서 지금보다는 실용적일 것 같다.
'스파르타 코딩 > [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' 카테고리의 다른 글
| [3주차] 개발일지 (0) | 2022.07.08 |
|---|---|
| [3주차] 관련 자료들 (0) | 2022.07.08 |
| [2주차] 개발일지 (0) | 2022.07.08 |
| [2주차] 관련 자료들 (0) | 2022.07.03 |
| [1주차] 관련 자료들 (0) | 2022.06.30 |