폴리프레임

blocker.style.display = '';이 코드는 display 속성을 기본값으로 되돌립니다. 기본값은 요소의 HTML/CSS 정의에 따라 다릅니다. 예를 들어, 대부분의 요소는 기본적으로 display: block 또는 display: inline을 가집니다.따라서 blocker.style.display = '';는 스타일 속성에서 display 속성을 제거하여, 원래의 CSS 스타일로 돌아갑니다.blocker.style.display = 'block';이 코드는 명시적으로 요소를 블록 요소로 설정합니다.블록 요소는 항상 새로운 줄에 시작되고, 가능한 모든 너비를 차지합니다.const blocker = document.getElementById( 'blocker' );blocker.style...

JavaScript 2024. 11. 21. 14:11

join()과 split() 메서드는 JavaScript에서 문자열과 배열을 조작하는 데 매우 유용한 도구입니다.join()join() 메서드는 배열의 모든 요소를 문자열로 결합합니다. 배열의 각 요소는 지정된 구분자로 구분됩니다.const fruits = ['apple', 'banana', 'cherry'];const result = fruits.join(', ');console.log(result); // "apple, banana, cherry" fruits 배열의 각 요소를 문자열로 결합하여 하나의 문자열을 만듭니다.구분자로 ', ' (쉼표와 공백)을 사용하여 각 요소 사이에 삽입합니다.split()split() 메서드는 문자열을 지정된 구분자에 따라 여러 부분으로 나누어 배열로 반환합니다.co..

JavaScript 2024. 11. 21. 13:19

performance는 자바스크립트에서 내장된 객체로, 성능 측정과 관련된 고해상도 시간을 제공하는 API를 지원합니다. performance 객체는 생성자 함수가 아니라, 브라우저 환경에서 전역적으로 사용 가능한 내장 객체입니다.performance 객체의 주요 메서드now(): 성능 측정을 위한 고해상도 타임스탬프를 반환합니다. 이 메서드는 밀리초 단위로 시간 값을 반환하며, 매우 정밀한 타이밍 측정이 가능합니다.const startTime = performance.now();// 작업 수행const endTime = performance.now();console.log(`작업 시간: ${endTime - startTime} 밀리초`);memory: 사용 가능한 메모리 정보에 대한 객체를 반환합니다...

JavaScript 2024. 11. 21. 12:01

cloneNode()는 DOM (Document Object Model) API의 메서드 중 하나로, 호출된 노드를 복제하여 반환합니다. 이 메서드는 특히 이미지와 같은 요소를 복제할 때 유용합니다. cloneNode() 메서드에는 선택적 매개변수로 깊은 복사를 지정할 수 있습니다. // 원본 이미지 요소 선택const originalImage = document.querySelector('img');// 이미지 요소 복제const clonedImage = originalImage.cloneNode(true); // true는 깊은 복사를 의미합니다// 복제된 이미지 요소를 DOM에 추가document.body.appendChild(clonedImage);매개변수deep (선택적): Boolean 값을..

JavaScript 2024. 11. 21. 10:40

HTMLCollection과 NodeList는 모두 DOM 요소의 목록을 나타내지만, 중요한 차이점이 몇 가지 있습니다.특 성HTMLCollectionNodeList생성 메서드getElementsByTagname, getElementsByClassName,childen 등querySelectorAll,childNodes동적갱신여부DOM 변화에 즉시 반영기본적으로 DOM 변화에 반영되지 않음노드 유형Element 노드만 포함모든 노드(텍스트, 주석 등 포함 가능)반복 지원배열 변환 후 forEach 메서드 지원forEach 메서스 지원 예제 1. HTMLCollection Item 1 Item 2 Add Item  items는 HTMLCollection이기 때문에 DOM이 변경될 때..

JavaScript 2024. 11. 5. 21:22

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

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