본문 바로가기
반응형

IT/JavaScript , css , html10

[html] custom data attributes (커스텀 데이터 속성) 이란? 이런식으로 태그에 data-가 붙는것이 바로 커스텀 데이터 속성이다.주로 js나 css로 해당 데이터를 연동해 원활하게 정보를 주고받을때 사용하며,html에 추가적인 정보를 넣고 싶을때 활용하거나 UI 상태 관리할때 주로 사용한다.그러나 비밀번호나 개인정보같은 민감한 정보의 경우, json이나 API로 관리하는게 좋다! (보안상 문제가 당연히 있음 !!!!) 이런식으로 html의 li가 있다고 치자.[CSS 사용법]위에서 말했듯이 ui 변경시 자주 사용되는데li[data-num="123"] { display:none;}다른 div data-속성이 있을때div[data-name="divname"] { color: gray;}이런식으로, js와 다르게 html에서 지정한 data-속성이름 대로, 값이.. 2026. 3. 20.
[JavaScript] 특정 조건에 맞는 값을 걸러주는 filter 함수와 map함수의 차이 const 사람들 = [ {name: "A", age: 15}, {name: "B", age: 20}, {name: "C", age: 25}];이러한 배열이 있다구 치자. filter 함수filter는 필요한 값만 걸러주는 함수다.const result = 사람들.filter( 매개변수 => 매개변수.age >= 20 ); 또는const result = 사람들.filter(function(매개변수) { return 매개변수.age >= 20;});filter 는 이런식으로 사용된다.filter는 배열의 갯수만큼 함수를 돌려준다!그러나 돌려줄때마다 들어가는 값도 각각 다르게 들어가며, 해당 조건 필터의 조건에 맞는 값만 새롭게 배열로 생성해준다!그래서 원래 있던 배열에서 값이 줄어들 수 있당그리고 .. 2026. 3. 15.
[JavaScript] 랜덤 함수로 랜덤 이미지 불러오게 하기 (Math.random, Math.floor) 예시로 새로고침 할때마다 새로운 항목이나 리스트, 이미지가 랜덤으로 한개만 뜨게 하는 방법이다.먼저 배열을 만들어주자...img 말고 객체 (여러 아이템)을 나오게 해도 상관없음. 이건 나중에 변형해도 ok.지금은 기본적인 img 경로의 파일 이름만 들어간 배열로만 다룰거임이런식으로 각각 변수에 내가 img 파일에 넣은 이미지들의 이름.확장자명까지 각각 작성해주자.imgElement = document.createElement("img");그 다음에는 img 엘레멘트(img 태그) 를 만들어두자.그리고 랜덤함수를 만들건데Math.random() * 배열.length이렇게 하면 랜덤 변수가 0에서부터 1의 소숫점으로 우다다다 랜덤으로 나온단말임?그걸 이제 내가 현재 가지고 있는 배열의 갯수만큼 곱해주면 그.. 2026. 3. 14.
[JavaScript] date 오브젝트 함수들 관련 설명 (getHours, getSecond, getMinutes) Date 오브젝트는 함수라 뒤에 ()를 붙여 실행시켜주자.new Date();오늘 날짜를 정수의 숫자형태로 불러와준다.요일 / 월 / 일 / 년도 / 시간 / 분 / 초 / 표준시 순서대로 나온다.Date변수.getHours();Date변수.getMinutes();Date변수.getSeconds(); 이 함수들을 쓰려면 먼저 위의 new.Date();를 실행한 값을 변수에 담아 사용해야한다. 이런식으로 date, day, fullyear, mounth는 물론이고 time도 가져올수있다... 본것처럼, getHours()는 10시를 22로 표현한다. 0부터 23시까지를 표현한다. (0은 24랑 다를바x)getSeconds()는 초를 알려주고, 0부터 59초까지 표현 가능하다.getMinutes()는 분을.. 2026. 3. 13.
[JavaScript] 웹 브라우저에 영구적으로 데이터를저장하는 local strorage에 관하여 (setItem, getItem, removeItem) local strorage만료일자와 용량 제한이 있는 쿠키와는 다르게간단히 말해 저장된 데이터를 웹 브라우저에서 직접 삭제하지 않는한 계속 남아있는 데이터다.로컬 스토로지와 비슷하게 세션 스토로지라는것도 있는데이건 웹브라우저를 닫으면 데이터가 삭제되는 데이터다.그와 반대로 로컬 스토로지는 웹 브라우저를 닫든 컴퓨터를 끄든삭제하지 않는 이상은 웹브라우저가 계~속 보관하고있는 셈이다.예시로 사용하는것은웹 브라우저 게임 세이브 데이터다음 접속할때 로그인된 상태 저장인증 토큰 저장장바구니 저장같은 데이터들을 저장하고있다.용량은 5mb정도가 한계인것으로 알고 있음!그리고 중요한 정보는 보안상 여기에 저장하지 않는게 좋다!!(비밀번호나 결제정보라던지..) 로컬 스토로지는 F12를 눌러 개발자 도구를 연 뒤맨 위의.. 2026. 3. 7.
[JavaScript] event 추가, preventDefault , classList (classList.add, classList.remove, classList.toggle) 저번에 사용하던 테스트용 html을 재활용했다. addEventListener 먼저, 자바스크립트는 이벤트를 사용하여 웹페이지상에서 여러 행동과 동작을 실현시킬수 있다.그러면 내가 행동을 추가할 요소에 이벤트를 추가를 해야한다.여기서 끝나는것이 아니라, 일정 시간뒤 이벤트가 실행되게끔 하거나다른 방법으론 이벤트가 일정한 시간대로 계속 반복되게 할 수도 있다.일단 제일 기본적인 방법부터 살펴보자.자바스크립트에서 특정 요소에 이벤트를 추가하려면1. 어떤 요소에 이벤트를 추가할 것인가?2. 그 요소에 무슨 행동이 들어가야하는가? (클릭, 더블클릭, 마우스 올리기, 마우스 벗어나기등등.. )이 꼭 필요하다.여기서 옛날에는 2번 관련해 요소.onClick, 요소.onMouseDown같이 어떤 행동을 할때 이벤트.. 2026. 3. 6.
반응형

티스토리툴바