HTML에서 <dt> 태그는 정의 목록(Definition List) 내에서 용어(term)의 시작을 정의하는 데 사용됩니다. 정의 목록은 일반적인 순서 없는 목록이나 순서 있는 목록과 비슷하지만, 각 항목이 용어와 설명(description)이라는 두 개의 요소로 구성된다는 점에서 차이가 있습니다.정의 목록의 기본 구조정의 목록은 세 가지 태그로 구성됩니다.<dl>: 정의 목록 전체를 감싸는 컨테이너 태그<dt>: 정의할 용어(definition term)를 나타내는 태그<dd>: 해당
HTML에서 문서나 특정 섹션의 바닥글(푸터)을 표시하려면 <footer> 태그를 사용합니다. 이 태그는 HTML5에서 새롭게 도입된 시맨틱 요소로, 저작권 정보, 작성자 정보, 연락처, 관련 링크 등 페이지 하단에 배치되는 내용을 담는 데 사용됩니다.<footer> 태그란?<footer> 요소는 가장 가까운 상위 구획 콘텐츠(<section>, <article> 등) 또는 루트 요소(<body>)의 바닥글을 나타냅니다. 일반적으로 다음과 같은 정보를 포함합니다.저작권
HTML 하위 창(프레임)이란?HTML에서 하위 창을 만들 때는 <frame> 태그를 사용합니다. 이 태그는 <frameset> 태그 내부에서 화면을 나누는 각각의 개별 프레임 영역을 정의하는 역할을 합니다.주의: <frame> 태그는 HTML5에서 공식적으로 제외된 요소입니다. 최신 브라우저에서는 더 이상 지원되지 않으므로 새로운 프로젝트에서는 사용하지 않는 것이 좋으며, 대신 <iframe> 태그를 활용하는 것이 권장됩니다.frame 태그의 주요 속성속성값설명frameborder0 또는
HTML에서 웹 페이지에 이미지를 표시하려면 <img> 태그를 사용합니다. <img> 태그는 닫는 태그가 필요 없는 빈(empty) 요소로, src 속성에 이미지 경로를 지정하는 것이 필수입니다. img 태그의 주요 속성 속성값설명 aligntopbottommiddleleftright지원 중단(Deprecated) — 이미지의 정렬 방식을 지정합니다. 현재는 CSS의 vertical-align, float 속성을 사용하는 것이 권장됩니다. alt텍스트이미지를 불러올 수 없거나 시각 장애인용 스크린 리더를
HTML <input> 태그는 폼(form) 안에서 사용자가 데이터를 입력할 수 있는 입력 요소를 선언할 때 사용합니다. 텍스트 박스, 체크박스, 라디오 버튼, 파일 업로드 창 등 다양한 형태의 입력 컨트롤을 하나의 태그로 만들 수 있는 것이 특징입니다. <input> 태그의 주요 속성 <input> 태그와 함께 사용할 수 있는 주요 속성은 다음과 같습니다. (HTML5)로 표시된 속성은 HTML5에서 새롭게 도입된 것입니다. 속성값설명 accept콘텐츠 유형서버가 허용하는 콘텐츠 유형을 쉼표
HTML에서 하나의 브라우저 창을 여러 개의 프레임으로 나누어 각기 다른 문서를 동시에 표시하려면 <frameset> 태그를 사용합니다. 이 태그는 창을 행(row) 또는 열(column) 단위로 분할하고, 분할된 각 영역에 <frame> 요소를 배치하는 방식으로 동작합니다. HTML5 지원 중단 안내 주의: <frameset> 태그는 HTML5 표준에서 제외되었으며, 최신 브라우저에서는 더 이상 지원되지 않습니다. 따라서 새로운 프로젝트에서는 사용하지 않는 것이 좋습니다. 대신 <iframe
HTML에서 문서에 새롭게 추가된 텍스트를 표시하려면 <ins> 태그를 사용합니다. 대부분의 브라우저는 이 태그로 감싼 텍스트에 자동으로 밑줄을 그려, 방문자가 어느 부분이 삽입되었는지 한눈에 알아볼 수 있도록 도와줍니다.<ins> 태그에서 활용할 수 있는 주요 속성은 다음과 같습니다.속성값설명citeURL해당 텍스트가 왜 삽입되었는지 설명해 주는 다른 문서의 URL을 지정합니다.datetimeYYYYMMDD HH:MM:SS텍스트가 삽입된 날짜와 시간을 지정합니다.예제아래 코드를 실행하면 삽입된 텍스트가 화면에
개요HTML에서 한 줄 입력 필드를 추가하려면 <isindex> 태그를 사용할 수 있습니다. <isindex> 태그는 텍스트 필드를 통해 문서를 검색(쿼리)할 때 사용되는 태그로, 문서 내 어디에나 배치할 수 있지만 일반적으로 <head> 태그 안에 넣는 것이 권장됩니다.주의: 이 태그는 이미 폐기(deprecated)된 태그이므로 실제 프로젝트에서는 사용하지 않는 것이 좋습니다. 최신 HTML 표준에서는 <input type=text> 요소를 사용하는 것이 올바른 방법입니다.isindex
HTML에서 키보드 입력을 나타내는 텍스트를 표시하려면 <kbd> 태그를 사용합니다. HTML의 <kbd> 태그는 사용자가 키보드로 입력하는 내용을 정의하는 구문(phrase) 태그로, 브라우저에서는 일반적으로 고정폭(monospace) 글꼴로 렌더링됩니다.kbd 태그란?<kbd> 태그는 키보드 단축키나 사용자가 직접 눌러야 하는 키를 문서에 명확하게 표현할 때 유용합니다. 예를 들어 Ctrl + C처럼 여러 개의 키 조합을 안내할 때 각 키를 개별적으로 감싸면 시각적으로 구분하기 쉬워집니다.사용 예
HTML에서 onwheel 속성은 사용자가 특정 요소 위에서 마우스 휠을 스크롤하는 순간 자동으로 트리거됩니다. 이 속성을 활용하면 요소 위에서의 휠 동작에 반응하여 원하는 자바스크립트 함수를 실행할 수 있습니다.onwheel 속성이란?onwheel은 HTML 요소에 직접 지정할 수 있는 이벤트 핸들러 속성으로, 마우스 휠(또는 터치패드의 스크롤 제스처)이 해당 요소 영역 위에서 움직일 때 지정된 스크립트를 호출합니다.예제 코드아래 코드를 실행하면 div 요소 위에서 마우스 휠을 굴릴 때 알림 창이 나타나는 것을 확인할 수 있습니다
HTML <colgroup> 태그란?테이블의 열 그룹을 정의하려면 <colgroup> 태그를 사용합니다. HTML의 <colgroup> 태그는 테이블 내에서 하나 이상의 열에 공통 속성을 일괄 지정할 때 활용됩니다. 만약 그룹 내 특정 열에만 서로 다른 속성을 적용하고 싶다면, <colgroup> 태그 안에 <col> 태그를 추가하여 개별 열의 스타일을 세부적으로 제어할 수 있습니다.<colgroup> 및 <col> 태그에서 사용할 수 있는 주요 속성은 다음
HTML의 onstorage 속성을 사용하면 웹 저장소(Web Storage) 영역이 업데이트될 때 원하는 스크립트를 실행할 수 있습니다. 이 속성은 localStorage나 sessionStorage에 변경 사항이 발생하는 순간 이벤트를 감지해야 하는 상황에서 특히 유용합니다. 참고로 onstorage 이벤트는 같은 출처(origin)를 공유하는 다른 문서에서 저장소가 변경되었을 때 발생합니다. 즉, 동일한 페이지 내부에서 값을 변경하는 경우에는 이벤트가 트리거되지 않으므로, 탭 간 데이터 동기화와 같은 기능을 구현할 때 활용하면
과거에는 HTML에서 <font> 태그를 사용해 텍스트의 글꼴을 지정했습니다. 하지만 이 태그는 현재 더 이상 사용되지 않는(deprecated) 요소로 분류되어 있으며, 최신 웹 표준에서는 지원되지 않습니다.따라서 현재는 CSS를 사용하는 것이 올바른 방법입니다. 특히 font-family 속성을 활용하면 원하는 글꼴을 간편하게 적용할 수 있습니다.기본 예제아래 코드는 인라인 스타일(inline style)을 이용해 특정 문단의 글꼴을 변경하는 예시입니다. 직접 실행해 보면서 결과를 확인해 보세요.<!DOCTYPE
HTML onsuspend 속성이란?HTML에서 onsuspend 속성을 사용하면 미디어 데이터의 로딩이 중단되는 시점에 스크립트를 실행할 수 있습니다. 예를 들어 다운로드가 완료되어 더 이상 데이터를 가져올 필요가 없을 때 이 이벤트가 발생합니다.onsuspend 이벤트가 발생하는 상황다운로드가 일시적으로 중지(pause)된 경우다운로드가 완료된 경우미디어 재생이나 버퍼링이 중단(suspend)된 경우 등지원 요소 및 브라우저 호환성onsuspend 속성은 <video> 요소와 <audio> 요소에서 사용할
오디오나 비디오가 재생을 시작할 준비가 되었을 때 특정 동작을 수행하려면 oncanplay 속성을 사용하면 됩니다. 이 속성은 미디어의 버퍼링이 충분히 이루어져 재생이 가능한 상태가 되는 순간 지정된 스크립트를 자동으로 실행합니다.oncanplay 속성이란?oncanplay는 HTML5 미디어 요소(<audio>, <video>)에서 사용할 수 있는 이벤트 속성입니다. 미디어 데이터가 일정 부분 로드되어 끊김 없이 재생할 수 있는 상태가 되면 브라우저가 이 이벤트를 발생시킵니다.예제 코드아래 코드를 실행하면 비
HTML의 ontimeupdate 속성은 동영상이나 오디오 같은 미디어의 재생 위치(currentTime)가 변경될 때 스크립트를 실행합니다. 사용자가 영상을 빨리 감기하거나 되감기할 때뿐만 아니라, 정상적으로 재생되는 도중에도 재생 시간이 계속 바뀌기 때문에 이 이벤트는 주기적으로 발생합니다.ontimeupdate 속성이란?ontimeupdate는 <audio> 및 <video> 요소에서 사용할 수 있는 이벤트 속성으로, 미디어의 현재 재생 위치가 바뀔 때마다 지정한 자바스크립트 함수를 호출합니다. 이를 활용
HTML5에서는 onplaying 속성을 사용하여 오디오나 비디오가 실제로 재생되기 시작하는 시점에 스크립트를 실행할 수 있습니다. 이 속성을 활용하면 사용자에게 미디어가 재생 중임을 알리거나, 재생 시작과 연동되는 다양한 UI 효과를 구현할 수 있습니다.onplaying 속성이란?onplaying은 미디어가 일시정지 상태나 버퍼링 상태에서 벗어나 실제로 재생이 시작된 순간 발생하는 이벤트입니다. 참고로 onplay 이벤트는 재생 버튼을 누르는 순간 발생하지만, onplaying은 버퍼링이 끝나고 실제 화면에 재생이 시작될 때 발생
브라우저의 세션 기록(히스토리)이 변경되면 onpopstate 이벤트가 자동으로 발생합니다. 사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭하거나, JavaScript에서 history.back(), history.forward(), history.go() 같은 메서드가 호출될 때 이 이벤트가 트리거됩니다.이 이벤트를 활용하면 페이지를 새로고침하지 않고도 히스토리 상태 변화에 반응하는 동적인 웹 애플리케이션을 만들 수 있습니다.기본 사용 예제가장 간단한 방법은 <body> 태그에 직접 이벤트 속성을 추가하는
onmouseup 이벤트란? 사용자가 HTML 요소 위에서 마우스 버튼을 눌렀다가 놓는 순간 onmouseup 이벤트가 발생합니다. 이 이벤트 속성을 활용하면 마우스 버튼이 놓이는 정확한 시점에 원하는 자바스크립트 코드를 실행할 수 있습니다. onmouseup은 onmousedown(마우스 버튼을 누를 때 발생)과 함께 사용하면, 버튼을 누르는 동작과 놓는 동작 각각에 서로 다른 스크립트를 지정할 수 있어 훨씬 더 유용합니다. 예제 코드 아래 예제에서는 제목(h3) 요소 위에서 마우스 버튼을 누르면 글자색이 노란색으로 바뀌고, 버
onseeked 속성은 사용자가 오디오 또는 비디오의 재생 위치를 건너뛰거나 새로운 지점으로 이동(탐색)하는 작업을 마쳤을 때, 지정된 스크립트를 실행하도록 하는 HTML 이벤트 속성입니다. 이 속성은 주로 <audio> 및 <video> 요소와 함께 사용되며, 탐색(seek) 동작이 완료된 순간에 발생하는 seeked 이벤트에 반응합니다. 예를 들어, 현재 재생 위치를 화면에 표시하거나 특정 구간 도달 시 추가 동작을 수행하는 등의 기능을 구현할 수 있습니다. onseeked 속성 예제 아래 코드를 실행하면