< Code diaries />

1. 다음중 설명과 맞는 것을 모두 고르시오 ( A, C )A. 제목을 나타내는 태그는 총 6가지가 있으며, ~ 까지 이다.B. 문단을 나타내는 태그는 이다.C. 문서의 제목을 나타내는 태그는 안에 있다D. , 태그는 내용중 중요하거나 경고하는 것의 역할을 하는 태그이다.   2. 제목을 나타내는 헤딩요소들에 대한 설명으로 바르지 않은 것을 모두 고르시오. (C, D)  A. 블럭레벨 요소 이다.B. 내부에 인라인레벨 요소를 컨텐츠 요소로 포함 할 수 있다.C. 내부에 블럭레벨 요소를 컨텐츠 요소로 포함 할 수 있다.D. 계층구조를 지키지 않아도 무방하며, 제목이 필요시 언제든지 사용할 수 있다.  3. VS code 문제입니다. HTML template을 불러오는 단축키는? ! + Tab ke..

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..