반응형 Font-End40 글자수 count 만들기, textarea 최소 글자수 설정 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 해당 포스팅은 Textarea 에서 최소 길이의 입력을 설정하고 해당 길이 이상일 경우에만 버튼이 활성화가 되는 코드를 만드는 코드를 다룹니다. 조건 1. textarea 에 입력사항은 띄어쓰기를 포함해 총 100 글자 이상이어야 한다 2. 현재 몇 글자인지 표시해야한다 3. 100 글자 이상, 이하에 대한 판단하기 쉬운 시각적 표현이 있어야 한다 4. 100 글자 이상일 시에만 저장 버튼이 활성화 되어야 한다 5. reset 버튼을 누를 시 textarea와 count가 초기화 되어야 한다 [textarea 에 변화가 있을 시 적용하는 코드] $('textarea').on('input', fu.. 2024. 1. 27. 모바일에서의 input 번호 입력 ui 바꾸기 우리는 input 을 만들 때에 의 문구로 입력을 처리하는 경우가 있다. 하지만, 핸드폰으로 입력을 할 때에 가끔은 전화를 걸기 위해 핸드폰에서 번호키를 입력하는 ui 가 더 나을 때도 분명히 있다. 예를 들어, 인증번호를 입력할 때에 숫자 4자리를 입력하는 경우, 혹은 내 핸드폰 번호를 입력하는 경우 등은 일반적인 쿼티 키보드 말고, 숫자 번호 입력판이 나오는게 훨씬 더 편한 ui 라는 것은 사용을 해보면 금방 느낄 수 있다. 숫자로만 이루어진 코드를 입력하는데에 있어, 굳이 왼쪽과 같이 키보드 배열이 나와 입력마다 숫자 변환키를 눌러 하는 비효율적인 방식을 택할 이유는 없다고 봅니다. 우측의 ui 는 취지에 맞게 입력을 숫자만 가능하고, 숫자를 입력하기 편한 ui 로 만들어 보았습니다. 일반적인 왼쪽.. 2024. 1. 22. Firebase 커스텀 도메인 추가하기 이전 포스팅에서 도메인을 구매하는 방법에 대해서 다루었습니다. 이번에는 구매한 도메인을 실제로 호스팅에 연결해 보는 포스팅을 남겨보겠습니다. 도메인을 아직 구입하지 않으셨다면 아래 포스팅을 참고해주세요 https://kyurasi.tistory.com/entry/%EB%8F%84%EB%A9%94%EC%9D%B8-%EA%B5%AC%EB%A7%A4%ED%95%98%EA%B8%B0-%EA%B0%80%EA%B2%A9-%EB%B6%80%ED%84%B0-%EB%B0%A9%EB%B2%95-%EA%B9%8C%EC%A7%80-%EC%97%B0-%EB%A7%8C%EC%9B%90%EB%8C%80-%EB%8F%84%EB%A9%94%EC%9D%B8 도메인 구매하기 - 가격 부터 방법 까지. 연 만원대 도메인 오늘은 작업중인 프.. 2023. 11. 30. [프론트엔드] 유용한 무료 데이터 시각화 플러그인 오늘은 쉽고 빠르게 데이터 시각화를 할 수 있는 몇 가지 툴들에 대해 포스팅 해보려 합니다. 파이썬의 내장 기능처럼 데이터를 시각화 하는 것들에 비새서는 js에서 바로 시각화 하기에는 완성도가 떨어지기에, 플러그인을 사용하겠습니다 웹사이트를 제작해주다보면 고객에게는 어떤 ui로 편하게, 기대하는 기능들에 더 쉽고 빠르게 접근을 하는 것이 관건이라면, 관리자에게는 현재 데이터들을 한 눈에 볼 수 있는 것이 중요합니다. 사용자의 수가 어떻게 늘고 있는지, 수익이 어떻게 변하고 있는지, 어느 지역의 사용자가 가장 많은 지 등에 대해서 알아봐야 하겠죠. 이러한 데이터 시각화는 마케팅에 대한 효과를 보는데에 도움이 많이 됩니다. 그리고 개발자의 기능 배포 이후 어떻게 변화하는지도 수치로 나중에 활용하기에도 정말 .. 2023. 8. 18. 지도 삽입하기 (html 구글지도 iframe) 웹사이트를 운영하다보면 현재의 위치를 맵으로 보여줘야 하는 때도 생기게 됩니다. 정말 간단하지 빠르게 사용하세요 1. 구글지도 페이지로 이동 https://www.google.co.kr/maps/?hl=ko Google 지도 Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다. www.google.co.kr 2. 주소 검색 후 share 클릭 3. 복사된 iframe 곧바로 사용 혹시나, 마우스 휠을 막고 싶다 하시면 scrolling="no" 이 옵션을 넣으시면 됩니다 2023. 7. 18. 웹에서 Apple 소셜 로그인 기능 만들기 저는 Rails 라는 프론트앤드 프레임워크를 사용하고 있고, 이로 인해 앱 내 상세한 코드 설정은 다를 수 있으나, Apple Developer 페이지에서 기본 설정하는 부분들은 동일하니, 그 부분까지만 참고해 주시면 더욱 도움이 되실 줄 안내드립니다. 진행하기에 앞서 아주 중요한 점 하나 짚고 갈게요! 애플 로그인을 구현하려면 반드시! 매년 구독비를 지불해야 합니다. 매년 99달러나! 그러므로 여기서 비용의 문제로 더 이상 진행을 할 생각이 없는 분들은 뒤로가기를 눌러주셔도 됩니다 Apple 로그인 공식 문서 https://developer.apple.com/sign-in-with-apple/ Sign in with Apple - Apple Developer Sign in with Apple makes.. 2023. 3. 22. html input text 숫자만 받기, 글자수 제한하기 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. maxlength="3" ➡️ input text의 최대 입력 클자수는 3글자로 설정 oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" ➡️ 입력을 하는 순간 입력된 입력된 값을 확인하여 0~9인 순간에만 입력되게 합니다 2023. 1. 15. div onclick 으로 class 를 추가, 삭제하기 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드 jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드 .toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있 www.codingfactory.net jquery를 사용하기 위해서 jqu.. 2022. 11. 25. 체크박스로 버튼 활성화 checkbox oncheck enable button, 약관동의 체크박스 만들기 웹개발을 하다보면 회원가입시, 혹은 상품 구매시에 상기 내용을 확인하였는지 질문 후에 동의하는 체크박스를 체크하였을 때에만 버튼이 활성화 되게끔 해야하는 경우가 있습니다. ex) 결제 전 내용 확인 ex) 회원 가입 전 terms and conditions(약관 동의) 체크박스 오늘을 이를 쉽게 할 수 있는 코드를 공유드리려고 해요 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 1. onchange="document.getElementById('submitting_button').disabled = !this.checked;" 체크박스에 변화가 있을 시, submitting_button 이라는 아이디를 가진 element의 disabled .. 2022. 10. 5. html 포인터 변경, 커서 변경 마우스를 가져갔을때 스타일이 바뀌는 것 쯤이야 style 태그 혹은 css 에 쉽게 적용할 수 있습니다. 하지만, 매번 div 하나를 위해 css 클래스를 만들고 :hover 와 같이 작성을 하는 것은 참 귀찮습니다. 그래서 오늘은 div의 style=""태그 안에 사용할 수 있는 onmouseover 효과를 적겠습니다 커서를 적용을 할 때에는, 많은 방법이 있겠지만, 설명드리게 될 방식은 한 번(한 페이지)만 실행될 커서 변경에 대한 코드입니다 아래는 지정할 수 있는 커서들의 목록이에요! auto 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. default 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. none 커서 없음. context-.. 2022. 10. 4. 버튼 클릭시 배경 변경 html button onclick change background image See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. document.getElementById('background-example').style.backgroundImage document 에서 요소의 id 가 'background-example'인 것의 스타일의 backgound-image 를 가져오는 코드입니다. :) js로 html 요소의 css 변경하는 간단한 코드입니다. 이해가 가지 않는 부분은 질문 남겨주세요 :) 2022. 10. 3. HTML checkbox 체크박스 일괄선택(전체선택), 일괄취소(전체취소) See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 오늘은 HTML 파일 내에서 쉽게 전체체크, 전체취소 기능을 만들어 보았어요. JS 로 빼놓은 기능을 script 태그에 넣으셔도 무방합니다. 유의하실 점은, 저는 $태그로 정보를 가져오고 있기에, 위와 같이 jquery 를 cdn 으로 들여왔어요. 성능에 저하가 있거나, 데이터를 많이 잡아먹지 않습니다. 넌무 걱정없이 사용하셔도 됩니다. 더 편한 방법들은 항상 존재합니다 각자의 입맛에 맞는 것을 찾아 연습하면 좋을 것 같아요 :) 2022. 10. 3. 이전 1 2 3 4 다음 반응형
