728x90 반응형 코딩24 [CSS] 스크롤바 scrollbar CSS 스타일링 수정하기 스크롤바는 스크롤바의 부모 요소::-webkit-scrollbar {}를 통해 수정할 수 있다. 예를 들어 페이지 전체의 스크롤바면 body::-webkit-scrollbar{}이다. 스크롤바 선택자는 세부적으로 ::-webkit-scrollbar — 스크롤바 전체. ::-webkit-scrollbar-button — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표). ::-webkit-scrollbar-thumb — 드래그할 수 있는 스크롤 손잡이. ::-webkit-scrollbar-track — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄). ::-webkit-scrollbar-track-piece — 손잡이에 의해 덮이지 않은 트랙(진행 표.. 2023. 4. 20. [ChatGPT] 챗지피티한테 코딩 시키기 - 탭 메뉴 https://chat.openai.com/ 챗지피티야 tabs 코드 만들어줄래? chatgpt: 물론이지 HTML, CSS, JAVASCRIPT 나눠서 코드 복사까지 가능하게 나온다. 이 코드를 코드펜에 그대로 복붙해봤다. 완벽하진 않지만 잘 작동한다. 세상 참 좋아졌다. AI가 코딩도 대신 해주고.... 이러다 내 직업 없어지는거 아냐ㅠㅠ? See the Pen Tabs by ChatGPT by sel (@wimmwell) on CodePen. 그런데 말입니다 이 코드 W3SCHOOL에 나와있는 탭 코드랑 일치함 https://www.w3schools.com/howto/howto_js_tabs.asp How To Create Tabs W3Schools offers free online tutorial.. 2023. 4. 19. [HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18. [javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard 자바스크립트를 이용하여 텍스트 복사 버튼을 구현해보자 function copy(id) { var r = document.createRange(); r.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(r); document.execCommand('copy'); window.getSelection().removeAllRanges(); } 위 copy 함수를 onclick 이벤트에 넣어 실행해주면 된다. (id)에 복사하려는 대상 요소의 id를 넣어주면 된다. 안녕하세요 텍스트 복사 "안녕하세요"가 복사될 것이다. codepen 코드 See the Pen C.. 2023. 2. 22. [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. 이전 1 2 3 다음 728x90 반응형
