본문 바로가기
728x90

Front-end/Javascript12

[HTML/Javascript] 간단하게 만드는 0.5단위 별점 인풋 input[type="range"] 개인프로젝트 웹에 별점 기능을 추가하려고 Star rating 예제를 찾다가 직접 만들었습니다검색하면 흔히 나오는 label과 input[type="radio"]를 쓰는 방식은 HTML 코드가 너무 길었고,챗지피티한테 간단한 코드를 부탁했더니 HTML은 간단한 반면에 동작 스크립트가 장황했습니다동작 방식이 마음에 들지 않았어요 내가 원하던 이 UI는 위 방식들로 하는 게 맞지만 뭐 정형성을 좀 벗어나면 어떤가~ input range 타입을 step 0.5로 쓰면 별점 0.5 단위로 매길 수 있고, 서버에 값 넘기기도 쉽고, 동작 방식도 단순할 거라 코드펜에서 토독토독 만들어 봤습니다 코드펜 예제See the Pen Simple input star rating by S.KIM (@wimmwell) on.. 2025. 10. 14.
[Javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다. 완성본 dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.appendDots: '.slick--visual__paging',customPaging: function (slider, i) { return ''+(i + 1.. 2023. 8. 4.
[Javascript] 버튼 클릭하면 클립보드로 텍스트 복사하기 (-를 제외하고 숫자만) 폰 번호나 계좌번호 등 하이픈이 들어가는 숫자 텍스트에서 '-'를 공백으로 대체하고 복사하는 코드 var textToCopy = $(this).text().replace(/-/g, "");See the Pen copy to clipboard by sel (@wimmwell) on CodePen. 2023. 7. 27.
[HTML/Javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다.자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의 출.. 2023. 6. 24.
[CSS/Javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다.&.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22.
챗지피한테 코딩 도움 받기 - 자바스크립트 간결하게 하기 자바스크립트로 change 이벤트를 구현했는데 아무리 생각해도 이 코드는 불필요하게 길었다.제이쿼리면 $(this)로 값을 받아오면 되는데 자바스크립트로 어떻게 하더라? 알듯 모르겠음 답답함코딩하수의 슬픔: 분명 이 코드가 장황하고 기능이 굴러가기만 하는 수준인걸 알고있음 근데 나은 답을 모름그래서 구글링을 하다가 갑자기 chatGPT가 떠올랐음. 똑똑한 얘라면..! 도와줄것같아 const input1 = document.getElementById('bar_bg');input1.addEventListener('change',()=>{ const customScBg = input1.value; document.querySelector('.box').style.setProperty('--scbg', cu.. 2023. 4. 18.
[Javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard 자바스크립트를 이용하여 텍스트 복사 버튼을 구현해보자 function copy(id){var r = document.createRange();r.selectNode(document.getElementById(id));window.getSelection().removeAllRanges();window.getSelection().addRange(r);document.execCommand('copy');window.getSelection().removeAllRanges();} 위 copy 함수를 onclick 이벤트에 넣어 실행해주면 된다.(id)에 복사하려는 대상 요소의 id를 넣어주면 된다.안녕하세요텍스트 복사"안녕하세요"가 복사될 것이다. codepen 코드See the Pen Copy Text to.. 2023. 2. 22.
[HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다. 닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ 클래스를 통해 영역을 left -100%에서 0%로 주면 슬라이드 된다. 여기에 transiton을 적용해면 자연스럽다. 닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다. 그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다. SCSS 왕편함! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4p.. 2023. 2. 16.
[HTML/SCSS/Javascript] Spliting.js 및 transformation 연습 이 것의 주제는 무엇인가나도 알 수 없다해리포터 신문지 보고 문득 움직이는 신문지를 만들고싶어져서 시도해봤다.HARRY POTTER 부분은 SVG로, UNDESIRABLE은 Splitting.js로, No.1 부분은 이미지로 마크업해 각각 애니메이션을 주었다.신문지에 마우스를 오버하면 타이틀에 matrix3D transformation이 일어남Splitting.js는 Codepen의 Shaw라는 분의 코드를 활용했다.이미지는 그냥 늘어지다가 사라지며, 바디 배경이 바뀌고 커서에 해리포터 이미지 url을 넣었다. 정말 이것저것 해본 잡스러운 애니메이팅 연습ㅋㅋㅋㅋㅋSee the Pen splitting.js practice by sel (@wimmwell) on CodePen. 2023. 1. 30.
728x90

티스토리툴바