728x90 반응형 웹퍼블리셔30 [HTML/SCSS] CSS로 ON&OFF 온/오프 스위치 만들기 (input 체크박스) input[type="checkbox]를 통해 만든 온/오프 스위치 :checked가 되면 CSS 변화가 일어난다. See the Pen ON & OFF Switch using input:checkbox by sel (@wimmwell) on CodePen. 2023. 2. 7. [HTML/SCSS/JS] 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. [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/CSS] :has() selector를 활용한 투명 카드 CSS Codepen에서 :has 챌린지가 뜨길래 :has 셀렉터를 이용한 코드를 만들어봤다. 요소:has() 셀렉터는 그 요소에 특정 하위 요소가 있는지를 찾는다. 태그로 찾을 수도 있고 ex) :has(+p) 클래스 이름으로 찾을 수도 있다 ex) :has(.inner__text) MDN에 좋은 예제가 있으니 참고하면 좋다. https://developer.mozilla.org/en-US/docs/Web/CSS/:has :has() - CSS: Cascading Style Sheets | MDN The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argu.. 2023. 1. 11. [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] Select 박스 옵션 타이틀 항목 나타내기 셀렉트 박스에 옵션값을 입력하면 첫번째 옵션이 셀렉트박스에 노출이 된다. 예시 7일 3개월 1년 첫 옵션값 대신에 옵션들의 타이틀을 입력하고 싶은 경우 옵션에 disabled hidden selected 속성을 이용하면 된다. 옵션이 숨겨지고 선택 불가능한 상태로 활성화된다. 예시 구독 기간 7일 3개월 1년 코드 구독 기간 7일 3개월 1년 2023. 1. 2. [HTML/CSS] 입력되는 텍스트 길이에 따라 자동으로 높이가 늘어나는 textarea textarea는 속성에서 rows나 cols로 열과 행의 크기를 정할 수 있습니다. textarea 하지만 지정된 크기보다 텍스트가 많이 들어가면 세로 스크롤이 생깁니다. textarea 우측 모서리의 도구를 사용하여 resize 가능하지만 이 사실을 모르는 사용자가 있을 수 있습니다. 입력하는 텍스트 양에 따라 textarea가 자동으로 맞춰지면 훨씬 보기 좋고 편할텐데! 구글링 해서 찾았다. 자동으로 높이를 조절해주는 코드입니다. See the Pen Easiest Autogrowing Textarea by Chris Coyier (@chriscoyier) on CodePen. https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ 2022. 12. 29. [HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 마우스 오버 시, 원이 퍼지는 효과를 주는 코드이다. See the Pen circle animation on hover by nah (@wimmwell) on CodePen. 2022. 12. 29. [HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기 이미지를 반응형으로 사용할 때, 하나의 이미지를 사용하는게 가장 이상적이다. 하지만 모바일 크기에서는 너무 작게보이는 경우에는 모바일버전 이미지를 따로 만드는 경우가 있다. 하지만! 모바일 사이즈의 너비는 한정적인데 가로로 길어야만 하는 이미지가 있다. 예를 들면 가로로 긴 지하철 노선도같은 가로 이미지말이다. 그럴 경우에 나는 가로로 스크롤이 가능하게 박스를 만들어준다. 표도 아무래도 가로로 긴 경우가 많다. 그럴 경우 td 태그를 inline으로 처리하여 줄넘김을 할 수도 있지만 자주 사용하지 않는다. 긴 표의 경우에도 가로 스크롤 박스를 만들어 텍스트가 아래 이미지처럼 가독성 떨어지게 쪼개지지않은 상태에서 볼 수 있게 해준다. See the Pen Untitled by nah (@wimmwell) .. 2022. 12. 23. 이전 1 2 3 4 다음 728x90 반응형
