:
<head> ~ </head>
안에<style> ~ </style>
공간을 만들어 작성한다.
: mytitle라는 class를 가리킬 때, .mytitle {...}라고 써야한다.
1st. width와 margin: auto를 사용한다.
2nd. 1st 방법이 안 될 경우 display: block을 추가한다.
: margin은 바깥 여백을, padding은 내 안쪽 여백을 조정해준다.
1st. 폰트의 link 태그를 복사해서
<title> ~ </title>
다음 line에 붙여넣는다.2nd. 폰트의 CSS rules to specify families를 복사해서
<style> ~ </style>
사이의 * {...} 안에 붙여넣는다.
1st.
<body> ~</body>
사이에서 바꾸고자 하는 부분의 class="..."에 color-font를 넣는다.예를 들어, blue로 바꾸고 싶다면 class="..."에 blue-font를 넣으면 된다.
<button class="mybtn blue-font">로그인하기</botton>
2nd.
<style> ~ </style>
사이에.blue-font { color: blue; }
를 추가하면 색이 변경된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Do Hyeon', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top:40px;
border-radius: 10px;
background-image: url("https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034__340.jpg");
background-position: center;
background-size: cover;
}
.wrap {
width: 300px;
margin: 25px auto;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.blue-font {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input style="margin: 0px 10px;" type="text"/></p>
<p>PW: <input type="password"/></p>
<button class="mybtn blue-font">로그인하기</button>
</div>
</body>
</html>
: 프로그래밍 언어 중 하나로, 브라우저가 알아드를 수 있는 언어.
<버튼을 클릭하면 경고창이 뜨게하기>
1st. 함수 만들어두기
<head> <script> function.hey() { alert.('안녕!'); } </script> </head>
***
<head> ~ </head>
안에<script> ~ </script>
로 공간을 만들어 작성 한다. 즉,<script> ~ </script>
내에 Javascript를 작성하는 것이다.2nd. 버튼에 함수 연결하기 (버튼을 누르면 함수가 불린다.)
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>
☑ 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
☑ let으로 변수를 선언
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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행
☑ 변수명
- snake case
let first_name = 'bob'
- camel case
let firstName = 'bob'
☑ 리스트: 순서를 지켜서 가지고 있는 형태
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} // 로 선언 가능 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 a = 20 let b = 7 a % b = 6
- 모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub' myname.toUpperCase() // SPARTACODINGCLUB
- 특정 문자로 문자열을 나누고 싶은 경우
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 -> 간단하게 쓸 수도 있다!
- 특정 문자로 나누고 싶은 경우 2
let txt = '서울시-마포구-망원동' let names = txt.split('-'); // ['서울시','마포구','망원동']
- 특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
☑ 기본 생김새
- 만들기
function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 }
- 사용하기
함수이름(필요한 변수들);
☑ 예시
- 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) { console.log('num1: ', num1, ', num2: ', num2); return num1 + num2; }
sum(3, 5); // 8 sum(4, -1); // 3
☑ 20보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){ if(age > 20){ alert('성인이에요') } else { alert('청소년이에요') } }
is_adult(25)
☑ if, else if, else if, else if else
function is_adult(age){ if(age > 20){ alert('성인이에요') } else if (age > 10) { alert('청소년이에요') } else { alert('10살 이하!') } }
is_adult(12)
☑ AND 조건과 OR 조건
- AND 조건
function is_adult(age, sex){ if(age > 20 && sex == '여'){ alert('성인 여성') } else if (age > 20 && sex == '남') { alert('성인 남성') } else { alert('청소년이에요') } }
- OR 조건
function is_adult(age, sex){ if (age > 65 || age < 10) { alert('탑승하실 수 없습니다') } else if(age > 20 && sex == '여'){ alert('성인 여성') } else if (age > 20 && sex == '남') { alert('성인 남성') } else { alert('청소년이에요') } }
is_adult(25,'남')
☑ 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99)
*** 이렇게 쓰기에 무리가 있다. 그래서 반복문이 존재
☑ 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있다.
for (let i = 0; i < 100; i++) { console.log(i); }
for (1.시작조건; 2.반복조건; 3.더하기) { 4.매번실행 }
1 → 2체크하고 → (괜찮으면) → 4 → 3
→ 2체크하고 → (괜찮으면) → 4 → 3
→ 2체크하고 → (괜찮으면) → 4 → 3
→ 2체크하고 → (괜찮으면) → 4 → 3 와 같은 순서로 실행된다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.
☑ 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인다.