TIL(10_24,25sql,웹)
오늘은 어제 TIL못쓴것과 오늘의 TIL을 쓰려한다.
24 일 TIL
1.sql 강의 3주차를 듣기
2.걷기 문제 5 6 풀기
3.웹개발 2주차 강의 듣기
를 목표로 공부했었다. 하지만 sql에서 너무 많은 시간을 써버린 탓에 2과 3번을 마무리하지 못하였다.
공부를 하면서 sql을 이전에 한번 공부했던 것이라 복습을 하지않아 진도를 나갈 때에 조금의
더딛이 있다는 것을 알았고, 이를 보완하고자 오늘 25일 공부는 sql복습을 진행하려한다.
그리고 24일 공부인 웹개발 2주차 강의는 아침에 완료했다.
웹개발 강의를 들으며 느낀 건 너무 세세한 것까지 한번에 공부하려하니 진도를 늦게 나가는 것을 느꼇다. 오늘은 복습을 할 것이지만, 다음주 사전캠프를 할 땐, 세세한 것보단 이런것이 있다는 것에 집중하면서 강의를 들어야겠다.
25 일 TIL
**sql 헷갈리는거 위주
1. 별명 지을 때 유의사항 한글, 특수
> " " 안에 넣는다.1_1. 별명은 where 절에서 쓰이지 않는다.
2. 다양한 연산자
> 다양한 연산자는 select절 where절에 쓰일 수 있다.2_1. <> 같지 않다 == select절에 not을 쓰는 것과 같다.
2_2. between,in,like
> 칼럼 명이 앞 // 뒤에 > [ in 은 ('') // like 는 '' ] << '=' 기호를 쓰지않는다!2_3. and,not,or
2_4 수 연산 *,+,-,/
> 행 연산2_5 기본 연산 sum,avg,count,count(distinct )
> 열 연산``
>> where 절에서 쓰지 않는다. 2_6. min,max
>마찬가지로 열계산이며select min(column1),column2 from table
>의 형태로 작성하여도 뒤에 column2는 앞과 상반된 max를 검색해준다. <> 반대의 경우도 같다.3.group by절
3_1. group by절 형태
select cuisine_type, 의 형태
sum(price) sum_of_price group지을 것 > select절에서 검색
from food_orders
group by cuisine_type group지을 것 > group by 절에서 입력
food_orders 테이블에서 cuisine_type을 묶은 것
sum(price) 을 검색한다.
3_2.
>group by 에서 칼럼 지칭할때 select절에 적은 순서대로 번호를 입력해도 무방하다.select substring(if(email like '%gmail%', replace(email, 'gmail', '@gmail'), ``````email), 10) "이메일 도메인",
count(customer_id) "고객 수",
avg(age) "평균 연령"
from customers
group by 1
> 이 처럼 가능 >> substring(if(email like '%gmail%', replace(email, 'gmail', '@gmail')을 지칭한다.4.replace,substr,concat,if,case
4_1. 형태
replace(바꿀 컬럼, 현재 값, 바꿀 값)
substr(조회 할 컬럼, 시작 위치, 글자 수)
concat(붙이고 싶은 값1, 붙이고 싶은 값2, 붙이고 싶은 값3, .....)
if(조건, 조건을 충족할 때, 조건을 충족하지 못할 때)
case when 조건1 then 값(수식)1
when 조건2 then 값(수식)2
else 값(수식)3
end
4_2. if,case
replace,substr,concat,연산자 등에 같이 쓰인다.
case안에 if도 가능하다
if문 case문에서 조건을 줄 때, 범위가 큰? 수가 큰? >> ex)
0세부터 50대 까지의 연령 10으로 나눈다
처음 조건 50> // 40> // 30> //....
만약 반대로 진행하면 0<= <10// 11<= <20 // ... 연산자를 더 많이 써야한다.
**웹개발 처음부터
첫 단계
저장 폴더 만들기 > vsc 앱에 파일 > 폴더로 열기
탐색기 > 새파일 > 파일명.html
입력란에 html:5
head , body
head는 웹페이지의 제목과 각종 라이브러리(Bootstrap,JQuery)에 링크를 담거나,
스타일 태그를 이용하여 웹을 꾸며준다. << css - 꾸밈 ,
자바스크립트를 이용하여 웹에 동작을 나타낸다. << javascript
body는 페이지에 구역을 만들어 해당 페이지의 틀이 된다 << html - 틀
> 한 문장이 끝나면 ';' 을 해준다.
주석은 > ctrl /
페이지 보기 > alt b
줄 정렬 > alt shift f
> boby는 틀로써 웹페이지에 구역을 나눈다.
여러 태그가 있고 줄간격에 따라 속하는지 포함시키는를 정한다.
태그에 클래스명 혹은 id 명을 부여할 땐,
<태크명 id="아이디명" class="클래스명"> text </태그명>의 형태를 뛴다.
> 스타일은 body에 어느 곳을 꾸밀지 명시한다. >이때 class="클래스명" 으로 위치를 찾게 해준다 <style>
.클래스명{} < 해당부분에 중괄호 안에 꾸며줄 코드를 적어준다.
<style/>
> 구역을 꾸밀 적에 해당 구역이 어디까지 인지 알아야한다.
이때 보통 background-color: 색; 을 이용한다.... 이하
너무 길어져서 나머지는 생략하겠다.
**1주차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Prociono&display=swap');
/* https://fonts.google.com/?subset=korean 폰트가져오기 주소 */
/* 글꼴은 스타일 바로밑에
html <head> 라 표기된 곳을 copy*/
* {
font-family: "Prociono", serif;
/* 폰트를 가져올때
font-family 부분을 카피*/
}
/* 별 표시는 모든 태그를 의미 */
.mytitle {
width: 300px;
/* '''넓이''' */
height: 200px;
/* '''높이''' */
/* 구역에 색을 넣는 >> background-color: green; */
padding-top: 30px;
/* 안쪽여백중 위에만 30만큼 키운다 라는 뜻 */
color: white;
text-align: center;
/* '''문자 정렬''' */
border-radius: 8px;
/* 테두리를 둥글게 */
/* 이미지를 넣을때 3가지를 함께 쓴다 */
/* 첫번째 */
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
/* background-image: url('이미지주소'); 로 이미지첨부 */
/* 두번째 */
background-position: center;
/* 세번째 */
background-size: cover;
}
/* 다른 곳 지정 꾸밈시 밑에 처럼! */
.mybu {
padding: 30px;
/* 안쪽여백 padding */
/* margin: ; 이건 안쪽여백*/
}
/* 큰 구역이던 작은 구역이던 상관없이 스타일 내에서 구분만하면
된다! */
.wrap {
/* 구역 확인용으로 > background-color: green; */
width: 300px;
/* 구역의 넓이를 300px로 지정한다를 의미 안하면 페이지의
양 사이드 끝까지 가므로 */
margin: 20px auto 0px auto;
/* margin은 top부터 시계방향으로 다 지정하여 구역의 위치를 옮김
auto는 한쪽으로 다 민다는 뜻
양 사이드에 auto를 주면 중앙으로 각각 얼마씩 안주고 이리하면
정중앙*/
}
</style>
</head>
<body>
<div class="wrap">
<!-- '''div는 구역''' -->
<!-- 주석 단축키 ctrl + / -->
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디,비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button class="mybu">로그인하기</button>
</div>
<!-- 줄 맞춤은 alt shift f < 하려는곳을 드레그한 뒤 -->
</body>
</html>
2주차
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 타이틀위에 부트스트랩 링크를 넣어도 상관없다 -->
<title>스파르타플릭스</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kablammo&family=Prociono&display=swap');
* {
font-family: "Prociono", serif;
}
.main {
background-color: green;
color: white;
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
/* 태그가 하나만 존재하는 애들은 '.' 을 안붙혀도된다! */
/* '.'을 붙이면 이름표 이름 <> '.'이없으면 태그 이름 */
}
.car {
width: 1200px;
/* background-color: green; */
margin: 20px auto 0px auto;
/* display: flex; */
}
.box {
width: 500px;
margin: 20px auto 0px auto;
border: 1px solid white;
padding: 20px;
border-radius: 5px;
}
.form-floating>input {
background-color: transparent;
color: white;
}
.form-floating>label {
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.box>button {
width: 100%;
/* 100% 는 끝까지 간다 해당 영역에서 */
}
</style>
<script>
// 자바 스크립트는 head 안에 스크립트 태그로 작성 실행한다.
// 변수
let a = '안녕하쇼';
// 이땐 ';'를 써도되고 안써도된다.
// a는 변수명
let b = '네 반갑'
console.log(a);
console.log(a + b);
// 변수 a 와 b를 합칠 수 있다 >> 결과물 얀녕하쇼네 반갑
//console.log(b);
// 콘솔은 개발자를 위한 도구 > 개발자만 보임 <f12에 console들어가도보임
let c = 3;
let d = 5;
console.log(c + d);
//배열
// 꾸러미 관리 순서o > 리스트
let a_ = ['사과', '배', '수박'];
console.log(a_[1]);
// 리스트에서 값이 수가 아닐때 혹은 수 여도 문자로 받고 싶을 때, 작은 따옴표를 쓴다.
// 이때 사과가 아닌 배를 출력하는데 >> 첫번째를 0으로 보기 때문 << 리스트 0~ 로
//꾸러미 관리 > 딕션너리
let person = { 'name': 'bob', 'age': '30' }
console.log(person['age'])
// 딕션너리에 값을 출력 > console.log(변수명['키값'])
let name = person['name']
let age = person['age']
// 이렇케 하면 딕션너리 키값에 해당하는 데이터 값이 생성변수에 값으로 저장 된다.
console.log(name, age)
// 출력할 적에 '+' 말고도 ','도 가능하다
//함수
//조건문
let age_ = 15;
//let age =15;
// ps) 스크립트안에 변수명이 같은 것이 두번 지정되면 오류가 안다.
// 값이 후에 것으로 수정되지 않나보다
if (age_ < 20) {
console.log('청소년입니다.')
} else {
console.log('어른입니다.')
}
// if(조건){조건에 만족할 때} else{ 위 if 조건 외에 일 때}
//반복문
// 꾸러미 수를 반복(대부분 리스트와 쓰임)하거나 하나의 것을 반복하거나 이다.
let ages = [15, 40, 7, 70]
console.log(ages[0])
console.log(ages[1])
console.log(ages[2])
console.log(ages[3])
// 리스트에서 값을 찍어 낼 때 데이터 크기가 작으면 상관없지만 큰 경우 ex크기가 2000
//하나 하나 콘솔로 찍어내기 힘듬 >> 이럴때 반복문을 쓴다.
//반복문 형태
//array.forEach(element => {});
//위 반복문 틀에 array 부분을 > 리스트명
//element 는 리스트에 값을 임의로 부르는 말로 만약 a로 지칭하면 > 중괄호안에
//값을 출력해주는 console로 리스트 에 값들을 출력 할 것이라면
// { comsole.log(a)} << 이때 a는 리스트의 값 하나 하나를 a로 지칭한 것!
ages.forEach(a => { console.log(a) });
//반복문과 조건문
ages.forEach(a => { if(a <20){
console.log('청소년입니다.')
} else{
console.log('어른입니다.')
}});
// 위에와 마찬가지로 ages에 값들을 a로 지칭하고 반복 실행문 안에 if 조건절을 넣었을 때
// if 절 안에 있는 것 또한 같은 ages의 값을 지칭하는 a이고, 반복문을 할 적엔
// 엘리맨트 부분이 반복문 실행문에서 쓰인다는 걸 알아야한다!!
//함수
//기본적으로 같은 동작을 반복하는 것 >> 함수
//function 함수명 () {}
function hey () {
alert('안녕하세요')
}
// 이 것만 가지고는 f12 console창에서의 변화나 엘래멘트 창에서의 변화는 없다
// 이것을 가지고 버튼을 눌렀을 때 동작을 시키는 것을 보자
// <button type="button" << 이처럼 바디 부분에 함수를 쓸 곳에 넣어주면 됨
//함수 라이브러리 > 제이커리
// 라이브러리이기에 import가 필수 >> 부트스트랩도 마찬가지였다! , 글꼴도!
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></ script>
// 이것이 제이커리를 사용할때 임포트 값
// head 어딘가에 넣거나, title 밑에 알기 쉽게 넣어도 된다(자기만의 룰 같이)
// 제이커리를 이용할 때, css를 사용할 때 처럼 이름표(class)를 지칭하는 것처럼
// id를 지칭해줘야한다.
function hey () {
$('#title').text('쥬라기월드')
// '#id명' > 아이디 지칭 ... 뒤에는 행동
}
</script>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
<!-- px-2 text-danger 에서 danger는 색상을 의미한다 밑에 해당자리도 마찬가지!-->
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 id="title" class="display-5 fw-bold">킹덤설명</h1>
<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.</p>
<button onclick="hey()" type="button" class="btn btn-outline-light">영화기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
<!-- f12 검사 가져오고 싶은 부분을 오른쪽 클릭 edit as HTML 누른뒤 복 붙-->
</div>
<div class="box">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>별점선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화 추천이유">
<label for="floatingInput">영화 추천이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
</div>
<div class="car">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>2주차
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<script>
function checkResult() {
let a = ['사과', '배', '감', '귤']
// 리스트 일때
let b = { 'name': '영수', 'age': 30 }
//딕션너리 일때
let c = [
{ 'name': '영수', 'age': 30 },
// 전체적으로는 리스트 형태 > 첫 {}가 리스트에 0번째 값
{ 'name': '철수', 'age': 35 }
]
// 리스트-딕셔너리 일때
$('#q1').text(c[1]['name'])
//> 철수를 뽑을 때
// 틀린 예! >> $('#q1').text(c[1['name']]) <<
//$('#q1').text(a[2])
// 리스트 일때_1
//$('#q1').text(b['name'])
//딕션너리일때
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2"></div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3"></div>
</div>
</body>
</html>2주차
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let a = ['사과', '배', '감', '귤']
$('#q1').empty()
// id q1에 데이터를 지운다
let a_ = a[0]
let temp_html = `<p>${a_}</p>`
// `` 는 숫자1키 옆에 것 > 이걸 두번!
// ${넣고싶은것}
$('#q1').append(temp_html)
//틀린 예
//let temp_html = `<p>${a_.forEach(a => {
// $('#q1').append(a)
//});}</p>`
// 맞는 예
a.forEach(b => {
let temp_html = `<p>${b}</p>`
$('#q1').append(temp_html)
});
}
//딕셔너리 일때
function checkResult() {
$('#q2').empty()
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
// 1
people.forEach(a => {
let temp_html = `<p>${a['name']}는 ${a['age']}살입니다.</p>`
$('#q2').append(temp_html)
});
//2 >> 1과 2는 같은 것
people.forEach(a => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
});
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>
Spring_4