전체 글

[CSS] 뒤가 투명한 png 이미지 하얗게 변환

뒤가 투명한 png 이미지 하얀색으로 변환 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); 뒤가 투명한 png 이미지 검정색으로 변환 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);

[CS] 인터넷은 어떻게 작동하는가

인터넷은 네트워크(서로 연결된 컴퓨터 또는 기타 장치 그룹)의 네트워크이다. 인터넷 작동 방식: 개요 표준화된 프로토콜을 사용하여 장치와 컴퓨터 시스템을 함께 연결하여 작동한다. 이러한 프로토콜은 장치 간에 정보를 교환하는 방법을 정의하고 데이터가 안정적이고 안전하게 전송되도록 한다. 인터넷의 핵심은 상호 연결된 라우터의 글로벌 네트워크로, 서로 다른 장치와 시스템 간의 트래픽 전달을 담당한다. 인터넷을 통해 데이터를 보낼 때 장치에서 라우터로 전송되는 작은 패킷으로 나뉜다. 라우터는 패킷을 검사하고 대상을 향한 경로의 다음 라우터로 전달한다. 이 프로세스는 패킷이 최종 목적지에 도달할 때까지 계속된다. 패킷이 올바르게 송수신 되도록 하기 위해 인터넷은 인터넷 프로토콜(IP) 및 전송 제어 프로토콜(TC..

[자바스크립트] textContent와 innerText 차이

Node.textContent와 HTMLElement.innerText의 이름이 유사하지만, 중요한 차이가 있다. textContent는 와 요소를 포함한 모든 요소의 콘텐츠를 가져온다. innerText는 "사람이 읽을 수 있는" 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다. iinnerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.) IE 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노..

[자바스크립트] 전개연산자

전개 연산자는 ... 으로 표시되며, 배열, 객체, 문자열 등을 개별 요소로 분해한다. 이를 통해 배열이나 객체를 풀어서 각각의 요소로 사용할 수 있다. 다음은 전개 연산자를 사용하는 몇 가지 예시이다. 배열 분해 const arr = [1, 2, 3]; console.log(...arr); // 1 2 3 위 코드에서 전개 연산자를 사용하여 arr 배열의 각 요소를 개별적으로 출력한다. const arr1 = [1, 2]; const arr2 = [3, 4]; const combinedArr = [...arr1, ...arr2]; console.log(combinedArr); // [1, 2, 3, 4] 위 코드에서 전개 연산자를 사용하여 두 배열을 합쳐서 새로운 배열을 생성한다. 객체 분해 const..

[자바스크립트] DOMContentLoaded, load 차이

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다. 스타일시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다. 즉, 스타일시트, 이미지, 하위 프레임이 로드를 완료할 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생한다. - 기본 사용법 window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); - 지연 - 로딩이 이미 완료되었는지 확인 function doSomething() { console.info("DOM loaded"); } if (document.readyState === "loadi..