HTML에서 표에 캡션을 추가하려면 <caption> 태그를 사용합니다. 캡션은 기본적으로 표의 상단 중앙에 표시되며, 표의 내용이 무엇인지 한눈에 알려주는 제목 역할을 합니다. 또한 스크린 리더 사용자에게 표 정보를 전달하는 접근성 측면에서도 매우 유용한 요소입니다.예제아래 예제에서는 Indian Cricketers(인도 크리켓 선수)라는 캡션을 표에 추가했습니다. 코드를 직접 실행해 보면서 결과를 확인해 보세요.<!DOCTYPE html> <html> <hea
HTML에서 문서에서 제거되었음을 나타내는 텍스트(취소선이 그어진 텍스트)를 표시하려면 <del> 태그를 사용합니다. 이 태그는 수정 이력을 보여주거나 변경 사항을 명확하게 전달해야 할 때 유용하며, 대부분의 브라우저에서 기본적으로 취소선 스타일로 렌더링됩니다.del 태그의 주요 속성<del> 태그는 다음과 같은 속성을 지원합니다.속성값설명citeURL해당 텍스트가 삭제된 이유를 설명하는 다른 문서의 URL을 지정합니다.datetimeYYYY-MM-DD 또는 YYYYMMDD HH:MM:SS 형식텍스트가 삭제된
HTML에서 디렉토리 목록을 표시하려면 dir 태그를 사용할 수 있습니다. 이 태그는 <ul> 태그와 매우 유사하게 동작하지만, 현재는 공식적으로 폐기(deprecated)된 상태이므로 실제 개발 환경에서는 <dir> 태그의 사용을 피하는 것이 좋습니다. dir 태그의 속성 <dir> 태그에서 사용되던 속성은 다음과 같습니다. 속성 값 설명 Compact compact 폐기됨 − 목록을 간결한(compact) 형태로 렌더링하도록 지정합니다. 예제 다음 코드를 실행하면 HTML에
HTML에서 대화 상자(dialog box)를 정의하려면 <dialog> 태그를 사용합니다. 이 태그를 활용하면 별도의 라이브러리나 복잡한 스크립트 없이도 팝업 또는 모달 형태의 UI를 손쉽게 구현할 수 있습니다. <dialog> 태그의 주요 속성 속성값설명 open open 대화 상자를 열어 사용자가 내용과 자유롭게 상호작용할 수 있도록 합니다. 예제 다음 코드를 실행하면 <dialog> 태그가 실제로 어떻게 동작하는지 직접 확인할 수 있습니다. <!Doctype htm
HTML에서 <menu> 요소가 컨텍스트 메뉴(context menu)로 화면에 표시되면 onshow 이벤트가 발생합니다. 이 이벤트에 핸들러를 연결하면 컨텍스트 메뉴가 나타나는 순간 원하는 자바스크립트 코드를 실행할 수 있습니다. 예제 다음 코드를 실행하면 <menu> 요소가 컨텍스트 메뉴로 표시될 때 스크립트가 실행되는 과정을 확인할 수 있습니다. <!Doctype html> <html> <head> <titl
HTML 줄바꿈 삽입 방법HTML 문서에서 문장이나 텍스트 사이에 한 줄 바꿈(line break)을 넣고 싶다면 <br> 태그를 사용하면 됩니다. <br> 태그는 닫는 태그 없이 단독으로 사용하는 빈 요소(empty element)로, 해당 위치 이후의 내용을 새로운 줄로 내려서 화면에 표시해 줍니다.예제아래 예제 코드를 직접 실행해 보면서 <br> 태그를 사용해 줄바꿈을 삽입하는 방법을 확인할 수 있습니다.<!DOCTYPE html> <html> &nbs
웹 페이지에서 동영상이나 오디오를 재생하다 보면 네트워크 문제 등 다양한 이유로 브라우저가 미디어 데이터를 정상적으로 가져오지 못하는 경우가 발생합니다. 이럴 때 onstalled 속성을 사용하면 미디어 데이터 가져오기가 중단되었을 때 특정 스크립트를 자동으로 실행할 수 있습니다.onstalled 속성이란?onstalled 속성은 브라우저가 어떤 이유로든 미디어 데이터를 가져올 수 없을 때 지정된 스크립트를 실행하는 HTML 이벤트 속성입니다. 예를 들어, 서버 응답이 갑자기 중단되거나 네트워크 연결에 문제가 생겨 미디어 다운로드가
HTML에서 인용(citation)을 지정하려면 <cite> 태그를 사용합니다. 이 태그는 책, 논문, 영화, 노래 등 저작물(work)의 제목을 나타낼 때 사용되며, 대부분의 브라우저에서는 해당 텍스트가 자동으로 기울임꼴(이탤릭체)로 렌더링됩니다.예제다음 코드를 실행하여 <cite> 태그로 인용을 추가하는 방법을 직접 확인해 보세요.<!DOCTYPE html> <html> <head> <title>HTML
사용자가 <details> 요소를 열거나 닫을 때마다 ontoggle 이벤트가 발생합니다. 이 이벤트 속성을 활용하면 상세 정보가 펼쳐지거나 접히는 바로 그 순간에 원하는 자바스크립트 코드를 실행할 수 있습니다. 아래 예제 코드를 직접 실행해 보세요. ontoggle 이벤트란? ontoggle은 <details> 요소의 open 상태가 변경될 때마다 트리거되는 이벤트입니다. 사용자가 <summary> 영역을 클릭해 내용을 펼치거나 다시 접을 때마다 지정된 함수가 호출되며, 페이지 로드 시점에 요소가
테이블 열(column)에 속성을 일괄 지정하려면 <col> 태그를 사용합니다. HTML의 <col> 태그는 여러 테이블 열에 공통으로 적용할 속성 정의를 한곳에 모아 선언할 수 있게 해주는 요소입니다.다만 주의할 점이 있습니다. <col> 태그는 열을 구조적으로 그룹화하는 역할은 하지 않습니다. 열을 실제로 하나의 그룹으로 묶는 것은 <colgroup> 요소의 역할이며, <col>은 그 안에서 각 열의 스타일·속성을 정의하는 용도로 사용됩니다.<col> 태그의 주요
샘플 컴퓨터 코드를 화면에 표시하려면 <samp> 태그를 사용합니다. HTML의 <samp> 태그는 컴퓨터 프로그램의 출력 결과를 나타낼 때 사용되며, 대부분의 브라우저에서는 기본적으로 고정폭(monospace) 글꼴로 렌더링되어 실제 콘솔 출력처럼 보이도록 합니다.예제다음 코드를 실행하면 HTML 문서에서 <samp> 태그가 어떻게 동작하는지 직접 확인할 수 있습니다.<!Doctype html> <html> <head>
HTML 문서에 섹션(구역)을 추가하려면 <div> 태그를 사용합니다. HTML의 <div> 태그는 문서 내에서 하나의 구역을 정의하는 역할을 하며, 여러 개의 HTML 요소를 하나로 묶어 CSS로 일괄적으로 스타일을 지정할 수 있게 해줍니다.div 태그란 무엇인가?<div>는 division의 약자로, 블록 레벨(block-level) 요소입니다. 자체적인 의미를 갖지 않는 대신 콘텐츠를 논리적으로 그룹화하는 컨테이너 역할을 하며, id나 class 속성과 함께 사용하면 특정 영역만 선택하여 레이아
HTML에서 진행률 표시줄(progress bar)을 만들려면 <progress> 태그를 사용합니다. HTML의 <progress> 태그는 특정 작업의 완료 진행 상태를 나타내며, 브라우저 화면에는 진행률 표시줄 형태로 출력됩니다. 또한 JavaScript와 함께 사용하면 진행률 값을 동적으로 조작할 수 있어 파일 업로드, 로딩 상태 등을 직관적으로 보여줄 수 있습니다. <progress> 태그의 주요 속성 속성 값 설명
HTML의 <rp>(Ruby Parenthesis) 태그는 루비(ruby) 주석을 지원하지 않는 브라우저에서 표시할 대체 내용을 지정하는 데 사용됩니다. 루비 주석은 일본어 후리가나처럼 한자 위에 발음을 작게 덧붙여 표기하는 동아시아 타이포그래피 기법으로 널리 활용됩니다.<rp> 태그의 역할루비 주석은 세 가지 태그가 서로 협력하여 구현됩니다.<ruby>: 루비 주석 전체를 감싸는 컨테이너 역할<rt>: 실제 화면에 표시되는 루비 텍스트(발음, 읽는 법 등)<rp>: 루비를 지원
HTML5에서 루비 주석(ruby annotation)을 표시하려면 <rt> 태그를 사용합니다. <rt> 태그는 루비 주석 안에서 문자의 발음을 나타내는 역할을 하며, 주로 한자나 일본어 가나 같은 동아시아 문자의 읽는 법(발음)을 화면에 보여줄 때 사용됩니다. 함께 사용하는 관련 태그 <ruby> : 루비 주석 전체를 감싸는 컨테이너 역할을 합니다. <rt> : 본문 문자 위에 작게 표시될 발음 텍스트를 정의합니다. <rp> : 루비 기능을 지원하지 않는 구형 브라우저를 위해
HTML5의 <ruby> 태그는 동아시아 문자의 발음을 나타내는 루비 주석(ruby annotation)을 정의할 때 사용됩니다. 루비 주석은 주로 한자 위에 작은 글씨로 읽는 법을 덧붙이는 방식으로, 중국어의 병음이나 일본어의 후리가나를 표기할 때 널리 활용됩니다. 루비 주석을 구성하는 태그 루비 주석은 세 가지 요소를 조합하여 만듭니다. <ruby> – 루비 주석 전체를 감싸는 컨테이너 요소입니다. <rt> – 원본 문자 위에 실제로 표시될 발음(읽는 법) 텍스트를 정의합니다. <rp&g
HTML의 <blink> 태그는 텍스트를 감싸서 화면에서 깜박이도록 만드는 역할을 합니다. 이 태그는 과거 넷스케이프(Netscape) 브라우저에서 주로 사용되었으며, 태그로 묶인 텍스트가 일정한 간격으로 깜박이는 시각적 효과를 냈습니다. 아래 예제 코드를 직접 실행해 보면 <blink> 태그의 동작 방식을 확인할 수 있습니다. 주의: 이 요소는 이미 폐기(deprecated)된 상태로, 현대 브라우저에서는 지원되지 않습니다. 따라서 실제 프로젝트에서는 사용하지 않는 것이 좋습니다. 깜박임 효과가 필요하다면 C
HTML에서 푸시 버튼(push button)을 추가하려면 <button> 태그를 사용합니다. HTML의 <button> 태그는 폼(form) 안에 클릭 가능한 버튼을 만들 때 사용되며, 필요에 따라 <input> 태그로도 비슷한 형태의 버튼을 만들 수 있습니다.<button> 태그의 주요 속성<button> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.속성값설명autofocusautofocus페이지가 로드될 때 해당 버튼이 자동으로 입력 포커스를 갖도록 지정합니다.di
HTML에서 긴 인용문을 표시하려면 <blockquote> 태그를 사용합니다. HTML의 <blockquote> 태그는 여러 줄에 걸친 긴 인용문(block quotation)을 마크업할 때 사용되며, 브라우저는 일반적으로 이 태그로 감싼 텍스트를 들여쓰기 형태로 렌더링합니다.blockquote 태그 사용 시 주의사항<blockquote> 태그 내부에는 단순한 일반 텍스트가 아닌 블록 레벨 요소(예: <p>, <div> 등)만 포함해야 합니다. 이는 HTML5 표준에서 권장하는
HTML에서 스크립트만으로 그래픽을 만들고 싶다면 <canvas> 태그를 사용하면 됩니다. HTML5에서 도입된 <canvas> 태그는 자바스크립트 같은 스크립트 언어와 연동하여 그래픽, 애니메이션, 게임 화면, 데이터 시각화 차트 등을 자유롭게 그릴 수 있는 강력한 도구입니다. <canvas> 태그의 주요 속성 <canvas> 태그는 다음 두 가지 속성으로 캔버스 영역의 크기를 조절할 수 있습니다. 속성값설명 height픽셀(px)캔버스의 높이를 지정합니다. width픽셀(px)캔