# toggle

32개의 포스트
post-thumbnail

tool-box 의 toggle 기능

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

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

토글 버튼으로 나이트모드 구현하기

if문을 이용한 토글버튼 구현과 jquery를 이용한 코드 정리까지

2022년 4월 22일
·
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개의 댓글
post-thumbnail

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개의 댓글
post-thumbnail

Toggle Switch(React)

w3school에 들어가면 'How to create a toggle switch'라는 글이 있다. react로 만들기 전 이 글을 참고하며 기능구현을 고민했다.HTML : w3school에는 rounded 버전과 rectangular 버전이 있었다. 라운드를 참고해

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

Toggle button with styled-components

토글 버튼을 그려봅니다. 구조는 Container └ InnerContainer (position : relative ) └ ToggleCircle (position : absolute ) 로 구성합니다. transition 무빙 이펙트를 사용하기 위해서는 특정

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

[JavaScript study] 기초2

JavaScript 학습

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

영화 예약 서비스

movie_seats영화를 클릭하고 좌석을 클릭하면 클릭된 좌석이 표시되고 그와 함께 영화 티켓의 값도 표시된다.그리고 localStorage를 사용하기 때문에 새로고침해도 정보가 그대로 남아있다.main.jsApp.jsmovieContainer.jsresults.js

2021년 11월 14일
·
0개의 댓글
post-thumbnail

간단한 과제(toggle로 커서유지)

우선 글자를 클릭할때마다 색깔이 바뀌게 했다. css 파일안에 몇가지 변화를 추가했다. 첫번째로, pointer클래스를 추가하고 그안에 커서를 올릴때 커서모양으로 바뀌는 효과를 추가했다. 또한 컬러가 바뀔때 서서히 바뀌게 하는 효과도 추가하고 , clicked 라는 클

2021년 11월 10일
·
0개의 댓글
post-thumbnail

라디오 버튼 세가지중에 한가지씩만 선택하는 기능 구현

3개의 라디오 버튼이 있다. 비활성화, 활성화된 버튼 모두 이미지로 되어 있다.하나만 클릭했을때 나머지 두개는 비활성화 되어 있다.처음엔 input radio 타입의 버튼으로 코드를 짰다.backgroun-color가 바뀌는 방법으로 로직을 짜니까 클릭시 흰배경 없이

2021년 11월 9일
·
0개의 댓글
post-thumbnail

라디오버튼 이미지로 토글 만들기

내용 클릭했을때 활성화된 이미지 버튼으로 바뀐다 둘중에 하나만 활성화됨 결과 코드 설명 onClick이벤트가 발생하면 handleClickAdmin을 실행하고 setInputStatus으로 false->true로 바꿔줌 click이 true로 바뀌면서 show가 t

2021년 11월 8일
·
0개의 댓글
post-thumbnail

[JS] 2. Event Handling

JS에서 document를 불러오는 것부터, 웹사이트에서 발생하는 다양한 이벤트를 처리하는 것까지.

2021년 10월 30일
·
0개의 댓글

Jetpack Compose : remember, mutableStateOf

메모리에 로컬 상태를 저장한다mutableStateOf() 에 전달된 값이 업데이트 될 때마다 이 state를 사용하는 컴포저블과 하위 요소는 재구성(recomposition) 한다.장문의 텍스트를 ellipsis로 숨겼다가 보여주는 토글 버튼 만들기.boolean 값

2021년 10월 30일
·
0개의 댓글
post-thumbnail

[JS] Document object, querySelector, Event

document : Html에 대한 모든 것을 js로 보여준다. 접근할 수 있는 html객체. 나의 website. 모든 것들은 document에서부터 시작한다. document object를 이용하여 html을 변경할 수 있다.ex)이 코드를 통해 이 문서의 제목이

2021년 9월 29일
·
0개의 댓글
post-thumbnail

[JavaScript] add와 remove를 한번에! toggle 메서드

자바스크립트 dom에 대해 공부하다가 아주 유용한 메서드를 발견하였다.그건 바로 toggle 메서드이다. add()와 remove()가 합쳐진(?) 개념의 메서드이다.일단 위 코드는 title이라는 id를 가진 태그가 클릭 되었을 시 clicked이라는 클래스를 해당

2021년 8월 8일
·
0개의 댓글