• input tag (속성:inputmode, pattern) html <input type="text" inputmode="numeric" pattern="[0-9\-]*" placeholder="숫자와 하이픈 입력 가능"> 표현 예시 <input type="text" inputmode="numeric" pattern="\d*" placeholder="숫자만"> <input type="text" inputmode="numeric" pattern="[0-9]{6}" placeholder="생년월일 yymmdd"> <input type="text" inputmode="numeric" pattern="[a-zA-Z]*" placeholder="영문 대소문자만"> <input type="text" inputmode="numeric" pattern="[a-zA-Z\s]*" placeholder="영문 대소문자 공백"> <input type="text" inputmode="numeric" pattern="[a-zA-Z\s]*" placeholder="영문 대소문자 공백"> <input type="text" inputmode="numeric" pattern="(010)-\d{4}-\d{4}" placeholder="010-0000-0000">
• input checkbox radio html <div class="labskin"><input type="radio" name="_rad" id="_rad1_1"><label for="_rad1_1">KOR</label></div> css .labs {display: flex;flex-wrap: wrap;margin: -5px -10px;} .labs .labskin {margin: 5px 10px;} .labskin {position: relative;} .labskin input {position: absolute;top: 0;left: 0;opacity: 0;} .labskin label {font-size: 17px;color: #555555;letter-spacing: -1px;line-height: 22px;} .labskin input[type=checkbox] + label {padding-left: 20px;position: relative;} .labskin input[type=checkbox] + label:after {display: block;content: '';width: 15px;height: 15px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 50%;left: 0;transform: translateY(-50%);} .labskin input[type=checkbox]:checked + label:after {border-color: var(--color);content: '\e116';font-family: 'axicon';font-size: 12px;color: var(--color);text-align: center;line-height: 13px;text-indent: -1px;} .labskin input[type=radio] + label {padding-left: 20px;position: relative;} .labskin input[type=radio] + label:after {display: block;content: '';width: 15px;height: 15px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 50%;left: 0;transform: translateY(-50%);border-radius: 50%;} .labskin input[type=radio]:checked + label:after {border-color: var(--color);} .labskin input[type=radio]:checked + label:before {display: block;content: '';width: 7px;height: 7px;position: absolute;top: 50%;left: 4px;transform: translateY(-50%);border-radius: 50%;background: var(--color);}
• html5 video tag 정지, 재생, 처음부터 재생 시키기 1 [사이트] 글 퍼왔습니다. jquery // slide 이동시 video 컨트롤 $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){ // video 요소를 만듬 var $video = $('#visual_video')[0]; // 동영상이 있는 슬라이드에 도달하면 동영상 첨부터 재생 (2번 슬라이드) if (currentSlide == 2) { $video.play(); // slick auto play 일시 중지함 // code ... } else { $video.pause(); $video.currentTime = 0; // slick auto play 재작동함 // code ... } }); html <video oncontextmenu="return false;" autoplay muted loop playsinline> <source src="<?=DIR?>/files/momt_video.mp4" type="video/mp4"> </video>

• 1