본문 바로가기

반응형

분류 전체보기

(399)
[js] 자바스크립트에서 가속도 더하는 공식 및 디바이스 기울기 이벤트/USERAgent/ 보호되어 있는 글입니다.
[js] 대상 객체에 마우스 호버 시 적용되는 애니메이션 만들어보기 결과물 - 배율 0.25 추천 HTML 삽입 미리보기할 수 없는 소스 HTML 코드 성인 이신가요? 맞습니다. 아닙니다. CSS 코드 * { margin: 0; padding: 0; color: white; cursor: none; } body { background: linear-gradient(0deg, rgb(127, 131, 204), rgb(132, 33, 74)); position: relative; width: 100%; height: 100vh; overflow: hidden; } /* 모달창 전체 컨테이너 */ .modal_con { position: relative; border-radius: 5px; width: 400px; height: 200px; position: absolute..
[js] 브라우저 화면의 중간값을 구하기(중심축을 이용한 애니메이션) 결과 HTML 삽입 미리보기할 수 없는 소스 구하는 법 clientX, 와, clientY 는 유저가 현재 브라우저 화면을 바라봤을 때 시야에 들어오는 가로축과 세로축 전체를 의미한다. 또한 고정된 값이 아니라 지속적으로 변화된 값을 추적하기 때문에, 유동적이다. 또한 innerWidth 와 innerHeight 도 동일하게 유저가 인지 가능한 시야에 보이는 브라우저 내부 창의 총높이과 넓이와 동일하다. 그래서 최대값만 보았을 때 client 값과 inner 값은 서로 동일하다. 다만, 고정적인 값이기 때문에 브라우저를 새로고침하지 않는 이상 변화된 값이 브라우저에 반영되지 않는다. 이러한 특성을 이용하여, client 축의 시작점, 중간지점, 끝지점의 위치값과 inner 값의 차이를 이용하면 중간지점을..
[js] 간단한 마우스 커서 애니메이션? 만들기 간단하게 만들어볼 결과물 HTML 삽입 미리보기할 수 없는 소스 html 작업 div 박스에 mouse 클래스 속성값을 추가하고, 자식 요소로 span 태그를 두 개 생성한다. CSS 작업 만들어진 커서 이외의 기본 커서는 보이지 않도록 cursor : none 을 전역으로 설정한다. 부모 태그인 div 가 절대위치인 absolute 여야 left, top 등의 position 속성이 적용되므로 주의한다. *{ margin: 0; box-sizing: border-box; cursor: none; } body{ background-color: black; color:white; height: 100vh; width: 100%; } /* 포지션이 절대적 위치여야 left, top 과 같은 포지션 속성을 적..
[간단정리js] 자바스크립트 타입검사 시 == 연산자 대신 === 사용하기 타입 캐스팅 자바스크립트는 동적 언어라서 엄격한 타입 지정을 요구하지 않는다. 따라서 타입을 따로 지정하지 않고 변수 선언과 동시에 값을 할당하게 되면, 그 값의 타입을 알아서 지정해주는 타입 캐스팅(형 변환)이 발생한다. 자바스크립트의 형변환과 === 을 사용해야 하는 이유 자바스크립트에서 형변환은 두 가지로 구분 된다. 하나는 암묵적 형변환 이고, 다른 하나는 명시적 형변환이다. 그 중 서로 다른 타입의 값을 비교할 때 발생하는 형변환을 암묵적 형변환이라 부른다. 예를 들어, 1 과 '1' 은 서로 다른 타입을 나타내지만, 자바스크립트는 문자열 숫자와 숫자형 숫자가 서로 만나면 숫자형 숫자가 문자열로 타입 변환이 생기는 것이 있다. 즉 1 + '1' = '11' 이 되는 신기한 결과가 발생하는 것이다..
[js] typeof 에서 null은 object 다. 흔히 자바스크립트에서 타입검사를 할 때 자주 활용하는 것 중에 하나가 typeof 이다. typeof는 원시값을 검사할 때는 정확한 결과를 반환하지만, null 의 타입을 검사하면 object 가 나온다. let example = null; console.log(typeof example); // 출력 결과: "object" 이는 자바스크립트의 초창기 오류인데, 현재는 이 오류를 고치기에는 많은 제약사항이 따라서 오류를 수정하지 못하고 있다고 한다. 즉, null 이 object 가 아닐 것이라고 생각하고, 접근하게 된다면 예상하지 못한 결과를 만들어 낼 수 있음을 인지하고 활용시 주의해야 한다.
[CSS] rem, em 의 차이 rem "html 태그의 기본 font-size : 14px 에 비례하여 증가하는 단위" rem 은 HTML 태그 중에서 태그 자체에 적용된 font-size를 기준으로 결정된다. 현재 2023년을 기준으로 font-size는 기본 14px 가 암묵적으로 적용되어 있는데, 이 때 rem을 2rem 으로 설정한다면, 실질적으로 적용되는 px은 14px 에서 2를 곱한 28px 가 된다. 예를 들어, width : 5rem 으로 설정한다면,14px 에서 5를 곱한 70px 가 적용된다. 즉, width : 70px 가 되는 것이다. html { font-size : 14px } div { width: 5rem; -> 실질적으로 5 * 14px = 70px 적용 } em "em 단위를 적용한 해당 태그에 설정..
[HTML] <details> 및 <summary> 태그 "드롭다운이 가능한 HTML 태그" 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 굳이 힘들게 드롭다운을 구현하지 않아도 간단한 것은 이 태그들을 이용하면 간단한 드롭다운 메뉴는 구현할 수 있을 듯 하다. 다만, 이 태그 내에 숨겨진 태그 요소들은 비디오 판독기를 필요로 하는 사람에게 친화적인 요소가 아니라고 하므로 사용에 주의가 필요해 보인다. -- 자세한 사용법은 아래 링크 참고 하자-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary : The Disclosure Summ..

반응형