나는 미국 유학생이다. 전공은 컴퓨터 공학, 부전공은 수학이다. 미국에서는 인트로 클래스부터 이클립스를 컴퓨터에 설치하고 바로 자바부터 배운다. 학교를 다니다 보니 코딩에 대한 배경지식이 아예 없는 상태에서 대학 전공 공부를 하기엔 좀 벅차다는 걸 알게 되었다. 그래서 찾아보던 중 스파르타코딩클럽을 알게 되었다. 파이썬은 배운 적이 없기에 이참에 그냥 처음부터 찬찬히 공부해 보자는 마음으로 결제했다.
스파르타코딩클럽에서 나는 웹개발 종합반을 결제했다. 1주차 강의를 수강해 본 결과 한 강의 당 최대 약 2-30분 정도로, 개인적으로 짧은 편이라는 생각이 들었다.
HTML과 CSS
처음 파이썬을 설치하고 라이센스까지 등록하고 나면 본격적으로 키보드를 타닥타닥 두드리기 시작한다. HTML 파일을 생성하면 자동으로 가장 기본이 되는 코드가 같이 생성된다. CSS 를 다룰 때는 코드스니펫을 복사해서 하나하나 배워간다고 생각하면 된다.
HTML 은 뼈대, CSS 는 꾸미기.
이걸 기억하면 전체적인 이미지를 이해하고 받아들이는데 도움이 된다. HTML 은 크게 head 와 body 로 구성되며, head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담는다.
CSS 기초
HTML 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 만약 A 를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받기 때문이다.
head 와 body
먼저 head 안에 들어가는 대표적인 요소들로는 meta, script, link, title 등이 있는데, 이 친구들은 페이지의 속성을 정의하거나 필요한 스크립트들을 부르는 역할을 한다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. head 와 다르게 body 안에 들어가는 친구들은 아주 많으니 외울 생각은 버리자. 우리에겐 "Command+C 와 Command+V" (복사/붙여넣기) 기능이 있다. 각박한 세상, 이왕 쉽게 쉽게 살기로 하자.
"div" 태그는 grouping 이다.
"div" 으로 시작해 "/div"으로 끝나기까지, 전부 하나의 그룹으로 묶였다고 생각하자.
"div" 태그 이외에도 head 와 style 이 있다.
body 안에 div 태그를 넣어 문단을 묶어주고, 그 문단에 myClass 라는 클래스를 설정했다고 하자. 다시 한 번, CSS 는 데코레이션이라고 했다. myClass 라는 클래스를 CSS 처리하려면, style 태그 안에 ".myClass { ... }" 라고 써 줘야 한다.
여기까지 학습하면 구글에서 폰트를 가져와 입히는 것까지 곁들여, 간단한 로그인 페이지를 만들어볼 수 있게 된다.
주석 달기
주석을 다는 법도 배우는데, 주석은
1) 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용한다.
주석을 붙여놓으면, 브라우저나 컴퓨터가 읽지 못한다.
주석 다는 법
: 원하는 부분을 드래그하고 Command + / 먹여주기
특정한 줄에서 특정한 부분을 주석 처리하고 싶다면, " /* (내용) */ " 처리를 하면 된다.
Bootstrap 사용하기
부트스트랩이란? 예쁜 CSS 를 미리 모아둔 것이다.
CSS 를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다. 남이 미리 작성한 CSS 를 나의 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일하다.
다만, CSS 의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐. 즉, btn 과, btn-primary 라는 클래스를 미리 정의해둔 것이다. 물론 정의해 둔 클래스가 빛을 보기 위해서는 부트스트랩 시작 템플릿에 작업하는 게 좋다. 부트스트랩 시작 템플릿은 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title> Bootstrap 시작 템플릿 </title>
</head>
<body>
<h1> 부트스트랩 시작 템플릿 </h1>
</body>
</html>Javascript
자바스크립트는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어다. 클라이언트가 서버에 요청하면, 서버는 클라이언트에게 HTML + CSS + Javascript 를 제공한다.
Javascript 와 HTML 연결하기
HTML 에서 만들어 놓은 버튼을 누르면 경고창이 뜨도록 하는 코드이다.
<script>
function alert() {
alert('경고! 누르지 말랬지.');
}
</script>
<body>
<button onclick="alert()" type="button" class="btn btn-primary">
누르지 마세요
</button>
</body>
body 부분을 보면, "누르지 마세요" 라는 버튼이 있다. 누르지 말라는데도 굳이 버튼을 누르면 페이지에서 경고창을 출력할 것이다. 경고창에는 "경고! 누르지 말랬지." 라는 텍스트가 함께 출력된다. (버튼-경고창 기능의 핵심만 매우 간단히 요약 정리한 부분이다.)
Javascript 기초 문법
자바스크립트의 기초 문법은 학교에서 자바를 다루며 배운 문법과 매우 흡사하다. 변수와 기본 연산, 리스트와 딕셔너리, 그리고 다른 기본 함수들까지. 이외에도 조건문, 반복문이 있다.
변수
<script>
let num = 20
num = 'Sparta' // 변수를 한 번 선언했으면 다시 선언하지 않는다.
let a = 15
let b = 5
a + b // 20
a / b // 3
a % b // 0 // 나머지
let first = 'Kelly'
let last = 'Go'
first + last // 'KellyGo'
first + ' '+ last // 'Kelly Go'
</script>리스트
<script>
let a_list = []
let b_list = [1,2,'hey',3]
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
</script>딕셔너리
<script>
let a_dict = {}
let b_dict = {'name':'Kelly','age':20}
b_dict['name'] // 'Kelly'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 155 // 딕셔너리에 key:value 넣기
b_dict // {name: "Kelly", age: 20, height: 155} 출력
</script>리스트 + 딕셔너리
<script>
names = [{'name':'Kelly','age': 20}, {'name':'Eva','age': 22}]
// names[0]['name']의 값은? 'Kelly'
// names[1]['name']의 값은? 'Eva'
new_name = {'name':'Deo','age': 21}
names.push(new_name)
/* names의 값은?
[{'name':'Kelly','age':20}
{'name':'Eva','age':22}
{'name':'Deo','age':21}]
*/
// names[2]['name']의 값은? 'Deo'
</script>조건문
<script>
// AND
function adult(age, sex){
if(age > 20 && sex == 'female'){
alert('adult woman')
}
else if (age > 20 && sex == 'male') {
alert('adult man')
}
else {
alert('minor')
}
}
// OR
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('unavailable')
}
else if(age > 20 && sex == '여'){
alert('adult woman')
}
else if (age > 20 && sex == '남') {
alert('adult man')
}
else {
alert('minor')
}
}
</script>반복문
<script>
// 요약
for (시작 조건; 반복 조건; ++ 혹은 --) {
매번 실행
}
// 예시
for (let i = 0; i < 100; i++) {
console.log(i);
}
// 반복 조건에 리스트.length 사용하기
let kelly_list = ['Kelly', 'Eva', 'Deo']
for (let i = 0; i < kelly_list.length; i++) {
console.log(i);
}
</script>꾸준히 연습하자.
