08_HTML과 JS연동하기
FrontEnd/JavaScript

08_HTML과 JS연동하기

728x90

이번에는 아주 간단한 예제 몇개로 HTML과 JS를 연동하는법에 대해 간단히 서술해보겠다.

 

특히 다른 프로그램없이 오직 HTML과 JS만 가지고 간단하게 구현해볼 생각이다.

 

먼저 만들것은

 

카운터

아래와 같이 아주 간단한 카운터 예제를 만드는 것이다.

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 id="number">0</h2>
    <div>
      <button id="increase">+1</button>
      <button id="decrease">-1</button>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

위와 같이 간단하게 HTML을 구성해준 후

 

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

console.log(number.innerText);
console.log(increase.offsetTop);
console.log(decrease.id);

increase.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current + 1;
  console.log("increase가 클릭됨");
};

decrease.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current - 1;
  console.log("decrease가 클릭됨");
};

위 코드를 넣어주면 된다.

 

이때 getElementById를 사용하여 HTML의 해당하는 id값을 찾아서 대입해주는 것이고, 그후 onclick을 이용하여 해당 기능을 간단하게 구현해준다.

 

 

해당하는 태그로 애들을 찾는 querySelectorAll을 사용하여

 

const number = document.getElementById("number");
const buttons = document.querySelectorAll("button");
const [increase, decrease] = buttons;

console.log(number.innerText);
console.log(increase.offsetTop);
console.log(decrease.id);

increase.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current + 1;
  console.log("increase가 클릭됨");
};

decrease.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current - 1;
  console.log("decrease가 클릭됨");
};

위처럼 구현할 수도 있다.

 

 

모달 만들기

 

먼저 모달이란

 

모달

다음처럼 열고 닫을수 있는 창을 의미한다.

 

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <h1>안녕하세요</h1>
    <p>내용내용내용</p>
    <button id="open">모달 열기</button>

    <div class="modal-wrapper" style="display: none;">
      <div class="modal">
        <div class="modal-title">안녕하세요</div>
        <p>내이름은 정민규</p>
        <div class="close-wrapper">
          <button id="close">닫기</button>
        </div>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

HTML상에 겉의 내용과 모달의 내용을 정의해 준 후, 모달을 정의해준 modal-wrapper의 display를 none으로 만들어 주어 우선 보이지 않게 해준다.

 

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 4px;
  width: 320px;
}
.modal-title {
  font-size: 24px;
  font-weight: bold;
}
.modal p {
  font-size: 16px;
}

모달부분의 css는 위처럼 정의해주면 될 것 같다.

 

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");

open.onclick = () => {
  modal.style.display = "flex";
};

close.onclick = () => {
  modal.style.display = "none";
};

그 이후 자바스크립트를 통해 해당 아이디와 class이름을 가져오고 이전예제와 비슷하게 onclick을 사용하여 구현하면 아주 간단하게 모달을 구현해 볼 수 있다.

728x90

'FrontEnd > JavaScript' 카테고리의 다른 글

24_타입스크립트 문법  (0) 2022.01.06
14_리액트_클래스형 컴포넌트  (0) 2021.12.24
07_유용한 JS지식  (0) 2021.12.19
06_JS_배열 내장함수  (0) 2021.12.18
05_promise,Async-Await  (0) 2021.12.05

    티스토리툴바