< Code diaries />

fit-content()는 CSS에서 사용하는 함수로, 요소의 크기를 컨텐츠의 크기에 맞게 조정할 수 있는 방법을 제공합니다. 이 함수는 주로 레이아웃을 다루는 데 유용하며, 특히 CSS Grid와 Flexbox에서 많이 사용됩니다.주요 특징컨텐츠 기반 크기 조정:fit-content()는 요소의 크기를 그 안에 포함된 컨텐츠에 맞추어 조정합니다.이를 통해 컨텐츠의 크기가 변할 때 요소의 크기도 동적으로 조정될 수 있습니다.최대 크기 제한:fit-content()는 최대 크기를 설정할 수 있으며, 이 최대 크기를 초과하지 않는 범위 내에서 컨텐츠 크기에 따라 요소의 크기를 결정합니다.예를 들어, fit-content(300px)와 같이 설정하면, 요소는 컨텐츠 크기에 따라 300px까지 커질 수 있습니다..

CSS의 filter 속성을 사용하면 요소에 다양한 시각적 효과를 적용할 수 있습니다. 다음은 filter에 사용할 수 있는 주요 CSS 함수 목록입니다:1. Blurblur(radius): 요소를 흐리게 합니다.예: filter: blur(5px);2. Brightnessbrightness(factor): 요소의 밝기를 조정합니다. 값이 1일 때 원래 밝기, 0보다 작으면 어두워지고, 1보다 크면 밝아집니다.예: filter: brightness(1.5);3. Contrastcontrast(factor): 요소의 대비를 조정합니다. 값이 1일 때 원래 대비, 0이면 회색으로 변하고, 1보다 크면 대비가 높아집니다.예: filter: contrast(200%);4. Drop Shadowdrop-shado..

CSS의 env() 함수는 브라우저 또는 기기에서 제공하는 환경 변수를 참조하는 함수로, 화면 안전 영역이나 특정 기기의 특성에 맞춰 레이아웃을 동적으로 조정할 때 유용합니다. env() 함수는 특히 모바일 기기에서 노치, 하단바 등으로 인해 안전 영역이 필요한 경우 여백을 설정할 때 자주 사용됩니다.    CSS env() 함수 예제 이 페이지는 브라우저의 안전 영역을 자동으로 감안하여 여백을 설정합니다.   주요 env() 변수를 사용한 예기본적으로 아래와 같은 safe-area-inset-* 변수를 제공합니다:safe-area-inset-top: 화면 상단의 안전 영역 여백safe-area-inset-right: 화면 오른쪽의 안전 영역 여백safe-area-inset-bottom:..

function stateCheck(e) { let status = e.target.readyState; let msg = ''; switch (status) { case 'loading': msg = '웹문서 로딩중'; break; case 'interactive' : msg = '웹문서 로딩완료, 리소스 로딩중'; break; case 'complete' : msg = '모든 리소스 로딩 완료' break; default : msg = '상태를 체크할 수 없습니다.' } console.log(..

이벤트란?웹사이트 이용시 사용자가 조작하는 어떤 동작이나, 브라우저 자체에서 상태를 캐치하여 일어날 수 있는 동작들을 말한다.예를 들면 문서를 불러들이는 순간(온로딩), 마우스를 요소에 올리는 동작, 클릭하는 동작, 스크롤링 등이 대표적인 이벤트 이다. 웹브라우저에서 일어날 수 있는 이벤트를 3가지로 나누어 정리 해보자. 1. 문서로딩 이벤트Event이벤트가 발생하는 순간DOMContentLoaded웹브라우저가 HTML을 리딩하여 DOM 트리구조를 만든 직후에 발생하며,CSS 및 Image, Video, Audio등의 자원이 로딩될때까지 기다리지는 않는다.Document객체에서 발생한다. 그래서 on 이벤트는 적용되지 않고, addEventListener를 사용해야 한다.document.addEventL..

Node의 유형을 지정하는 정수타입의 값이다.nodeType(Value)definiationincludes..1Node.ELEMENT_NODE, ...2Node.ATTRIBUTE_NODE요소의 속성3Node.TEXT_NODE요소 또는 속성의 실제 텍스트4Node.CDATA_SECTION_NODECDATASection, 5Node.ENTITY_REFERENCE_NODE더이상 사용하지 않음6Node.ENTITY_NODE더이상 사용하지 않음7Node.PROCESSING_INSTRUCTION_NODE와 같은 XML 문서의 처리 지침8Node.COMMENT_NODE 주석문 노드9Node.DOCUMENT_NODEDocument node10Node.DOCUMENT_TYPE_NODE11Node.DOCUMENT_FRA..