html, css

css 체크박스 토글버튼 예제 사이트

https://getcssscan.com/css-checkboxes-examples CSS Scan - The fastest and easiest way to check and copy CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com 체크박스와 더불어 토글 버튼 또는 스위치 버튼 예제도 있음

css 텍스트 컬러 반전 효과

✅ 참고 텍스트와 배경 색상에 겹치는 부분이 반전되는 효과가 있어 찾아보았다. 웹 페이지에 적용하면 세련된 느낌을 주기도 하더라구여 📌 css mix-blend-mode: difference; 간단하게 css로 보여질 수 있었다. css 속성중 mix-blend-mode 를 이용한 효과 포토샵에서 레이어를 이용해 요소들을 효과를 주는 거는 역할과 비슷하게 생각하면 된다. 📌 참고 이외 다른 여러 속성스타일도 있으니 참고 https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode mix-blend-mode - CSS: Cascading Style Sheets | MDN The mix-blend-mode CSS property sets how an el..

a 링크 "#" , void(0) 의미

일반적으로 알고 있는 a태그는 링크를 이동시켜주는 앵커태그 페이지 이동 네이버로 이동 특정 url 값으로 해당 페이지가 이동한다. 스크롤 이동 box 아이디 box로 가기 다른 태그에 작성된 아이디 값을 추가하여 특정 위치로 스크롤을 이동시킬 수 있다. 페이지 전환이 아닌 현재 페이지에서의 위치 이동이다. "#" a태그에 #만 있을 경우 브라우저가 페이지의 맨 위로 이동한다. 그렇다고 href=""를 비워둘 순 없다. 유효성 오류 문제가 있기 때문이다. javascript:void(0) 클릭 void(0) 은 자바스크립트 함수이다. javscript: 뒤는 오는 것을 자바스크립트의 코드로 해석한다. void 안에는 영문, 숫자도 사용이 가능하지만 일반적으로 0 을 사용한다 a 태그의 이동기능을 무력화 시..

[css] video 태그 사용 시 테두리 검정선 숨기기

video { outline: none; border: 0; } 비디오 테두리를 제거 하는 방법으로 비디오 태그 자체에 선택영역을 없애버리기가 있지만 위 방법이 적용 안되는 경우도 있다. video { -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } 추가로 적용하여 해결하였다. https://stackoverflow.com/questions/52508598/html5-video-element-on-iphone-has-border/53779216

[CSS] 국가별 웹 기본 글꼴 (한/영/일/중)

이메일 html 작업을 하던 중에 나라별 기본 웹폰트 적용 글꼴에 대해 알아보았다. 마침 딱 필요한 내용을 잘 정리된 블로그 분께서 올려주셔서 감사하게도 옮겨 기록해보았음 한국어 /* MAC */ body{font-family:'apple sd gothic neo', sans-serif} /* window */ body{font-family:'Malgun Gothic', sans-serif} /** * APPLE SD Gothic Neo는 MAC OS X 및 iOS의 기본 국문 폰트이다 * Malgun Gothic은 window 기본 국문 폰트이다 * sans-serif는 고딕체를 나타낸다. */ 영어 /* MAC */ body{font-family:'apple sd gothic neo', sans-se..

인증번호 입력 input 속성 '메세지에서 가져옴' 알아보기

메세지 앱에서 자동으로 받아온 인증번호를 가져와 키보드 위쪽에 뜨는 부분 영역을 사용할 때 input 에 autocomplete 속성 중 one-time-code를 사용하면 된다 나는 이런게 있는 줄도 몰랐다.. 회사에서 프로젝트를 진행하다 알게 된 사실.. 정말 몰랐던 속성이라 남겨둔다 참고 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete https://daily-dev-tips.com/posts/html-autocomplete-sms-code/

[CSS] Pure-css-custom-input radio

https://moderncss.dev/pure-css-custom-styled-radio-buttons/ Pure CSS Custom Styled Radio Buttons | Modern CSS Solutions Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states. moderncss.dev 오직 css만을 이용해서 inpu radio 커스텀 해봅니다. example https://www.sliderrevolution.com/resources/styling-radio-buttons/ Styling Radio Bu..

pure CSS scrolling shadows

https://codepen.io/mrowa44/pen/xRpMYm/?html-preprocessor=none Pure CSS horizontal scrolling shadows ... codepen.io https://codepen.io/evank/pen/wWbRNO Pure CSS scrolling shadows ... codepen.io https://javascript.plainenglish.io/how-to-create-horizontal-vertical-scroll-shadows-26aa7a7f00a0 How To Create Horizontal + Vertical Scroll Shadows In Pure CSS or with CSS + JavaScript javascript.plainengl..