css div에 이미지 삽입 하고, 맞춰서 보이도록 하기.
background-image : url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
;){kind=link}
background-position : center;
background-size : cover;
div 안에 내용물 정렬할때
display : flex;
flex-direction: column;
align-items ; center;
justify-content : center;
삽입한 이미지 약간 어둡게 할때.
linear-gradient(0deg, rgba(255, 239, 239, 0.2), rgba(248, 203, 203, 0.2)),url(' ')
잘 모르겟지만 앞에 rgba는 아래쪽에 영향을 주는것 같고, 뒤에 rgba는 위쪽에 영향을 주는것 같았음.
div에 약간 그림자 주고 싶을때.
git에 올리고 배포하고 싶으면
파일 하나를 올려야 하는데 이름을 index.html 이라고 해야만 한다.
안그러면 배포가 안됨.
제이쿼리(jQuery)란?
제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리.
제이쿼리를 사용하려면, 라이브러리를 쓸수 있도록
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
이걸 꼭 <head>태그 안에 넣어줄것~!!!
$('#지칭할이름').text(바꿀 내용)
<script>
function checkResult(){
let a = "나훈아"
$('#q1').text(a)
$('#q1').css('color','red')
$('#q1').css('font-size','40px')
}
</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>
java script
브라우저(크롬, 엣지 같은) 가 유일하게 알아듣는 언어.
파이썬은 브라우저가 못알아 들음.
자바스크립트 를 정적 웹페이지에 활용해서 움직임을 줘보자.
만약 버튼을 눌렀을때 어떠한 alert 경고창이 뜨게 하고 싶다.
그런 경우
이처럼 head 태그 안에 script 태그를 넣어주고, 그 안에 함수를 이용해서 써준다.
그리고 그 바디에 연결하고 싶은 곳에
지금의 경우 버튼을 눌럿을때 함수가 실행됬으면 하는거니까
버튼 태그 안에 onclick 을 하면 함수가 실행되도록 넣어준 것.
id 와 class 의 차이
ID는 한요소에만 사용, 한가지에만 지정 가능. 유일한 이름을 지어주는것.
CLASS는 여러요소에 중복사용가능, 비슷한 유형으로 반복되는거 비슷한 유형별로 묶을때.
<style> 태그, 그리고 <script> 태그의 위치는??
<style> 태그는 head 안에!!
근데 <body>랑 <head> 사이에 있어도 크게 문제 없음!
<script> 태그는 <body> 제일 아래에 오도록??
이유는? <head>에 <script> 가 있으면, 그리고 파일이 무거우면 페이지 로딩할때 오래걸림.
근데 파일이 무거우면 <body>에 있어도 오래걸리지 않을까????
게다가 <body>에 있으면 화면 빨리 볼 수 있는데, 대신 너무 js에 의존적인 코드인 경우엔 완성되지 않은 것도 페이지에 보인다는디......?????? 요건 뭐가 더 좋은지의 문제인거 같은데, 일단 어디에 써도 돌아가긴 하는것 같음..ㅋ ㅋㅋㅋ
.append( )
jquery에서 아주 유용하게 쓰는 메소드 중 하나인데,
반복하면서 뭔가를 할때, 이걸 붙임으로 html이 자동으로 만들어주는 역할을 한다.
아래 예시를 살펴보장
<script>
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').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>
이처럼
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
함수를 이용해서 반복해서 어떠한 html을 생성하도록 만들수 있다.
함수안에 변수를 설정해주고,
그 변수를 forEach로 돌리는데,
그 forEach안에 또 함수를 만들어서(화살표 함수)
매개변수로 a 를 넣어주고, 또다른 변수를 설정한다.
새로 만든 또다른 변수에는 백틱 `를 이용해서 jQuary를 쓸수 있는데,
`<p>${a}</p>` 이렇게 $표시 뒤에 중괄호를 넣고 반복해서 붙여줄 것을 넣어준다.
그런데 여기서 a 라는 매개변수는 fruits라는 배열이 담긴 애들을 하나씩 꺼내서 대입하는 것이니까
차례로 사과, 배, 감, 귤, 수박이 들어가게 된다.
그것을 jQuary에 append를 이용해서 html로 붙여줄건데,
$('#q1').append(temp_html)
이렇게 써주면, 하나씩 차례로 붙는다.
그래서 2. 붙이기 라는 글자 아래에
이미 있는 사과, 귤, 감 아래에 쫘라락 붙는 결과가 나온당'
근데 만약 기존에 있던 사과, 귤, 감을 없애려면,
forEach문 위에, 그렇지만 큰 함수 안에
$('#q1').empty()
라고 적어줘야한다.
자 만약 반복해서 jQuary를 이용해서, 그리고 .append( )를 이요해서 붙이고 싶은데,
그게 배열이 담긴 변수가 아니라, key-value가 담긴 변수라면???
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty()
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
$('#q2').empty()
people.forEach((a) => {
let name = a['name'];
let age = a['age'];
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
}
</script>
일단 큰 함수 안에 있는건 똑같다.
그리고 반복시키면서 뭔가 만들어 주고 싶은 변수의 이름을 forEach로 돌리는데,
똑같이 안에 화살표 함수를 만들어준다.
그리고, 지금 이름과 나이만 바꿔가면서 넣어주고 싶으니까
이름과 나이를 각각 변수로 설정한 후 넣어준다.
이렇게
let name = a['name']
let age = a['age']
그다음에 또다른 변수를 설정하는데,
jQuary문을 넣어줄 변수를 만든다.
let temp_html =`<p>${name}는 ${age}살 입니다.</p>`
그다음 방금 만든 변수에 .append( ) 해주면 끝
$('#q2').append(temp_html)
JSON
서버에서 클라이언트로 데이터를 내려줄때,
dictionary 형태로 내려주는걸 말함.
fetch
데이터를 주는 url이 있다면, 그 url을 가져옴으로 그안에 데이터를 가져다주는 역할을 한다.
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach((a) => {
console.log(a['MSRSTE_NM'],a['IDEX_MVL'])
})
console.log(data['RealtimeCityAir']['row'][0])
})
</script>
</head>
로딩이 완료되면 자동으로 함수가 실행되게 하려면,
$(document).ready(function () {
} )
.text( ) / .append( ) 차이
.text() / .html() 은 기존에 있던것을 변경해서 붙일때 사용.
.append()는 기존에 있던거에다가 추가로 태그를 삽입할때 사용