- 주석처리 = ctrl + /
- class 중첩 = 띄어쓰고 다른 이름 넣기
- 부트스트랩 + 내 css 커스텀
자주 쓰이는 CSS
- h1, h5
- background-image, background-size, background-position
- 세트로 묶어서 사용
background-image: url("");
background-size: cover;
background-position: center;
- color
- width, height, border-radius
- border 사용법
border: 너비 스타일 색상
- margin, padding
부트스트랩
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
자바스크립트
funtion ***() {
alert('~~~');
}
- 변수 & 기본연산
- 변수명 = 값
- 변수는 값을 저장하는 박스
- 한 번 선언했으면, 다시 선언하지 않고 값 넣음
- 값이 문자열이여도 + 가능
- 변수명은 그럴싸하게, 누구나 알아보기 쉽게
- 리스트
- 리스트명 = [값, 값, 값]
- 순서 중요
- 요소추가 = 리스트명.push(값)
- 길이구하기 = 리스트명.length
- 딕셔러니
- 딕셔러니명 = {키:밸류, 키:밸류}
- key - value
- 순서 안중요
- 요소추가 = 딕셔러니명['추가할 키'] = 밸류
- 기본함수
- 나눗셈의 나머지 = "%"
- 같다 = "=="
- 같지않다 = "!="
- 특정문자로 합칠 때 = .join('특정문자')
- 특정문자로 나눌 때 = .split('특정문자')
let myemail = 'sparta@gmail.com'
myemail.split('@')
> ['sparta','gmail.com']
myemail.split('@')[1]
> gmail.com
myemail.split('@')[1].split('.')
> ['gmail','com']
myemail.split('@')[1].split('.')[0]
> gmail
- 함수
만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
사용하기
함수이름(필요한 변수들);
ex)
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5);
sum(4, -1);
- 조건문
기본형태
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
- 반복문
기본형태
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
>>>
for (let i = 0; i < 10; i++) {
console.log(i);
}
ex)
let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
> 리스트 내 딕셔너리를 하나씩 출력
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
> 점수 70점 미만 이름만 출력
- 자바스크립트 연습
for (let i = 0; i < mise_list .length; i++){
let gu_name = mise_list [i]['MSRSTE_NM']
let gu_mise = mise_list [i]['IDEX_MVL']
console.log(gu_name,gu_mise)
}
}
for (let i = 0; i < mise_list .length; i++){
let gu_name = mise_list [i]['MSRSTE_NM']
let gu_mise = mise_list [i]['IDEX_MVL']
if (gu_mise < 40) {
console.log(gu_name,gu_mise)
}
}
for (let i = 0; i < bikes.length; i++){
let name = mise_list[i]['stationName']
let bike = bikes[i]['parkingBikeTotCnt']
console.log(name,bike)
}
for (let i = 0; i < bikes.length; i++){
let name = bikes[i]['stationName']
let bike = bikes[i]['parkingBikeTotCnt']
if (bike < 5) {
console.log(name,bike)
}
}
