# toggle

44개의 포스트
post-thumbnail

[Archives] Toggle

Study_Archives

6일 전
·
0개의 댓글
·

[React] Toggle Component

Toggle 두 가지 상태만을 가지고 있는 스위치 코드

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

자바스크립트 기초 [event 2]

해당 코드 처럼 event를 작성할 수 있다.이렇게 작성할 경우 active class에 오타가 있을 때 오류가 발생할 수 있다. clickedClass를 선언해 오류를 조금 줄 일 수 있으나 기존 클래스가 이미 존재할 경우 해당 class는 없어지고 active cl

2023년 2월 12일
·
0개의 댓글
·

23.1.28[Blog 결국 완성]

항해 이후 34일차

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #061일

아래와 보는 이미지는 reflection 기능을 사용하여 이미지를 반전시켰다.HTMLCSShttps://caniuse.com/ 에서 크로스브라우징이 되는지 버전체크를 한다. 파이어폭스는 지원하지 않는걸 확인하게 된다. 따라서 크로스브라우징이 필요하며 https

2023년 1월 15일
·
0개의 댓글
·
post-thumbnail

[JS 이론] DOM Manipulation - classList

add( String \[, String \[, ...]] )지정한 클래스 값을 추가한다. (여러개 동시 삽입 가능)만약 추가하려는 클래스의 element의 class 속성이 이미 존재한다면 무시한다.remove( String \[, String \[, ...]] )지

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #034일

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식은 하나의 언어라고 할 수 있다. \*정규식 공부하기 좋은 예제 : https://regexr

2022년 12월 4일
·
0개의 댓글
·
post-thumbnail

바닐라JS 챌린지 day 5

1) click event 발생 및 함수 실행 2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter) 3) newColor 변수 선언 4) currentColor 현재 값 확인 5) 조건에 따라 newColor에 "tomato

2022년 11월 29일
·
0개의 댓글
·

[리액트를 다루는 기술] onToggle 함수를 이용하여 TodoList checkbox 관리

App.js에서 id와 일치하는 todo를 찾아 {...todo, checked: true} 변경일치하지 않는 todo는 그대로 두기

2022년 9월 8일
·
0개의 댓글
·
post-thumbnail

[React] Toggle Component 구현하기

👉🏻 toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다. 모달창을 구현하고 나서인지 Toggle 컴포넌트 구현은 비교적 쉽게 할 수 있었다. 다시 정리하며 복습하고자 한다. ✔️ Toggle Switch가 ON 일 때 css, 텍스트 변경✔️ T

2022년 8월 29일
·
2개의 댓글
·
post-thumbnail

JS Mini projects - Toggle Component

toggle 버튼 가져오기Nodelist 를 통해서 Loop 생성 (forEach)click이벤트 생성Toggle the active class on the parent node(.parentNode& classList.toggle())FAQ 작성 뿐만아니라, 토글은

2022년 6월 21일
·
0개의 댓글
·

체크박스 Toggle??

웹 서핑중 팝업창에 '24시간동안 팝업창 띄우기 않기' 체크박스는 어떻게 구현하는걸까? 라는 궁금증에 만들다가 checkbox 옆 글씨를 클릭하면 체크박스 체크 / 해제가 되도록 만들고 싶어졌다.if문에서 체크박스 체크여부를 확인하는 .checked(ture/false

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

Markdown Toggle

Markdown에서 접었다/폈다 하는 toggle을 만들고 싶었다.

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

tool-box 의 toggle 기능

.toggle 기능을 구현하려는데 on/off 의 기준을 잡지 못하여 구현이 어려웠다.tool-box 에 hedden을 추가하고 classList를 활용해 on/off 구현하였다

2022년 4월 30일
·
0개의 댓글
·
post-thumbnail

바닐라 자바스크립트로 토글버튼만들기

바닐라 자바스크립트 연습하는 중 간단한 UI부터 만들어 보는 것을 추천받음.그래서 토글버튼을 만들어봄.HTML은 위와 같다.CSS는 위와 같다.JS는 위와 같다.입문자는 잘 활용하면 좋겠다.나도 초보지만 입문자일 때 이런 코드 직접 짜보려니 어려웠다.

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

[Project-심플다이어리] 리스트 렌더/추가/수정/삭제

배열에 직접 추가하고 삭제하는 것이 아님=> 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함알게된 것props 넘기고 사용하기 (+한단계 더 안에있는 컴포넌트까지 props전달)useR

2022년 3월 22일
·
0개의 댓글
·

[javascript]className & classList & toggle

자바스크립트에서는 html의 class명을 입력 / 수정할 수 있다.h1태그의 문자를 클릭할 때마다 h1태그의 class명을 바꾸는 코드를3가지 방법으로 사용가능하기에 하기와 같이 소개한다.클래스명이 단일값일 경우 사용가능하다.통상 복수의 클래스명을 가져가는 경우가 많

2022년 3월 12일
·
0개의 댓글
·

React toggle switch 기능

저는 react와 styled-componets를 사용하여 toggle button을 구현했습니다.제가 구현한 방법은 hook를 활용해 true/false의 상태에 따라 토글이 변환하도록 해주었습니다.클릭 했을 시 배경색과 글자가 변경되고 토글 안에 있는 원은 애니메이

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

[JS] 내장함수 toggle의 편리함.

같은 팀원 분이 알려주신 내장함수 toggle! 이렇게 간편하게 한줄로 class를 붙일 수 있다니~~

2022년 2월 9일
·
0개의 댓글
·