폴리프레임

clientX, layerX, offsetX, pageX, x는 모두 마우스 이벤트 객체에 포함된 좌표 관련 속성입니다. 콘솔에서 확인해 보면, 같거나 비슷한 값이 나옵니다. 이들은 사용 환경이나 특정 요소를 기준으로 좌표값을 제공하는데,  각 속성의 차이를 비교해보겠습니다.1. clientX뷰포트를 기준으로 마우스 위치의 X 좌표를 제공합니다.브라우저 창의 왼쪽 위를 (0, 0)으로 간주하며, 스크롤을 포함하지 않습니다.화면 상에서 요소가 뷰포트 내 어디에 위치하는지 파악할 때 유용합니다.document.addEventListener('mousemove', (event) => { console.log(event.clientX); // 뷰포트 기준 X 좌표});2. layerX현재 요소 기준으로 마..

JavaScript 2024. 10. 30. 19:24

unset 키워드 는 속성을 기본 상태로 되돌리거나 상속된 속성을 제거합니다. 즉, 상속되는 속성의 경우 부모의 스타일을 상속받지 않고, 사용자 에이전트 스타일(브라우저의 기본 스타일)로 돌아갑니다. 상속이 없는 경우 초기값(브라우저가 기본으로 지정한 값)으로 돌아갑니다. button { all: unset; background-color: #3498db; color: white; padding: 10px 20px; border-radius: 5px;} 예제에서는 all: unset;을 통해 버튼의 브라우저 기본 스타일을 없앤 후, 원하는 스타일로 다시 지정했습니다. 이제 버튼은 브라우저마다 달라지는 기본 스타일을 가지지 않고, 지정된 스타일만 적용받습니다. 비교all: uns..

html + css 2024. 10. 30. 18:41

1. :has()부모 요소가 특정 조건을 만족할 때 스타일을 변경할 수 있습니다.부모 선택자로 사용할 수 있어, 자식 요소 상태에 따라 부모 요소의 스타일을 조절할 수 있습니다.CSS에서 자식이나 후속 요소가 있는지 조건을 확인할 수 있습니다./* .container 내에 .active 요소가 있으면 .container에 스타일 적용 */.container:has(.active) { border: 2px solid green;}/* .card 내에 .button 요소가 있을 때 텍스트 색상 변경 */.card:has(.button) { color: blue;}/* h1의 바로 다음(같은 레벨)에 p 가 있으면, 아래 조건을 h1에 적용 */h1:has(+ p) { margin-bottom: ..

JavaScript 2024. 10. 30. 16:52

1. CSS 변수 설정CSS 변수를 설정할 때는 --로 시작하는 이름을 사용합니다. 변수 이름은 소문자, 숫자, 밑줄(_) 등을 포함할 수 있지만, 항상 --로 시작해야 합니다.전역 변수로 설정 및 사용전역 변수를 설정할 때는 보통 :root 선택자를 사용합니다. :root는 HTML 문서의 최상위 요소를 가리키므로, 모든 곳에서 접근할 수 있는 변수를 정의할 수 있습니다. 이렇게 정의된 변수는 index.html에서 로드되는 다른 CSS 파일이나 스타일 태그에서도 사용할 수 있습니다. 사용은 함수 var()를 이용하며, 아래 var(--padding, 10px) 의 경우는 --padding 설정값이 없으면 디폴트로 10px이 적용됩니다.:root { --main-font: 'Arial, sans-..

JavaScript 2024. 10. 30. 11:36

1. 이벤트 지원 장치mousemove: 마우스 입력에만 반응하며, 일반적인 데스크탑 환경에서 마우스의 움직임을 추적할 때 사용됩니다.pointermove: 포인터 입력을 포괄하여, 마우스뿐만 아니라 터치, 스타일러스 등 여러 입력 장치에 대해 반응합니다. pointermove는 다양한 장치에서 입력을 통합적으로 처리할 수 있어, 반응형 디자인과 같은 다양한 입력 지원이 필요할 때 유리합니다.2. 브라우저 호환성mousemove: 오랫동안 모든 브라우저에서 지원해왔으며, 모든 마우스 이벤트를 지원하는 환경에서는 무난히 사용할 수 있습니다.pointermove: 최신 브라우저에서 지원되며, 특히 Edge 및 크롬 기반 브라우저는 pointermove와 관련된 기능을 잘 지원하지만, 일부 오래된 브라우저에서..

JavaScript 2024. 10. 28. 12:04

위 함수의 결과를 보려고 아래 코드로 반환값을 확인해 봅니다.const rect = section.getBoundingClientRect();console.log( rect )//////// bottom : 3986height : 1190left : 0right : 1707.3333740234375top : 2796width : 1707.3333740234375x : 0y : 2796  아래 그림은 MDN 의 그림입니다. 여기서 width 와 height 는 아래 그림에서 Element 의 폭과 높이입니다.

JavaScript 2024. 10. 27. 12:43

window.addEventListener("click", fireLaser)또는window.addEventListener("click",()=> fireLaser()) 두 방식 모두 JavaScript에서 window 객체의 "click" 이벤트를 처리하기 위해 fireLaser 함수를 호출하는 역할을 합니다. 하지만 두 방식 사이에는 미묘한 차이가 있습니다. 그 차이는 함수 참조와 익명 함수의 사용에 있습니다. 1. window.addEventListener("click", fireLaser)여기서는 fireLaser 함수의 참조를 전달합니다.클릭 이벤트가 발생하면 fireLaser 함수가 직접 호출됩니다.클릭 이벤트가 발생할 때 브라우저가 fireLaser를 호출할 뿐, 추가적인 함수 호출이 일어나..

JavaScript 2024. 10. 11. 21:13

// 크로스 헤어let mousePosition = new THREE.Vector2();const crosshairs = new THREE.Group();crosshairs.position.z = -1;camera.add(crosshairs);const crossMaterial = new THREE.LineBasicMaterial({ color: 0xfffff,})const lineGeometry = new THREE.BufferGeometry();const lineVerts = [ 0, 0.05, 0, 0, 0.02, 0];lineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lineVerts, 3))for ( let i = 0..

three.js 2024. 10. 11. 20:08