효니 TIL

마우스 오른쪽 버튼을 클릭하면 Context 메뉴가 나온다. 마우스 오른쪽 버튼 클릭 시, Context 메뉴가 뜨지 않도록 하는 방법을 알아보자. return false 하기 See the Pen 마우스 오른쪽 클릭 막기 by hy0ni (@hy0ni) on CodePen. - oncontextmenu 이벤트는 마우스 오른쪽을 클릭했을 때 발생한다. - oncontextmenu가 호출되었을 때 return false 하면, 마우스 오른쪽을 클릭해도 context 메뉴가 열리지 않는다. - oncontextmenu 속성은 모든 브라우저에서 지원되지만, contextmenu 속성은 현재 Firefox에서만 지원된다. preventDefault() 사용하기 See the Pen 마우스 오른쪽 클릭 막기 pr..

url 리다이렉트(Redirect), location.href 와 location.replace 차이점 라디오 버튼 클릭 시 페이지 이동하기 html파일 두개를 만들어 두고 라디오 버튼 클릭 시 이동하는 방법을 구현해 보았다. onClick = "window.location.href='링크'"; page1 page2 라디오 버튼 두 개를 만들어 두고 처음 선택되어 보일 부분은 checked 속성을 넣어준다. 페이지 이동 시 활성화되어 있는 페이지도 동일하게 적용해 주면 된다.

시계 구현해 보기 See the Pen Untitled by hy0ni (@hy0ni) on CodePen. 위 예제를 보면 Date 객체를 사용하여 호출했을 때의 시간이 0~9까지는 홀수로 보인다. 이 경우 1~9 앞에 0을 입력하여 두 자리 숫자로 표기 될 수 있도록 만들어 보았다. String.prototype.padStart() 메서드 사용하여 두자리 숫자 표시하기 padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워 주어진 길이에 만족하는 새로운 문자열을 반환한다. 채워 넣기는 대상 문자열의(좌측)부터 적용된다. padStart(string이 가져야 하는 길이, string의 앞쪽에 채울 string) "hello".padStart(20, "x"); // 'xxxxxxxxxxxx..

BOM (Browser Object Model) 웹브라우저에는 전역 콘텍스트 객체가 존재하는데, 그 객체가 window 객체입니다. window객체를 이용하는 프로그래밍을 BOM이라고 부릅니다. BOM 객체 종류 - window : BOM의 최상위 객체 - location : 웹 브라우저의 주소표시줄 객체 - screen : 운영체제 화면의 속성을 가진 객체 - history : 방문기록을 가진 객체 - navigator : 브라우저에 대한 정보를 가진 객체 - document : navigator객체 - 브라우저나, 운영체제(OS)에 대한 정보가 담겨있다. - 주로 호환성 문제 등을 위해 사용한다. - navigator객체는 window.navigator로 접근 가능하며 window는 생략할 수 있다...

01. navigator.userAgent를 이용하여 확인하는 방법 참고 👉 MDN | Navigator: userAgent property 🌵 예시 코드 function isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); } if (isMobile()) { // 모바일일 경우 } else { // 모바일 외 } 🌵 예시 코드 function isMobile() { const userAgent = navigator.userAgent; if ( userAgent.match( /iPhone|iPod|Android|Windows CE|BlackBerry|Sym..

플래그 설명 g 전역 탐색 i 대소문자를 구분하지 않음 🌵 이메일 const regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 🌵 아이디 const regId = /^(?=.*[0-9]+)[a-zA-Z][a-zA-Z0-9]{5,10}$/g; 영문자로 시작하고, 5 ~ 10 길이의 영문자와 숫자의 조합 🌵 한글만 const regex = /[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g; 🌵 영문 const regex = /[a-zA-Z]/g; 🌵 숫자만 const regNum = /[0-9]/g; 🌵 자음 / 모음 가능 const regex =..