본문 바로가기
728x90

Javascript10

[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.
[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 C.. 2023. 2. 22.
[Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen 출처 https://www.w3schools.com/howto/howto_js_fullscreen.asp HTML 삽입 미리보기할 수 없는 소스 전체화면을 켜기/끄기 버튼 코드이다. :fullscreen {}을 통해 전체화면일때 적용되는 css를 작성할 수도 있음. Fullscreen with JavaScript 전체화면 켜기 전체화면 끄기 Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method. Note에 적힌대로 IE10 이전버전에서는 해당 기능을 지원하지않는다. 2022. 11. 3.
[React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25.
[Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) 완성본 요새 THREE.JS의 사용법을 익히고 있다. 나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다. 직장인은 안되도 되게 해야한다. three.js의 예제를 뒤져보자 https://threejs.org/examples/#webgl_geometry_cube 그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다. ..이게 아냐 구글링 갈겨~~~ 출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html 발견! three.js 예제.. 2022. 7. 22.
[javascript] 체크박스 클릭으로 selectbox의 disabled 속성 추가/제거하기 input 체크박스를 체크/해제시 selectbox의 disabled 속성이 토글되는 코드이다.체크박스 체크 여부를 확인하는 속성은셀렉터.checked /* 240711 본문 수정*/jQuery -> javascript disabled 속성 제거하기: removeAttribute('disabled');disabled 속성을 disabled로 설정: setAttribute('disabled', 'disabled'); 코드펜 예제 See the Pen Undisable selectbox o checkbox click by sel (@wimmwell) on CodePen.+jQuery에서는disabled 속성 제거하기: removeAttr('disabled');disabled 속성을 disabled로 설정:.. 2022. 4. 25.
728x90

티스토리툴바