반응형 Font-End43 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. 스크롤 반응형 헤더, 스크롤 반응형 탭(네비게이션), responsive nav, sticky tab 오늘은 새로운 요청이 있어 진행했던 UI 수정에 대해서 글을 써보려고 합니다. 1. 스크롤을 내리면 잠시 가려지고, 스크롤을 올리면 다시 나타나는 헤더 2. 스크롤을 내리다가 일정 스크롤에 도달했을 때, 그 때 부터 지정 위치에 들러 붙는 sticky nav See the Pen Header hide on scroll, Sticky nav by Junmannn (@Junmannn) on CodePen. 구분을 쉽게 하기 위해 header는 id 로 div에 두어, css 상에서 #header 정리 부분을 보시면 됩니다. sticky는 class로 두어 css 상에서 .sticky 를 보시면 됩니다. 스크롤에 다라 반응하며 보였다 사라졌다를 반복하는 헤더, 위치가 고정되었다가, 움직였다가 하는 방식을 알아.. 2022. 7. 25. 달력 뷰 만들기, fullcalendar 사용하기, 일정 달력 만들기, 캘린더 만들기 The Most PopularJavaScript Calendar - FullCalendar 오늘은 우리가 자주 사용하는 달력 앱들을 웹에 만드는 작업을 해보려고 합니다. 이를 위해 우리는 fullcalendar 이라는 것을 사용할 것입니다. 가장 일반적인 프레임워크인 React, Vue, Angular 전용 방식이 따로 존재하며, 일반적인 HTML에서 곧장 사용할 수 있는 방법 또한 있으니, 천천히 따라해볼게요. 어떤 환경에서도 사용을 할 수 있도록 HTML 에서 태그를 이용하여 캘린더를 사용해 보겠습니다 우리가 만드려고 하는 결과물 이를 사용하는 데에는 다른 라이브러리 처럼 유료버전, 무료버전이 있습니다. 무료버전만 사용해도 캘린더 뷰를 전혀 무리없이 사용을 할 수 있으며, 사용 방법도 간단합니다. F.. 2022. 7. 24. html 숫자 3자리씩 자르기, 단위 붙이기 (만, 억, 조) 앞서 전화번호 입력시, 자동으로 하이픈 (-)을 넣어주는 기능을 만들어 두었었죠. 이번에는 돈에 대해서 문자열 파싱을 하는 기능을 공유할게요. 필요하실 때마다 가져다 쓰세요. 어려운 기능 전혀 없습니다. 그래도, 아직 html 을 변형하는 것이나, js 에 익숙하지 않아 설명이 필요하시거나 질문이 있으시면 언제든 댓글 주세요. See the Pen Untitled by Junmannn (@Junmannn) on CodePen. rails 를 예를 들어 다른 방법을 볼게요. 다른 문법에서도 방법은 동일합니다. 저는 숫자를 문자열로 형변환을 한 후, 3개씩 끊어 콤마(,) 를 추가해주는 방식을 했습니다 number = 123490481239 number.to_s.reverse.gsub(/(\d{3})(?=\.. 2022. 6. 14. Html 전화번호 자동으로 - 하이픈 생성 알아두면 (어디 저장해 놓고 필요시마다 가져다 쓰기) 정말 편한 전화번호 자동 변환 코드 하나 공유드리고 가겠습니다. 괜히 헷갈리시지 않게 기교 없이 코드만 알려드리고 갈게요. 해당 코드는 최소화한 코드로, js 따로 두지도 않고, HTML 상에 입력을 할 때에 ui 도 키보드같은 전체 자판 ui에서 → 핸드폰 숫자패드같이 개선하고 싶다면 아래의 포스팅을 확인해주세요 ~ https://kyurasi.tistory.com/entry/%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C%EC%9D%98-input-%EB%B2%88%ED%98%B8-%EC%9E%85%EB%A0%A5-ui-%EB%B0%94%EA%BE%B8%EA%B8%B0 모바일에서의 input 번호 입력 ui 바꾸기.. 2022. 6. 9. <a> 태그 후 float 스타일 사용시 겹침, div 요소 오른쪽 정렬 1. 나는 버튼을 만들고 있었다. 그리고 해당 버튼을 화면에서 오른쪽 끝으로 보내고 싶어졌다. 버튼에는 를 넣을 생각이다 2. 버튼을 만들고 난 후 분리선을 이용하여 구분을 짓고 싶었다. Write a post 코드로 본다면 float:right -> 요소를 오른쪽으로 정렬을 해라 라는 코드를 분명히 사용을 했습니다. class 는 따로 작업을 하여 자체가 버튼처럼 보이도록 커스터마이즈를 한 상태이고 로 깔끔하게 구분선을 그었는데 아니 그런데 이게 무슨 일인가ㅠㅜ 선이 버튼을 가로질러버렸네요.. 여기서 당황하지 않고 의 style 에 margin-bottom : 20px 도 넣어보고 태그와 태그 전에 을 넣어 줄바꿈도 추가를 해 보았지만 상황만 악화시킬 뿐이었습니다. 여기서 아주 간단한 것으로 모든것은 .. 2022. 5. 17. 모든 국가 정보 가져오는 프로그램 다양한 국가에서 접근을 하는 사이트를 개발을 하다 보니, 회원 가입시 전화번호나 지역에 대한 시간 변경을 해야 해서 유저분들께서 정보 입력 중 국가를 선택할 때에 국가 리스트에는 몇몇 국가가 아닌 전체 국가를 다 가져와야 한다는 정책을 두게 되었습니다. 그렇다면, 이를 위해 db를 따로 파는 것도 비상식적이고, 그렇다고 그 많은 국가와 내용들을 전부 코드로 넣는 방법도 너무 원시적이었습니다. 분명 api로 제공되는 것이 있겠거니 했지만, 더 편한 것이 있었습니다. 대륙, 국가코드, 언어, 국기, 수도 등 여러 정보가 나오는 npm 입니다. 해당 부분 잘 써보시길! https://www.npmjs.com/package/countries-list countries-list Continents & countr.. 2022. 4. 16. js array 특정 필드로 정렬, 자바스크립트 배열 정렬 자바스크립트에서 배열을 일반적으로 정렬은 array.sort 가 있다. 하지만 오늘은 특정 필드를 기준으로 정렬을 하는 방식에 대해서 소개를 해보려고 한다. 가정 : 나의 array에는 여러 필드가 존재하고, 그 중에 data 라는 필드가 있다. : 나는 그 data 필드에서도 name 이라는 필드로 정렬을 하고 싶다. array.sort((a,b) => (a.data.name > b.data.name) ? 1 : ((b.data.name > a.data.name) ? -1 : 0)); return 1 을 하는 경우 : a는 b 뒤에 온다 return -1 을 하는 경우 : a는 b 앞에 온다 return 0 을 하는 경우 : 지금의 정렬 형태를 유지한다 삼항 연산자를 잘 모르는 분을 위해 간단한 예제에.. 2022. 4. 7. html 로만 핸드폰번호 입력받기 (숫자만 입력받기) html only 핸드폰번호 입력받기 전화번호 입력을 받는 도중, 숫자만 받고 싶은 경우가 있다. 하지만 그렇다고 숫자 타입이라고 해서 증가 감소가 함께 있는, 정말 성의없는 입력란을 만들고 싶지는 않다. 그렇다면 그저 다른 키가 눌릴때 처리만 해주면 된다ㅋㅋ 위의 방식은 숫자 이외의 다른 키는 입력이 되지 않도록, 빈 문자로 대체하는 코드이다. 말도 안되게 input type="number" 이렇게 하는 방식은 버렸으면 해요 See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 2022. 4. 6. 자바스크립트 : 클립보드로 복사 버튼만들기 javascript clickHandler() { const el = document.createElement(`textarea`); el.value = "Junmannn"; el.setAttribute(`readonly`, ``); document.body.appendChild(el); el.select(); document.execCommand(`copy`); document.body.removeChild(el); alert('Copied coupon code ! : ' + el.value); } See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 가끔 보면 버튼 하나로 링크 복사하기 혹은 어떠한 글자를 복사하기 등을 볼 수 있을 것이다. 정말 어렵게만 생각했는데, 코드.. 2022. 3. 10. 이전 1 2 3 4 다음 반응형
