.png)
학습내용
1. CSS
1-1) CSS 기초 사용방법
:
<head> ~ </head>안에<style> ~ </style>공간을 만들어 작성한다.
: mytitle라는 class를 가리킬 때, .mytitle {...}라고 써야한다.
1-2) CSS 연습 - 로그인 페이지 만들기
(1) 로그인 화면을 가운데로 가져오는 방법
1st. width와 margin: auto를 사용한다.
2nd. 1st 방법이 안 될 경우 display: block을 추가한다.
(2) margin과 padding의 차이점
: margin은 바깥 여백을, padding은 내 안쪽 여백을 조정해준다.
(3) 구글웹폰트 입히는 방법
1st. 폰트의 link 태그를 복사해서
<title> ~ </title>다음 line에 붙여넣는다.2nd. 폰트의 CSS rules to specify families를 복사해서
<style> ~ </style>사이의 * {...} 안에 붙여넣는다.
(4) 폰트 color 바꾸는 방법
1st.
<body> ~</body>사이에서 바꾸고자 하는 부분의 class="..."에 color-font를 넣는다.예를 들어, blue로 바꾸고 싶다면 class="..."에 blue-font를 넣으면 된다.
<button class="mybtn blue-font">로그인하기</botton>2nd.
<style> ~ </style>사이에.blue-font { color: blue; }를 추가하면 색이 변경된다.
1-3) 로그인 페이지 완성 코드
.png)
<!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>2. Javascript
2-1) Javascript란?
: 프로그래밍 언어 중 하나로, 브라우저가 알아드를 수 있는 언어.
2-2) Javascript - 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>
2-3) Javascript 기초 문법 (1)
(1) 변수 & 기본연산
☑ 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
☑ let으로 변수를 선언
let num = 20 num = 'Bob'*** 변수는 값을 저장하는 박스
*** 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.
☑ 사칙연산, 그리고 문자열 더하기가 기본적으로 가능
let a = 1 let b = 2a+b // 3 a/b // 0.5let 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'
(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} // 로 선언 가능 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'
(3) 기본 함수들
☑ 사칙연산 외에도, 기본적으로 제공하는 여러 함수들 존재
- '나눗셈의 나머지'를 구하고 싶은 경우'
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.comlet result2 = result[1].split('.') // ['gmail','com']result2[0] // gmail -> 우리가 알고 싶었던 것! result2[1] // commyemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!- 특정 문자로 나누고 싶은 경우 2
let txt = '서울시-마포구-망원동' let names = txt.split('-'); // ['서울시','마포구','망원동']- 특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
2-4) Javascript 기초 문법 (2)
(1) 함수
☑ 기본 생김새
- 만들기
function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 }- 사용하기
함수이름(필요한 변수들);☑ 예시
- 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) { console.log('num1: ', num1, ', num2: ', num2); return num1 + num2; }sum(3, 5); // 8 sum(4, -1); // 3
(2) 조건문
☑ 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,'남')
(3) 반복문
☑ 예를 들어 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가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.
☑ 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인다.
