coding with cong

IN'O Portfolio Make Hardware Soft The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also VIEW MORE *{ box-sizing: border-box; } body{ margin: 0; padding: 0; } div{ width: 100%; } .header{ height: 60px; background-color: rgb(100, 100, 100); color: white; font-size: 1.5em;..

https://summernote.org/getting-started/ Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org

https://sweetalert.js.org/guides/

https://validator.w3.org/#validate_by_uri The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 사이트 주소 파일 직접 입력으로 오류를 검사해줌!

정규식 특정 문자 숫자 매칭 패턴 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두) 단, 줄바꿈 X \d 숫자 \D 숫자가 아닌 것 \w 밑줄 문자를 포함한 영숫자 문자에 대응 [A-Za-z0-9_] 와 동일 \W \w 가 아닌 것 \s space 공백 \S space 공백이 아닌 것 \특수기호 특수기호 \* \^ \& \! \? ...등 \b 63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary) \B 63개 문자에 일치하는 경계 \x 16진수 문자에 일치 /\x61/는 a에 일치 \0 ..

가끔 키보드에서 입력받는 값을 알아야 할 필요가 있음. 키를 누르는 동안 : keydown 키를 누르는 순간 : keypress 키가 다시 올라오는 순간 : keyup 키 값 : event.key, event.code e.type : , e.key : , e.code : e.type : , e.key : , e.code : e.type : ..

star " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,G..

DOM_event : document영역에서 사용되는 이벤트를 정의 마우스, 키보드, 실행 등 이벤트의 종류는 매우 다양 웹에서 사용하는 이벤트를 기준으로 학습하는 것을 추천 사용 시) addEventListener ( 'eventName',callback Function ) 메서드를 사용하여 구현 권장 addEventListener를 권장하는 이유 : 같은 엘리먼트에 여러 이벤트를 중복 부여 가능, 적용된 이벤트를 선택적 제거가능 메서드를 태그 속성이나, 엘리먼트에 직접 부여하는 방식도 있음 == 마우스 이벤트 == 종류 click(), focus(), blur(), input(), change(), mouseover(), mouseout(), select(), scroll(), load(), drag..

classList속성 element.classList : class 속성의 값은 여러개가 올 수 있으므로 list의 형태로 리턴받음 리턴 타입은 TokenList(리스트의 개수) 즉, 객체이기 때문에 별도의 메소드 사용이 가능! 대표적인 메서드 : add(), contains(), toggle(), remove().. 다른 메서드들은 사용도가 낮음 == 사용 == li1 li2 li3 const ul = document.getElementsByTagName('ul'); console.log(ul); //HTMLCollection(1) console.log(ul[0]); // console.log(ul[0].classList); //DOMTokenList(3) -> ul, list, iter console..

Element의 attribute(속성) 1. 태그의 속성 1. 태그가 갖는 속성이기 때문에 속성명을 그대로 사용 tagName.id , tagName.src 2. class 처럼 여러개의 값을 가질 수 있는 경우, 별도의 속성명을 사용 tagName.classLIst const imgTag = document.getElementById('imgTag'); //img태그의 속성들 id, src, alt, classList 콘솔에 찍어보기 console.log(imgTag.id); //imgTag console.log(imgTag.src); //http://127.0.0.1:5500/image/%ED%86%A0%ED%86%A0%EB%9D%BC.png // 이름이 한글이라 깨짐 = 영어로 저장하는 것을 추천..