TIL 23.10.12

황은하·2023년 10월 12일

TIL

목록 보기

96/146

📌Today I Learned

JavaScript

ex51_CSS

JavaScript > CSS 조작

모든 태그 > style 속성 제공(인라인 스타일 시트) > 자바스크립트 style 프로퍼티 제공(직접적인 조작)
- 주의! js로 건들인 css는 인라인 스타일 시트로 들어간다.

// 값은 문자열로 표기한다.
box1.style = "color: blue;"; //BOM
box1.setAttribute("style", "color:red"); //DOM

box1.style = "color:blue;";
box1.style.fontSize = "2rem"

// 맵 형태로도 가능. 이렇게 사용하면 카멜표기법으로 변경하지 않아도 된다.
box1.style["color"] = "gold"; 
box1.style["background-image"] = "url(../asset/images/catty01.png)";

box1.style.width = parseInt(box1.style.width) + 50 + "px";

//CSS 적용 방식 무관 > 현재 객체에 적용된 모든 CSS 속성을 반환
const list = window.getComputedStyle(box1);

alert(box1.style.width); // null -> 인라인이 아니면 못읽어온다.
alert(list.width); // 200px
alert(list.getPropertyValue("width")); // 200px

class 조작(간접적인 조작)
- className 프로퍼티
- classList 프로퍼티

//2번 방법
// 클래스 1개일 떄 사용
// <p class="one two">
// <p class="one two three">
// content.className += " three";

// 클래스 여러개 일 때 사용
content.classList.add("three");
content.classList.remove("two");

ex52_css

화면 클릭 > 상자 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 150px;
        height: 150px;
        position: absolute;
        left: 0;
        top: 0;
      }
      #box1 {
        background-color: tomato;
      }
      #box2 {
        background-color: orange;
      }
      #box3 {
        background-color: gold;
      }
      #box4 {
        background-color: greenyellow;
      }
      #box5 {
        background-color: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <!-- ex52_css.html -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    <div id="box4" class="box">상자4</div>
    <div id="box5" class="box">상자5</div>

    <script>
      const list = document.getElementsByClassName("box");
      let index = 0;
      let zindex = 1;

      window.onmousedown = () => {
        // 상자 > postion(absolute) > 문서 좌측 상단 기준
        // clientX, clientY > 문서 좌측 상단 기준
        // alert(event.clientX);

        list[index].style.left = event.clientX - 75 + "px"; // 현재 클릭한 x좌표
        list[index].style.top = event.clientY - 75 + "px";
        list[index].style.zIndex = zindex;
        index++;
        zindex++;
        if (index >= list.length) index = 0;
      };
    </script>
  </body>
</html>

ex53_css

화면 클릭 > 상자 생성 > 클릭한 곳으로 이동

window.onmousedown = () => {
  if (event.buttons == 1) {
    const box = document.createElement("div");
    box.className = "box";
    box.style.left = event.clientX - 75 + "px";
    box.style.top = event.clientY - 75 + "px";

    let r = parseInt(Math.random() * 256);
    let g = parseInt(Math.random() * 256);
    let b = parseInt(Math.random() * 256);

    box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;

    document.body.appendChild(box);
  } else if (event.buttons == 2) {
    document.body.removeChild(event.target);
  }
};

window.oncontextmenu = () => false;

ex54_css

Drag & Drop > 개체 이동 인터페이스

absolute

ex55_css

드래그 앤 드랍 relative

ex56_css

드래그 앤 드랍 absolute2

ex57_css

드래그 앤 드랍 relative2

ex58_css

상자 크기 조절

ex59_css

상자 회전

ex60_css

메뉴 이벤트

const item = document.querySelectorAll("#menu > img");
let olditem = null;

for (let i = 0; i < item.length; i++) {
  item[i].onclick = () => {
    if (olditem != null) {
      //메뉴 1개가 열려있다.
      olditem.style.transform = "translate(0px, 0px)";
    }

    if (event.target != olditem) {
      event.target.style.transform = "translate(0px, 90px)";
      olditem = event.target;
    } else {
      event.target.style.transform = "translate(0px, 0px)";
      olditem = null;
    }
  };
}

ex61_css

슬라이드 이미지

const list = document.getElementById("list");
const sel1 = document.getElementById("sel1");

let dist = 0;

sel1.addEventListener("change", () => {
  // alert(sel1.value);

  list.style.transform = `translate(-${sel1.value * 250}px, 0px)`;
});

// 숫자키 입력
window.onkeydown = () => {
  list.style.transform = `translate(-${
    (event.keyCode - 49) * 250
  }px, 0px)`;
};

ex62_css

배경 이미지 조작

const puma = document.getElementById("puma");
x = 0;
let y = 0;
let timer = 0;

puma.onclick = () => {
  if (timer == 0) {
    timer = setInterval(() => {
      x -= 512;
      if (x < -512 * 3) {
        x = 0;
        y -= 256;

        if (y < -256) {
          y = 0;
        }
      }
      puma.style.backgroundPosition = `${x}px ${y}px`;
    }, 100);
  } else {
    clearInterval(timer);
    timer = 0;
  }
};

ex63_css

영역별 밝기 조절

//스크롤 이벤트
window.onscroll = () => {
  if (window.scrollY > 1500 && window.scrollY <= 2500) {
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
  } else {
    document.body.style.backgroundColor = "white";
    document.body.style.color = "black";
  }
};

토이 프로젝트

로그인 했을 때 Auth에 로그인 한 사용자의 id를 저장하는 기능을 만들었다.

로그인, 아이디 검색, 비밀번호 수정 시 조회하려는 회원이 탈퇴한 회원인지 확인하는 작업을 추가했다. 탈퇴한 회원은 해당 기능을 할 수 없게 설정했다.

알고리즘

프로그래머스의 폰켓몬 문제를 풀었다. map과 set으로 풀어보았다.

황은하

차근차근 하나씩

이전 포스트

TIL 23.10.11

다음 포스트