HTML, CSS, Bootstrap 그리고 Javascript (웹 개발 종합반 1주차)

항해99에 첫 수업 웹개발 종합반 강의 1주차 1회독을 마치며

웹페이지를 만드는데 있어서

웹의 동작 개념을 모르면 안되기 때문에

가장 기본적인 HTML, CSS를 먼저 알게 되었다.

1. 나만의 HTML과 CSS를 나만의 정의로

- HTML은 "뼈대"다.

- CSS는 뼈대를 꾸며주는 "꾸미기"다.

그리고 Bootstrap을 배웠다.

2. 나만의 Bootstrap 정의

- Bootstrap은 예쁜 CSS를 미리 모아둔 것.(그래서 미리 완성된 CSS꾸러미인 부트스트랩을 가져다가 쓰면 된다.)

처음 배웠을 때 "Java"와 "Javascript"은 같은 언어에서 파생된 줄만 알았는데 전혀 다른 거 였다.

3. 나만의 Javascript 정의

- Javascript란? 프로그래밍 언어 중 하나로, 브라우저가 알아 들을 수 있는 언어입니다. (JAVA랑 관련없다!)

하나의 function인 "onclick"으로 HTML에 버튼을 만들어 alert('안녕')으로 화면에 알람창 같이 "안녕"을 띄어 봤다.

하나의 프로그래밍 언어를 배울 때 처럼 Javascript로
변수, 자료형, 함수, 조건문, 반복문을 배워 화면에 띄어 보았다.

- 변수& 기본연산, 리스트& 딕셔너리

let a = 1 // 변수는 값을 저장하는 박스예요.
let b = 2

a+b  // 3
a/b  // 0.5
a-b // -1
a*b // 2

// 리스트
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를 출력

// 딕셔너리 : 키(key)-밸류(value)값의 묶음
let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능, 'key':'value'형식
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

- 함수

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	alert(num1+num2);
}
sum(3, 5); // 8
sum(4, -1); // 3

- 조건문

// 20살보다 위면 성인, 10살보다 위고 20살보다 아래면 청소년, 10살 아래면 10살 이하
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

- 반복문

// 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
for (let i = 0; i < 100; i++) {
	console.log(i);
}

1주차를 강의를 보면서 하나의 웹페이지를 만들게 되었고,

과제로 팬명록을 만들어 보게 되서 손흥민 팬명록을 직접 만들었다.

완벽하진 않지만, 배우는 입장이기에 차분히 따라가면서 추가해 나가야 겠다.