728x90 반응형 HTML24 [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/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. [HTML/CSS] CSS로 마름모 모양 텍스트박스 만들기 마름모 이미지를 불러와서 사용하는게 제일 간단하지만 나처럼 굳이 CSS로 만들고싶다!하는 경우 CSS border, ::after 속성 등을 이용해서 마름모 모양을 만들 수 있음 See the Pen pure CSS diamond-shaped text box by nah (@wimmwell) on CodePen. 마름모 크기를 변경하고싶다면, 50px이 들어간 값들을 다른 숫자로 바꾸면 된다. 내가 마름모 이미지를 안불러오고 굳이 CSS로 구현한 이유는 텍스트가 들어간 이미지를 불러오면 반응형으로 크기 변동 시 글씨가 다소 깨져보이고 이미지를 최소한으로 사용하고싶기때문이다. 2022. 12. 23. 이전 1 2 3 다음 728x90 반응형
