[웹개발] 부트스트랩 & 폰트 / Javascript 기초

https://chanytv.tistory.com/140

[웹개발] 개발 전 프로그램 설치 및 HTML,CSS 기초

[웹개발] 부트스트랩 & 폰트 / Javascript 기초

---

부트스트랩 & 폰트

부트스크랩이란 미리 만들어둔 CSS들을 모아둔 것을 뜻한다.

사이트는 아래 주소로 들어가면 된다.

Bootstrap · The most popular HTML, CSS, and JS library in the world.

Bootstrap

폰트도 구글에서 제공하는 폰트를 사용하면 괜찮은 폰트를 사용할 수 있다.

그나저나 저작권에는 문제가 없는지 나중에 더 자세히 보아봐야 할 것 같다.

https://fonts.google.com/

Google Fonts

폰트 적용방법은 두가지 코드를 받아 넣어주면 된다.

@improt와 CSS rules specify families를 넣어주면 된다.

전체 페이지의 모든 글씨에 폰트를 적용하려면 아래와 같이 넣어주면 된다.

* {
	font-family: 'Hahmlet', serif;
}

저 별이 중요한거다.

 

그 외에 자바스크립트로 넘어가기 전 몇 가지 더 정리하자면

주석은 ctrl + /

css 파일로 스타일 적용하는 방법은 아래와 같다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

---

Javascript기초

자바스크립트는 브라우저에서 사용하는 프로그래밍 언어다.

파이썬도 같이하고 있는데 헷갈리지 않으려나.... 뭐 일단 해보자~

function hey(){
	alert('안녕!');
}

function의 뜻은 기능이다. hey()라는 이름을 정해주고 alert(불러올 값)을 정해주면 'hey'라는 명령에 값을 내논다.

다른 프로그래밍과 비슷한 구조다.

 

자바스크립트에서 사용하는 변수 역시 비슷하다.

let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

let first_name = 'bob' // snake case라고 합니다.

또는,

let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.

과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!

let 함수 외에도 list, dict, split 등이 있다. 자세한 설명은 아래 코드 참조.

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를 출력

/////////////////////////////////////////////////
let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

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

/////////////////////////////////////////////////
names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

////////////////////////////////////////////////
또, 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

가장 많이 쓰는 함수로 if와 for문도 있다. 역시 아래 내용에서 참조

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)
///////////////////////////////////

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)
///////////////////////////////////

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

역시나 파이썬이랑 조금씩 혼동이 온다.ㅋㅋㅋㅋ

많이 쓰다 보면 적응되겠지.