input에 데이터를 입력을 받을때, 해당 코드 포맷에 맞추어 입력해줘야하는 요구가 있었다. 디테일한 요구조건 1. 숫자만 입력 2. {0000 0000} 포맷 3. max 8자 HTML 해당 코드를 입력해주세요. (EX : 1234 5678) JS $('#code').on('input', function(){ var thisVal = $(this).val().replace(/\s|\D/g, ''); thisVal = thisVal.replace(/(\d{4})\B/g, '$1 '); thisVal = thisVal.substr(0,9); $(this).val(thisVal); }); CSS #code{margin-top:10px; display:block;} 문자를 입력받게되면 빈값으로 치환했고 그 다..
void 0 이란? 라이브러리 코드를 학습하던 중에 이런 코드를 발견했다. if(params === void 0){ } void 0이 뭐지? 검색해 본 결과 void는 javascript의 연산자이고 항상 undefined를 반환한다고 한다.void 0, void 'hello' 등 전부다 undefined를 한다. 그럼 왜? undefined를 안쓰고?if(params === undefined){ } 첫번째로는 undefined는 항상 undefined가 아닐 수도 있다는 얘기다.var undefined = 'hello'; console.log(undefined);// hello 그리구 짧아서 브라우저로 전송되는 바이트 수를 줄일 수 있고 관용적이라고 한다. MDN링크https://developer.mo..
클릭 -> 스크롤 이동을 구현해보도록 하겠다. scrollintoview()를 사용하면 간단하다. HTML 클릭하세요 box1 box2 box3 box4 box5 box6 box7 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. 박스6입니다. 박스7입니다. 클릭하여 이동할 수 있게 버튼을 만들어준다. CSS body,div{ margin:0; padding:0; } div{ display: flex; align-items: center; justify-content: center; } .box1{ background-color:red; } .box2{ background-color:orange; } .box3{ background-color:yellow; } .box4{ backg..
자동으로 연도 변경하여 삽입하기
자동으로 연도 변경하여 삽입하기 사이트 하단에 회사 '창립 년도 ~ 현재 년도' 까지 적어두는 부분을 많이 봤을 것이다. 기업들이 보통 많이 작성해두는데, 수동으로 작성하는 곳은 없으리라 믿는다. 캡쳐 : 삼성 홈페이지 자세히 보면 이렇게 ↓↓ HTML 2010~자동 값을 넣으려는 곳 id 값을 주었다. JS const _date = new Date();const _year = _date.getFullYear();const thisYear = document.getElementById('thisYear'); thisYear.innerText = _year;id 값으로 변수를 만들어 그 안에 innerText해서 get한 값을 넣었다. new Date(); 가 궁금하면 MDN을 참고하자! https://d..
html만으로 아코디언 메뉴 만들기(details와 summary태그)
html만으로 아코디언 메뉴 만들기 HTML5에 새로 추가된 details, summary 태그만으로 아코디언 메뉴를 제작할 수 있다. 아코디언 메뉴란? 한번쯤은 다들 사용해봤을 것이다. 상단 메뉴가 있고 하단 메뉴는 최초에 숨겨져 있는 상태. 상단 메뉴를 클릭하면 하단 메뉴가 짜잔! 하고 보여지는 메뉴를 아코디언 메뉴라고 한다. 왜? 아코디언이냐고하면 이미지 보면된다. 하여튼 details와 summary를 사용해서 만들어보자. HTML summary가 없으면 타이틀이 '세부정보' html만으로도 가능합니다. 클릭하세요 02 아직 크롬, 파이어폭스만 가능합니다. 태그가 없으면 타이틀이 '세부정보'로 보여진다. CSS section { max-width: 500px;}details { background..