(2022.04.18 ~ 2022.04.24)
day1
html 기초 익히기.
- html은 문서 기반이다.
- <>안에 들어가 있는 것을 태그라고 부른다.
- html은 head태그와 body태그로 구분된다.
- head태그 부분은 웹 페이지에 보이지 않는 부분이다.
- body태그 부분은 웹 페이지에 보여지는 부분이다.
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
</body>
<body>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
html 기초 태그 정리본이다.
이건 외울 필요는 없지...
day2
html응용, css 익히기.
💡 코드 정리하는 팁
-->전체 선택 후 윈도우는 ctrl + alt + L , 맥은 commed + alt + L
- 로그인 페이지 만들기.
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
- css는 html을 꾸며주는 역할을 한다.
css가 실행되려면 html을 지칭할 수 있어야한다.
ex) class태그 사용
<h1 class="mytitle">로그인 페이지</h1> - css로 꾸며주는 값을 head부분에 style태그 영역을 이용한다.
- style태그 안에 clss를 부르는 방법은 지정 clss이름 앞에 "."을 붙여서 부른다.
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle{
color: red;
font-size: 60px;
}
</style>
</head>
day3
css로 폰트 정돈하기.
- text-align으로 폰트 정열할 수 있음.
<style>
.mytitle {
width: 300px;
height: 300px;
background-color: beige;
font-size: 20px;
text-align: center; /*글자-정열: 가운데; 라는 의미*/
}
</style>
css로 이미지 url 사용하기.
//
<style>
.mytitle {
width: 300px;
height: 300px;
color: white;/*글자 색 변환*/
font-size: 20px;
text-align: center;/*글자-정열: 가운데; 라는 의미*/
background-image:
url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
/*원본 크기 관여 없이 주어진 값 300*200 값으로 이미지 잘라 넣기*/
background-size: cover;
/*주어진 값에 들어갈 크기(비율x)로 키우거나 줄여서 이미지 넣기*/
background-position: center;
/*뒤에 이미지-위치: 가운데; 라는 의미*/
}
</style>
padding과 margin으로 여백값 만들기.
--> 버튼의 기본 설정 값
- padding은 '나(지칭값)'을 기준으로 안으로 띄우기.
.mybtn{
padding: 30px;
}
- margin은 '나(지칭값)'을 기준으로 밖으로 띄우기.
.mybtn{
margin: 30px;
}
padding과 margin으로 상하좌우 값 설정하기.
.mybtn{
padding: 100px 50px 10px 0px;
/*상:100 우:50 하:10 좌:0 --> 시계 방향*/
}
- div 를 이용해서 웹페이지에 내용 가운데 정열하기.
width나 height 값을 넣기 않으면 auto값 지정 할 수 없음.
<style>
.wrap{
width: 300px;/*가장 큰 이미지 넓이 값으로 설정*/
margin: auto;/*넓이 설정 된 양 옆으로 여백 동일하게*/
}
</style>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요.</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</div>
</body>
html은 글 속성과 박스 속성의 태그들이 나눠 져 있음.
--> div는 박스 btn은 글 속성
- 글 속성은 auto 여백 설정을 할 수 없음.
- 글 속성의 코드를 박스로 강제로 바꿔 줄 수 있음.
.mybtn{
width: 100px;
display: block;
margin: auto;
}
css 중첩 사용하기.
- style에 값 넣고 class 영역에 한 칸 스페이스 후 class이름 넣기.
.red-font{
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요.</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn red-font">로그인하기</button>
</div>
</body>
day4
💡 각주 한번에 묶어서 정리하는 팁
--> 각주 처리하고 싶은 부분을 드레그 후 ctrl(command) + alt + "/"
--> html과 css 구분하지 않고 사용 가능.
부트스트랩 사용하기.
부트스트랩이란?
--> 잘 정리된 css를 모아둔 것.
부트스트랩 시작 탬플릿
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>day5
javascript 기초 익히기.
- head태그 안에 script태그를 만들어 그 안에 작성한다.
- script태그 부분에서 정의(difine)하고 body부분에서 필요한 곳으로 연결.
변수와 기본연산 익히기.
변수 대입은 오른쪽에서 왼쪽으로
--> a=2이면 2를 a라는 상자에 넣는 식
--> '2를 a라는 변수에 넣는다.'
- 숫자형 변수는 그냥 넣고 문자열은 ''안에 넣어 대입
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Dingcommie'
let last = 'An'
first+last // 'DingcommieAn'
first+' '+last // 'Dingcommie An'
first+a // Dingcommie1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.💡 변수명은 모두가 알아보기 쉽게 작성한는 것이 좋다.
리스트 익히기.
- 리스트란, 순서를 갖고 있는 형태를 의미함.
- 리스트 선언은 대괄호"[]"를 사용함.
- 리스트 출력은 대괄호"[]"를 사용함.
💡 코딩할 때 순서는 0부터 시작함
-->[1, 2, 3]이 있으면 0번째는'1'
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':'Dingcommie','age':21}
// 로 선언 가능
b_dict['name'] // 'Dingcommie'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 170
// 딕셔너리에 키:밸류 넣기
b_dict
// {name: "Dingcommie", age: 21, height: 170}을 출력리스트와 딕셔너리의 조합 익히기.
names = [{'name':'Dingcommie','age':20},
{'name':'carry','age':38}]
//-->names 딕셔너리에 리스트를 변수로 선언함.
// names[0]['name']의 값은? 'Dingcommie'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
//-->new_name이라는 리스트 선언.
names.push(new_name)
// names딕셔너리에 new_name리스트 변수 추가
// names의 값은?
[{'name':'Dingcommie','age':20},
{'name':'carry','age':38},
{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'함수 익히기.
- 함수의 기본 형식 익히기.
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);ex)
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
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문 사용하기.
- 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,'남')"같음"의 의미는 "="이거 아님!!! "=="이거임!!
무적권 두 번!! 한국인은 티슈도 두 장!!!
반복문
- 반복문이란, 설정한 횟수만큼 문장을 반복하는 식.
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문 사용하기.
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
그냥 은근슬쩍 살다 가긴 싫어