728x90 JQuery6 [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/jQuery] input에 포커스 되면 value 지우기 input에 포커스가 되면 값을 초기화하는 코드이다. onfocus 이벤트를 통해 쉽게 활용할 수 있다. click이 아닌 focus 이벤트라서 인풋에 클릭을 하거나 키보드를 통해 접근하면 동작한다. 포커스하면 지정한 값을 넣는 이벤트도 같이 넣었다. 화려한 무지개 색의 box-shadow 스타일링도 괜히 해봄,, See the Pen Clear input value on focus by nah (@wimmwell) on CodePen. 2023. 1. 19. [HTML/jQuery] Input[type="text"]에 숫자만 입력하기 input type을 number로 하면 깔끔하게 숫자만 입력이 가능합니다.Number 타입은 키보드 방향 버튼으로 숫자를 변경할 수 있는 장점이 있습니다. 그리고 min값과 max값, step을 설정할 수 있습니다.하지만 단순 수량이 아닌 휴대폰번호, 생년월일 등을 입력할 때에는 input number가 적당하지 않습니다.왠지 모르게 우리 회사에서는 단순 수량 인풋 타입도 number보다는 text 사용을 선호한다. 그래서 작성해 보는input text타입에 숫자만 입력하는 방법 코드펜 예제See the Pen Input[type="text"] number only by sel (@wimmwell) on CodePen. 값이 숫자가 아니면 공백으로 대체하는 방식입니다. oninput: 입력 필드의 .. 2023. 1. 2. [HTML/CSS] background-clip으로 배경이미지 텍스트 만들기 HTML 삽입 미리보기할 수 없는 소스 이걸 뭐라고 설명해야하지? 아무튼 배경 이미지로부터 텍스트 모양대로 클립해서 배경은 감추고 텍스트에만 이미지가 들어가는 코드이다. background-clip:text 속성으로 구현 가능하며, 나는 애니메이션 CSS와 제이쿼리를 이용해 마우스오버시 배경이미지와 텍스트가 바뀌게 응용해봤다. 2022. 11. 29. [jQuery] 디데이 표시하기 (날짜 카운트다운) - The Final Countdown 예제 전에 포스팅한 적이 있는 오픈소스 글https://selinak.tistory.com/3의 9번 소스이다. 얼마전 디데이를 노출하는 홈페이지 퍼블리싱 작업을 하면서 이 소스를 유용하게 써서 아카이빙을 해보려한다. 🎅🎄 2022년 크리스마스까지 며칠이 남았을까요? HTML 삽입 미리보기할 수 없는 소스 위의 소스는 디데이인 크리스마스까지 남은 날짜와 시간을 표시하다가, 디데이가 지나면 Merry Christmas! 문구를 노출합니다. 원래는 로컬 jquery.countdown.min.js를 활용하지만, 나는 편의상 라이브러리에서 가져왔다. 위의 예제가 어렵다면 The Final Countdown에서 제공하는 기본예제를 살펴보자! HTML 삽입 미리보기할 수 없는 소스 2023년 1월 1일까지 남은 시간은?.. 2022. 11. 3. [jQuery] 가로 스크롤 탭 메뉴 만들기 See the Pen Untitled by nah (@wimmwell) on CodePen. 모바일에서 가로 스크롤을 할 수 있다. 2022. 9. 27. 이전 1 다음 728x90
