# 기능소개 1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능) 2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기 3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경 4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경 5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기 😉최종코드는 하단에 첨부 1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 setOpen(!open); 간단하게 온클릭시 보통 이렇게 많이 한다. 하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다. 이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다. 1> inde..
#배열 /* #배열선언 const 배열 = new Array(); 배열[0] = '값'; #배열 리터럴 표현식 const 배열 = ['값','값1']; 배열[0] 키(인덱스) = 값 (value); map - 배열에서 새로운 배열을 만듬 filter - 배열에서 골라내기 */ //배열선언방식 const array = new Array(); array[3] = 1; //4번째자리 1 array.push("뒤"); array.unshift("앞"); array.shift(); array.pop(); console.log(array); /* 배열 추가 삭제 https://gent.tistory.com/295 array.push('뒤'); // 배열의 끝에 요소를 추가 array.unshift('앞'); // ..
#이미지맵 1.img의 usemap과 map의 name과 id를 일치시켜준다. 2.shape="속성값"은 영역의 모양을 의미한다. - react : 직사각형(왼쪽 상단 좌표와 오른쪽 하단 좌표) - circle : 원형 모양(원중심의 좌표와 반지름을 지정) - poly : 형 영역(다각형의 가장자리의 좌표를 지정) - default : 전체 영역 3.coords="정의"는 영역의 좌표를 의미한다. -이미지 맵의 좌표의 경우 그림판에 이미지를 띄운후 쉽게 확인 가능하다. *간단하게 좌표 확인하기 www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to..
