0. 단축키
줄 맞춤 Alt + Shift + F
주석 Ctrl + /1. 구글 웹폰트
https://fonts.google.com/?subset=korean
들어가서 원하는 글씨체 선택, selct regulat 클릭, @import style에 넣기, 아래 css *로 붙여넣어 적용하기2. 배경 이미지 넣기
background-image: url(url주소);
background-position: center;
background-size: cover;
2-1. 배경 투명하게
background-color: transparent;
2-2. 배경 밝기조정
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(url주소)
2-3. 그림자 주기
box-shadow: 0px 0px 3px 0px gray;3. 여백 넣기
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
위 오른쪽 아래 왼쪽 시계방향4. div박스 안 내용물 정렬하기
display: flex; #정렬 형태
flex-direction: column; #세로로 나열 가로: row 세로: column
align-items: center; #내용물 정렬 위치(가로)
justify-content: center; #내용물 정렬 위치(정중앙 위치시키기)5. 스타일 시트 분리하기
(css파일이름).css만들어서 <style>안에 내용들만 통째로 옮기기
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">6. 부트스트랩 head에 태그 넣기
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>7. 마우스 올렸을때 효과 주기 - hover
<style>
.(class):hover {
border: 2px solid white;
}
</style>8. JQuery
-HTML의 요소를 조작하는, 편리한 javascript를 미리 작성해둔 것. 라이브러리!
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
-적용할 div에 id값 주기
<div id="id_name">
-script에서 불러올때는 $('#id_name').기능(변수)
</div>
8-1. 함수 만들기
function name(){
ex) alert('안녕!')
}
8-2. console.log() - 작동하는지 미리 찍어보기
8-3. 반복문
-forEach
let fruits = ['사과','배','감','귤']
fruits.forEach((변수이름 맞추기) => {
console.log(변수이름 맞추기)
})
--------------------------------------
-> 사과
배
감
귤
8-4. 조건문
-if / else
if (조건 a > 20) {
조건에 맞다면~
} else {
아니라면~
}
8-5. fetch
-기본 골격
function name() {
fetch("URL").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
**** row, 반복, 조건문, temp_html 예시
rows.forEach((a) => {
let place = a['stationName']
let park = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class="little">
<td>${place}</td>
<td>${park}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${place}</td>
<td>${park}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
****로딩 후 자동실행
$(document).ready(function () {
})
식이