JavaScript - 노드추가/노드생성/배너 만들기

1. 노드추가

1) 객체명.appendChild(객체명)

자식객체를 부모객체로 이동

​

2) 객체명.insertBefore(객체명)

부모 객체앞에 객체 생성

​

3) 객체명.insertData(위치값, data)

해당 위치에 data 추가

​

Practice

결과 영상 확인 : https://blog.naver.com/yyhhhjun/222769187264

프론트 엔드 day 19 - 노드추가/노드생성/배너 만들기

 

2. 노드생성

1) document.createElement()

()안의 요소를 생성

​

2) document.createTextNode(text)

텍스트 추가

​

3) 객체명.setAttributeNode(속성)

객체에 속성을 부여

​

함수 표기법

1) 기명함수 : 함수에 이름을 지어주며 변수에 대입

ex)

const arr = function(){}

​

2) 화살표 함수(ArrowFunction)

ex)

()=>{}

​

function 객체명(){}

const 객체명 = function(){}

const 객체명 = () => {}

모두 같은 뜻이다. but 화살표 함수를 많이 사용한다.

​

Practice

결과 영상 확인 : https://blog.naver.com/yyhhhjun/222769187264

프론트 엔드 day 19 - 노드추가/노드생성/배너 만들기

 

---

3. 배너

Practice

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  height: 3rem;
  background-color: #857192;
}

#container {
  width: 100%;
  margin: 0 auto;
}

#banner {
  width: 100%;
  height: 30vh;
  background-color: #f2538f;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bannerBox {
  width: 1080px;
  overflow: hidden;
}

#bannerBox > ul {
  list-style: none;
  width: 1080px;
  height: 30vh;
  transition: all 1s;
  display: inline-flex;
}

#bannerBox > ul > li {
  min-width: 1080px;
  min-height: 30vh;
  text-align: center;
  color: #000;
}

#bannerBox > ul > li:first-child {
  background-color: #ea1234;
}
#bannerBox > ul > li:nth-child(2) {
  background-color: #123512;
}
#bannerBox > ul > li:nth-child(3) {
  background-color: #e231e2;
}
#bannerBox > ul > li:last-child {
  background-color: #ea5234;
}

#container > #content {
  width: 1080px;
  height: 100vh;
  margin: 0 auto;
  background-color: #f1253f;
}

#prevBtn,
#nextBtn {
  cursor: pointer;
  border: 1px solid #adff2f;
  width: 3rem;
  height: 3rem;
  z-index: 999;
}

footer {
  width: 100%;
  height: 10rem;
  background-color: #000;
}

JS

"use strict";

const bannerBox = document.querySelector("#bannerBox > ul");
const bannerItem = document.querySelectorAll(".banner_item");

const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

const size = bannerItem[0].clientWidth;
//패딩을 포함한 넓이를 가지고 오는 기능
let counter = 0;

//addEvenListener : 이벤트를 동작시킴
//click, wheel, mouseover, mouseleave, mousedbclick, keypress...

nextBtn.addEventListener("click", () => {
  if (counter < bannerItem.length - 1) {
    //counter가 bannerItem의 길이-1 보다 작다면
    counter++; // counter에 1씩 증가
    bannerBox.style.transform = "translateX(" + -size * counter + "px)";
    //bannerBox를 x축으로 -size*counter px 만큼 이동
  } else if (counter == bannerItem.length - 1) {
    //counter가 bannerItem의 길이-1 과 같다면
    counter = 0; //counter에 0
    bannerBox.style.transform = "translateX(" + -size * counter + "px)";
  }
});

prevBtn.addEventListener("click", () => {
  if (counter > 0) {
    counter--;
    bannerBox.style.transform = "translaxeX(" + -size * counter + "px)";
  }
});

//setInterval : 반복
//ex)
//setInterval(()=>{}. 반복할 시간)

setInterval(() => {
  //반복
  if (counter < bannerItem.length - 1) {
    counter++;
    bannerBox.style.transform = "translateX(" + -size * counter + "px)";
  } else if (counter == bannerItem.length - 1) {
    counter = 0;
    bannerBox.style.transform = "translateX(" + -size * counter + "px)";
  }
}, 3000); //3초

결과 영상 확인 : https://blog.naver.com/yyhhhjun/222769187264

프론트 엔드 day 19 - 노드추가/노드생성/배너 만들기