onseeking 속성으로 탐색 시작 이벤트 처리하기HTML에서 동영상의 탐색(seeking)이 활성화되었음을 나타내고, 이 시점에 스크립트를 실행하려면 onseeking 속성을 사용합니다.사용자가 동영상 재생 위치를 이동(앞으로 또는 뒤로 건너뛰기)하기 시작하면 seeking 속성이 true로 설정되며, 이때 onseeking 이벤트가 발생합니다. 이 이벤트에 함수를 연결하면 탐색이 시작되는 순간 원하는 동작을 수행할 수 있습니다.예제다음 코드를 실행하면 seeking 속성이 true로 설정되어 탐색이 활성화된 시점에 스크립트가
요소가 사용자 입력을 받을 때마다 스크립트를 실행하려면 oninput 이벤트 속성을 사용하세요. 이 속성은 입력 필드의 값이 변경되는 순간마다 실시간으로 트리거되기 때문에, 사용자가 타이핑하는 즉시 화면에 반응하는 동적인 웹 페이지를 만들 수 있습니다.예를 들어 회원가입 폼에서 아이디 중복 여부를 바로 확인하거나, 검색창에 글자를 입력하는 동안 실시간으로 결과를 보여주는 기능을 구현할 때 oninput이 유용하게 활용됩니다.예제다음 코드는 oninput 속성을 활용한 기본적인 예제입니다. 입력 필드에 이름을 작성하면 그 값이 즉시
HTML의 <noembed> 태그는 <embed> 태그를 지원하지 않는 브라우저를 처리하기 위해 사용됩니다. 이 태그를 활용하면 해당 플러그인이나 미디어를 표시할 수 없는 환경의 사용자에게 지금 어떤 콘텐츠를 보고 있지 못하는지를 알려주는 대체 콘텐츠를 손쉽게 제공할 수 있습니다.<noembed> 태그는 일반적으로 <embed> 태그 내부에 배치하며, embed 요소를 해석할 수 있는 최신 브라우저에서는 이 안의 내용이 무시되고, 지원하지 않는 브라우저에서만 대체 콘텐츠가 화면에 나타납니다
<noframes> 태그를 사용하면 noframe 섹션을 추가할 수 있습니다. HTML의 <noframes> 태그는 <frame> 태그를 지원하지 않는 구형 브라우저를 처리하기 위해 사용되며, 프레임을 표시할 수 없는 환경에서 방문자에게 대체 텍스트 메시지를 보여주는 역할을 합니다. <noframes> 태그는 <frameset> 요소 내부에 배치하며, 태그 안에 <body> 요소를 넣어 안내 문구나 대체 콘텐츠를 작성합니다. 예제 <!DOCTYPE html>
HTML에서 <noscript> 태그를 사용하면 noscript 섹션을 추가할 수 있습니다. 이 태그는 <script> 태그는 인식하지만 실제로는 스크립트 실행을 지원하지 않는 브라우저를 처리하기 위해 사용됩니다. 즉, 자바스크립트가 비활성화되어 있거나 지원되지 않는 환경에서 방문자에게 대체 텍스트 메시지를 보여주는 역할을 합니다.noscript 태그의 동작 원리<noscript> 태그 안에 작성한 내용은 다음과 같은 경우에만 화면에 표시됩니다.브라우저가 자바스크립트를 아예 지원하지 않는 경우사용자가
HTML 문서에 임베디드 객체(embedded object)를 삽입하려면 <object> 태그를 사용합니다. HTML <object> 태그는 이미지, 오디오, 비디오, PDF 등 다양한 멀티미디어 콘텐츠를 HTML 문서 안에 불러올 때 활용됩니다. 또한 <param> 태그를 함께 사용하면 객체에 필요한 다양한 매개변수(parameter)를 정의할 수 있습니다.<object> 태그의 주요 속성HTML <object> 태그는 아래와 같은 추가 속성들을 지원합니다.속성값설명alignl
인라인 하위 창(inline sub window)은 <iframe> 요소를 의미하며, <iframe> 태그를 사용하면 현재 HTML 문서 안에 또 다른 문서나 외부 콘텐츠를 삽입할 수 있습니다. 웹페이지, 동영상, 지도 등 다양한 콘텐츠를 페이지 내부에 그대로 보여줄 때 유용하게 활용됩니다. iframe 태그의 주요 속성 HTML <iframe> 태그는 아래와 같은 속성을 지원합니다. 속성값설명 alignleftrighttopmiddlebottom주변 텍스트를 기준으로 iframe을 정렬하
HTML 순서 있는 목록(<ol>)이란?HTML의 <ol>(ordered list) 태그는 각 항목에 번호가 자동으로 붙는 순서 있는 목록을 만들 때 사용합니다. 단계별 절차나 순위처럼 순서가 중요한 내용을 나타낼 때 유용하며, 목록의 개별 항목은 <li> 태그로 작성합니다.아래 코드를 실행하면 <ol> 태그를 이용해 순서 있는 목록을 만들 수 있습니다.<ol> 태그의 주요 속성HTML <ol> 태그는 다음과 같은 추가 속성을 지원합니다.속성값설명compactcompa
인라인 레이어(inline layer)를 추가하려면 <ilayer> 태그를 사용합니다. HTML의 <ilayer> 태그는 텍스트 흐름 안에서 실제 공간을 차지하는 레이어를 만들 때 사용되며, 이후에 작성되는 내용은 해당 레이어가 차지한 공간 뒤에 자연스럽게 배치됩니다. <ilayer>와 <layer> 태그의 차이점 <layer> 태그는 텍스트 흐름 위에 레이어를 생성합니다. 따라서 이후에 오는 내용이 새로 만든 레이어 아래로 들어갈 수 있습니다. 반면 <ilayer>
HTML <optgroup> 태그란?HTML의 <optgroup> 태그는 드롭다운 목록(<select>) 안에서 서로 관련된 옵션들을 하나의 그룹으로 묶어 주는 역할을 합니다. 옵션 개수가 많아질수록 사용자가 모든 선택지를 일일이 훑어보기 어려워지는데, 항목을 카테고리별로 분류해 두면 원하는 옵션을 훨씬 빠르고 직관적으로 찾을 수 있습니다.예를 들어 국가별 도시 목록, 제품 카테고리별 상품 목록처럼 계층 구조를 가진 데이터를 드롭다운으로 보여줄 때 특히 유용합니다.<optgroup> 태그의
HTML에서 style 속성을 사용하면 개별 요소에 직접 CSS 스타일을 지정할 수 있습니다. 이를 인라인 CSS(Inline CSS)라고 하며, 외부 스타일시트나 내부 스타일 블록 없이 특정 태그에 즉시 스타일을 적용하고 싶을 때 유용합니다.style 속성의 기본 문법style 속성은 열고 닫는 따옴표 안에 CSS 속성과 값을 속성: 값; 형태로 작성합니다. 여러 개의 스타일을 적용할 때는 세미콜론(;)으로 구분합니다.<태그 style=CSS속성: 값;>내용</태그>예제 코드아래 예제는 두 번째 <p&g
HTML에서는 tabindex 속성을 사용하여 요소의 탭 이동 순서(tabbing order)를 지정할 수 있습니다. 이 속성을 활용하면 키보드의 TAB 키를 눌렀을 때 포커스가 이동하는 순서를 원하는 대로 자유롭게 변경할 수 있습니다.아래 예제 코드를 실행하면 HTML에서 요소의 탭 순서를 설정하는 방법을 직접 확인할 수 있습니다 −예제<!DOCTYPE html> <html> <body> <a href = https://www.tutorialspoint.com/current_a
HTML의 <comment> 태그는 작성자가 HTML 코드 안에 주석을 남길 수 있도록 해주는 요소입니다.다만 실제로 코드에 주석을 추가할 때는 <!--...--> 형식을 사용하는 것이 권장됩니다. 이 방식은 모든 브라우저와 완벽하게 호환되며, 가장 표준적이고 안전한 주석 작성 방법입니다.참고: <comment> 태그는 HTML5에서 공식적으로 지원이 중단(deprecated)되었으므로 더 이상 사용하지 않는 것이 좋습니다.예제아래 예제는 <comment> 태그와 <!--...--&g
HTML5 translate 속성이란?HTML5의 translate 전역 속성은 특정 요소의 콘텐츠를 기계 번역 대상에 포함할지 여부를 지정하는 데 사용됩니다. 브라우저의 자동 번역 기능이나 Google Translate 같은 번역 도구가 페이지를 번역할 때, 이 속성을 통해 번역하지 않아야 할 부분(예: 브랜드명, 코드, 고유명사)을 명확하게 표시할 수 있습니다.translate 속성 값translate 속성은 다음 두 가지 값을 가질 수 있습니다.속성 값설명yes해당 요소의 콘텐츠를 번역해야 함을 나타냅니다.no해당 요소의 콘텐
HTML 하이퍼링크란?HTML에서 다른 문서로 연결하거나 현재 문서 내의 특정 위치로 이동하는 하이퍼링크를 만들 때는 <a>(앵커) 태그를 사용합니다. <a> 태그는 웹 페이지와 페이지를 연결하는 가장 기본적인 요소로, href 속성에 목적지 URL을 지정하는 것이 핵심입니다.<a> 태그의 주요 속성<a> 태그에는 용도에 따라 다양한 속성을 조합해 사용할 수 있습니다. 주요 속성과 그 의미는 다음과 같습니다.속성값설명charsetcharacter_encoding링크된 문서의 문자 인코딩을
HTML에서 이미지 맵(image map)의 영역을 정의하려면 <area> 태그를 사용합니다. 이미지 맵은 하나의 이미지 안에서 클릭 가능한 여러 영역을 만들어, 각 영역마다 서로 다른 링크를 연결할 수 있게 해주는 강력한 기능입니다.<area> 태그는 반드시 <map> 태그 내부에 위치해야 하며, <img> 태그의 usemap 속성과 연결되어 동작합니다.<area> 태그의 주요 속성HTML <area> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.속성값설명a
HTML5에서는 <article> 태그를 사용하여 기사 콘텐츠를 추가할 수 있습니다.article 태그란?HTML의 <article> 태그는 블로그 게시물, 포럼 글, 신문 기사 등 독립적으로 구분되는 콘텐츠를 나타낼 때 사용됩니다. 이 태그는 사이트, 문서, 페이지 또는 애플리케이션 안에서 그 자체로 완결된 하나의 콘텐츠 덩어리(self-contained composition)를 정의합니다.article 태그의 주요 사용 사례블로그 포스트뉴스 기사포럼 게시글사용자 리뷰나 댓글예제 코드다음 코드를 실행하면 HT
HTML에서 용어집(glossary) 정의를 추가하려면 <dl> 태그를 사용합니다. HTML의 <dl>(Definition List) 태그는 정의 목록을 선언할 때 사용되며, 목록을 구성하는 개별 항목은 <dt> 태그와 <dd> 태그로 작성합니다.정의 목록은 일반적인 목록과 비슷하지만, 한 가지 중요한 차이점이 있습니다. 바로 각 항목이 두 개의 요소, 즉 용어(term)와 설명(description)으로 구성된다는 점입니다.정의 목록을 구성하는 주요 태그<dl>: 정의 목록 전
웹 페이지에서 굵은 텍스트를 표시하려면 <strong> 태그를 사용합니다. HTML의 <strong> 태그는 단순히 글자를 굵게 보여주는 것을 넘어, 해당 텍스트가 중요하다는 의미를 브라우저와 검색 엔진에 전달하는 시맨틱(semantic) 태그입니다. 예제 다음 코드를 직접 실행하여 HTML에서 <strong> 태그가 어떻게 동작하는지 확인해 보세요. <!Doctype html> <html> <head> &l
HTML5 오디오 태그란?HTML5에서는 <audio> 태그를 사용하여 웹 페이지에 오디오를 간편하게 삽입할 수 있습니다. 과거에는 Flash와 같은 플러그인이 필요했지만, HTML5부터는 별도의 플러그인 설치 없이 브라우저에서 바로 오디오를 재생할 수 있습니다.기본 사용법<audio> 태그에 controls 속성을 추가하면 재생, 일시정지, 음량 조절 버튼이 화면에 표시됩니다. 그리고 <source> 태그를 이용해 오디오 파일의 경로(src)와 파일 형식(type)을 지정합니다.예제 코드아래 코드를