오식랜드

어떨 때 쓰면 좋을까 Image Lasy loading 구현할 때 Content Lasy loading 구현할 때 Infinite scrolling 구현할 때 화면에 보이는 요소 에니메이션 처리할 때 구문 const observer = new IntersectionObserver(callback, options); 메서드 observe, unobserve, disconnect 메서드를 주로 사용하게 된다. observe(targetElement): 타겟 엘리먼트에 대한 관찰을 시작할 때 사용합니다. unobserve(targetElement): 타겟 엘리먼트에 대한 관찰을 멈출 때 사용합니다. disconnect(): 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용합니다..

// 모든 value값을 true로 변경 Object.entries(객체).forEach(([key, value]) => { 객체[key] = true; });

var em = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i, pw = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[~!@#$%^&*()+|=])[A-Za-z\d~!@#$%^&*()+|=]{8,20}$/; // 옳게 썼으면 true, 아니면 false // 잘못썼을시, 경고창 띄우기 if(!em.test(이메일)){ return alert('이메일을 정확히 입력해 주세요.') } if(!pw.test(비밀번호)){ return alert('비밀번호는 8~20자 사이의 영문 대소문자, 숫자, 특수문자 중 3가지 이상 혼용하여 입력해 주세요.') }

input[type='radio'], input[type='radio']:checked { appearance: none; width: 20px; height: 20px; border-radius: 100%; margin-right: 0.1rem; } input[type='radio'] { background-color: white; border: 2px solid gray; } input[type='radio']:checked { border: 7px solid red; }

accent-color를 사용하면 된다! input[type=checkbox]{ accent-color: #e90b73; } input[type=radio]{ accent-color: #e90b73; } input[type=range]{ accent-color: #e90b73; } input[type=progress]{ accent-color: #e90b73; }

select box에서 select, option에 text-align: center를 걸어보아도 아무런 변화가 없다! 그땐 text-align-last를 같이 사용해주면 된다! text-align-last: center; text-align: center; -ms-text-align-last: center; -moz-text-align-last: center;