[작품] - 플로팅 버튼(2)

저번에 만든 플로팅 버튼에 추가 기능을 넣어서 더 완성도 있게 만들어 보았다. 내가 원하는 요구사항에 대해 먼저 설명해보자면! 1. 기존 형태는 원의 형태에서 인원이 추가되면 사각형으로 바꾸게 한다. 2. 메뉴가 추가되면 인원박스 아래에 생기게 되는데 메뉴박스 하나당 메뉴의 개수를 조절할 수 있는 버튼과 메뉴를 삭제할 수 있는 버튼을 생성해 줄 것이다. 1. 인원 추가하기 const number = document.querySelectorAll(".number span"); number.forEach((item,index)=>{ item.addEventListener("click",function(e){ bar.style.borderRadius = "20px"; bar.style.justifyConten..

• format_list_bulleted 졸업작품
• · 2023. 2. 26.
• textsms

[작품] - 마우스로 가로 스크롤 제어하기

졸업 작품을 만들다가 마우스로 가로 스크롤을 제어하는 기술이 필요했다. 처음 만들어 보는 거라서 잊어 버릴 까봐 적어보았다. 먼저 완성된 작품을 보여주면 이렇게 생겼는데 마우스로 오른쪽으로 밀면 오른쪽으로 가고 외쪽으로 밀면 왼쪽으로 간다. 상당히 쉬워 보이지만 막상 할려니깐 css부터 어떻게 제어해야 될지 몰랐다. 그래서 먼저 css 부터 설명하고 js 로 넘어가겠다. 1. css 제어하기 .barlist{ display: flex; align-items: center; width: 82%; height: 70px; margin-right: auto; margin-left: auto; overflow: hidden; margin-top: 30px; margin-bottom: 30px; } overflo..

• format_list_bulleted 졸업작품
• · 2023. 2. 18.
• textsms

[JS] - innerHTML 사용법

졸업작품 제작을 하다가 자바스크립트로 html을 다루는 방법을 까먹어서 다시 찾아봤다. 사실 기본적인 원리는 알고 있지만 내가 하려는 것은 API로 가져온 데이터들을 추출해서 원하는 데이터를 가공해 각각의 요소들을 상황에 맞게 넣고 싶었다. 설명이 잘 안되서 예시를 들어보자면 만약 어떤 버튼을 누르면 div 태그 하나만 추가하는 것이 아닌 여러줄의 뭉텅이 태그를 만들고 싶었다. var div = document.createElement("div"); var txt = document.createTextNode(`음식점${i}은 ${result[i].place_name} 입니다.`); div.appendChild(txt); quickfilter.append(div); 이전까지는 이런 방식으로 해서 태그 하..

• format_list_bulleted Javascript
• · 2023. 2. 8.
• textsms