getElementsByClassName 개념

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

document.getElementsByClassName("box")[0].style.backgroundColor =
        "tomato";

• getElementsByClassName 개념
  • document.getElementsByClassName("box")[0]
  • 몇번째 box를 가져올지 []로 정해야 한다.
  • [0] : 1번째

---

addEventListener 핵심

document
.querySelector(".close-alert-box__button")
.addEventListener("click", function () {
  document.querySelector(".alert-box").style.display = "none";
});

• 핵심
  • 실행함수를 익명함수로 넣었다.
    • 파라미터(인수)를 이용할 수 있다.

---

jQuery 다운로드

• 기능
  • 자바스크립트 코드의 길이를 줄여준다
• 다운로드 방법
  1. jQuery cdn 검색
  2. 제일 최신 버전(가장 위에 있음)
  3. minified 클릭
  4. 코드를 head tag 안에 복붙한다.
• 버전 차이
  • uncompressed
    • 원래 버전
  • minified
    • 압축 버전, 용량이 적음
  • slim
    • 라이트 버전, 몇가지 기능이 빠짐
• 리액트쓰면, 안써도 된다.

---

jQuery $("")

• html을 js로 가져온다.

//자바스크립트
document.querySelector();

//jQuery
$()

• 위와 아래 코드는 의미가 같다.
  • 괄호안에는 css selector를 사용한다.

---

jQuery .html()

• 해당 tag 안에 html tag 생성

//자바스크립트
document.querySelector().innerHTML()

//jQuery
$().html()

• 위와 아래 코드는 의미가 같다.

---

jQuery .text()

• 안의 컨텐츠를 수정할 수 있다.

//자바스크립트
document.querySelector().innerText()

//jQuery
$().text()

• 위와 아래 코드는 의미가 같다.

---

jQuery $().html() 중요

<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>

$("p").text("안녕");

• 자바스크립트와 달리 jQuery는 모든 p tag를 가져온다.
  • 자바스크립트는 맨 위의 p tag만 가져온다.

---

jQuery $("p").eq(0).text("안녕");

• p tag중에서 1번째 p tag만 바꾼다는 뜻이다.

---

jQuery .css()

//jQuery
$("h1").css("backgroundColor", "tomato");

• h1 tag가져오고 js로 css수정했음

---

jQuery .attr()

$("h1").attr("src", "");

• 해당 tag안의 속성을 수정하거나 추가할 수 있다.

---

jQuery .addClass()

$("h1").addClass("yellow");

• yellow class를 추가

---

jQuery .removeClass()

$("h1").removeClass("yellow");

• yellow class 제거

---

jQuery .on()

$(".greeting").on("click", function () {

});

• 자바스크립트 .addEventListener와 유사하다.

$(".greeting").on("click", ,function () {

});

---

jQuery .hide()

$(".hide").on("click", function () {
  $(".greeting").hide();
});

• .hide()
  • 숨길 수 있다.

---

jQuery .show()

$(".show").on("click", function () {
  $(".greeting").show();
});

• .show()
  • 숨겼던 것을 다시 보이게 한다.

---

bootstrap 다운로드

1. bootstrap 다운로드 클릭
2. 4버전 클릭
3. Starter template 복사
4. html 파일만들고 head tag 안에 붙여넣기
5. 만들고 싶은 것 검색후 코드 복붙

---

bootstrap으로 시작페이지 만들기

• bootstrap 라이브러리 다운로드
• 라이브러리와 맞는 버전으로 검색해야함
• bootstrap사이트에서 jumbotron 검색
• 코드 html 파일에 복붙

---

사진배경 만들기

• 사진 넣는 방법

background-image: url(img/lake.jpg);

• 반응형으로 만들기
  • 웹 크기에 따라 사진 배율 변화

background-size: cover;

---

모달창 만들기

.black-background {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 5; //bootstrap으로 만든 것은 z-index 1~4를 차지한다.
  position: fixed; //다른 div위에 놓여지도록 한다.
}
.white-background {
  background-color: white;
  width: 80%;
  margin: 100px auto;
  padding: 20px;
  border-radius: 10px;
}

<div class="black-background">
  <div class="white-background"></div>
</div>

---

다른 div위에 놓여지게 만들기

• 예시
  • 버튼눌리면, 뜨는 로그인창같은 것

position: fixed; //다른 div위에 놓여지도록 한다.