HTML5에서는 contextmenu 속성을 사용하여 특정 요소에 대한 컨텍스트 메뉴(우클릭 메뉴)를 만들 수 있습니다. 컨텍스트 메뉴는 사용자가 해당 요소 위에서 마우스 오른쪽 버튼을 클릭했을 때 나타납니다.기본 사용법컨텍스트 메뉴를 구현하려면 다음 두 가지가 필요합니다.메뉴를 표시할 요소에 contextmenu 속성을 추가하고, 메뉴의 id 값을 지정합니다.<menu type=context> 안에 <menuitem> 요소들을 정의하여 실제 메뉴 항목을 구성합니다.예제 코드아래 코드를 실행하면 박스 영역 안에
HTML에서 요소의 높이를 지정하려면 height 속성을 사용합니다. 이 속성은 <canvas>, <embed>, <img>, <input>, <video> 등 다양한 요소와 함께 활용할 수 있습니다. 예제 아래 코드를 직접 실행해 보면 HTML에서 height 속성이 어떻게 적용되는지 확인할 수 있습니다. <!DOCTYPE HTML> <html> <body> <video width
HTML5에서는 draggable 속성을 사용하여 마우스로 끌어서 이동할 수 있는 드래그 가능한 단락을 간단히 만들 수 있습니다.이 속성은 true와 false 두 가지 값을 가집니다. true로 설정하면 해당 요소의 드래그가 활성화되고, false로 설정하면 드래그가 비활성화됩니다.draggable 속성의 주요 이벤트드래그 앤 드롭 기능을 완성하려면 다음과 같은 자바스크립트 이벤트를 함께 활용하는 것이 좋습니다.dragstart – 드래그가 시작될 때 발생합니다. dataTransfer 객체에 데이터를 설정합니다.drag – 요소
HTML5에서는 hidden 속성을 사용하여 단락(문단)을 숨길 수 있습니다. 이 속성이 적용된 요소는 화면에 표시되지 않으며, 더 이상 관련성이 없거나 일시적으로 보여줄 필요가 없는 콘텐츠를 마크업할 때 유용합니다.hidden 속성의 특징hidden은 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 작성하는 것만으로 활성화됩니다. 브라우저는 이 속성이 있는 요소를 기본적으로 display: none 상태로 처리하여 사용자에게 보이지 않게 합니다.별도의 CSS나 JavaScript 없이 간단하게 요소를 숨길 수 있습니다
onkeyup 속성으로 키 입력 이벤트 처리하기사용자가 키보드의 키를 놓는(눌렀다 뗐을 때) 순간에 스크립트를 실행하려면 HTML의 onkeyup 속성을 사용하면 됩니다.onkeyup 속성은 사용자가 키를 떼는 시점에 지정된 JavaScript 함수를 호출합니다. 키를 누르는 순간에 반응하는 onkeydown과 달리, onkeyup은 키에서 손을 뗀 후에 실행되기 때문에 최종 입력값을 처리할 때 유용합니다.예제아래 코드를 실행해 보세요. 텍스트 상자 안에서 키를 하나 눌렀다 떼면 스크립트가 실행됩니다.<!DOCTYPE html
HTML에서 dir 속성을 사용하면 단락(문단)의 텍스트 방향을 간단하게 지정할 수 있습니다. 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 웹 페이지에 표시할 때 특히 유용합니다. dir 속성으로 RTL 방향 설정하기 단락을 오른쪽에서 왼쪽(right-to-left) 방향으로 배치하려면 해당 요소에 dir 속성을 추가하고 값으로 rtl을 지정하면 됩니다. 이렇게 하면 텍스트가 자동으로 오른쪽에서 왼쪽으로 정렬되어 화면에 표시됩니다. 예제 아래 코드를 직접 실행하면 dir 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다.
HTML에서 특정 요소의 로딩이 완료되었을 때 스크립트를 실행하려면 onload 속성을 사용하면 됩니다. 이 속성은 페이지나 이미지 등의 요소가 완전히 불러와진 시점에 지정한 자바스크립트 함수를 자동으로 호출해 줍니다.onload 속성이란?onload 속성은 주로 <body> 태그에 사용되어 웹페이지 전체의 로딩이 끝난 후 특정 동작을 수행하도록 합니다. 예를 들어 환영 메시지를 표시하거나, 초기 데이터를 설정하는 작업에 활용할 수 있습니다.예제 코드아래 코드는 body 요소의 로딩이 완료되면 display() 함수를 호
HTML의 lang 속성을 사용하면 영어 외의 다른 언어로 작성된 콘텐츠를 페이지에 포함할 수 있습니다. 이 속성은 해당 요소 안의 텍스트가 어떤 언어인지 브라우저와 검색 엔진, 스크린 리더에게 알려주는 역할을 합니다.lang 속성이 중요한 이유lang 속성을 올바르게 지정하면 화면 낭독 프로그램이 정확한 발음으로 텍스트를 읽어주고, 검색 엔진이 언어별로 콘텐츠를 더 잘 인식하며, 브라우저의 맞춤법 검사나 하이픈 처리도 해당 언어 규칙에 맞게 동작합니다.예제아래 예제에서는 영어뿐만 아니라 프랑스어와 스페인어 콘텐츠도 함께 추가했습니
HTML에서 요소에 고유 ID를 부여하려면 id 속성을 사용합니다. id 속성은 문서 내에서 해당 요소를 유일하게 식별할 수 있도록 해주며, CSS 스타일 지정이나 JavaScript로 특정 요소를 조작할 때 매우 유용하게 활용됩니다.id 속성 사용 시 주의사항id 값은 하나의 HTML 문서 내에서 반드시 고유해야 합니다. 동일한 id를 여러 요소에 중복해서 사용하면 JavaScript의 getElementById() 메서드가 의도한 대로 작동하지 않을 수 있습니다.예제아래 코드를 실행하면 id 속성이 실제로 어떻게 동작하는지 확인
미디어 데이터가 로드될 때 특정 스크립트를 실행하고 싶다면 onloadeddata 이벤트를 사용하면 됩니다. 이 이벤트는 비디오나 오디오 같은 미디어 요소의 첫 번째 프레임 데이터가 로드를 마쳤을 때 발생합니다.onloadeddata 이벤트란?onloadeddata 이벤트는 브라우저가 현재 재생 위치에서 미디어 데이터를 처음으로 로드했을 때 트리거됩니다. 이 시점부터 사용자가 재생 버튼을 누르지 않고도 프레임을 확인할 수 있으므로, 로딩 완료 후 UI 업데이트나 알림 표시 등의 작업을 처리하기에 적합합니다.예제다음 코드는 비디오가
HTML에서 페이지의 구문 분석(파싱)이 모두 끝난 뒤에 스크립트를 실행하려면 defer 속성을 사용하면 됩니다.defer 속성이 지정된 외부 스크립트는 HTML 문서 파싱을 차단하지 않고 백그라운드에서 다운로드되며, 문서 파싱이 완료된 직후(DOMContentLoaded 이벤트 발생 전)에 순서대로 실행됩니다. 덕분에 페이지 로딩 속도가 느려지지 않으면서도 DOM 요소에 안전하게 접근할 수 있습니다.1단계: 자바스크립트 파일 추가먼저 자바스크립트 파일을 하나 생성합니다. 여기서는 파일 이름을 new.js로 지정하겠습니다.funct
HTML 폼에서 입력 필드의 텍스트 방향(왼쪽→오른쪽 또는 오른쪽→왼쪽) 정보를 서버로 함께 전송하고 싶다면 dirname 속성을 사용하면 됩니다. 이 속성은 사용자가 입력한 텍스트가 어떤 방향으로 작성되었는지를 폼 제출 시 함께 보내주는 역할을 합니다.제출되는 값은 해당 입력 필드의 name 속성값 뒤에 .dir이 붙은 형태로 전달됩니다. 예를 들어 name이 sname인 입력 필드에 dirname=sname.dir을 지정하면, 폼이 제출될 때 sname.dir=ltr 또는 sname.dir=rtl과 같은 형식으로 텍스트 방향이
HTML에서 특정 요소나 요소 그룹을 비활성화하려면 disabled 속성을 사용합니다. 이 속성이 적용된 요소는 화면에 표시되지만 클릭, 입력 등의 사용자 상호작용이 차단되며, 일반적으로 회색으로 표시되어 비활성화 상태임을 직관적으로 알 수 있습니다.disabled 속성을 지원하는 주요 요소disabled 속성은 폼 관련 요소에 사용할 수 있으며, 대표적인 대상은 다음과 같습니다.<button> – 버튼<input> – 텍스트, 체크박스, 라디오 버튼 등 모든 입력 필드<select> – 드롭다운 목
HTML에서는 dir 속성을 사용하여 요소 안에 있는 콘텐츠의 텍스트 방향을 지정할 수 있습니다. 이 속성은 주로 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 다룰 때 유용하게 활용됩니다.dir 속성의 주요 값ltr — 왼쪽에서 오른쪽으로 텍스트를 표시합니다(기본값).rtl — 오른쪽에서 왼쪽으로 텍스트를 표시합니다.auto — 브라우저가 콘텐츠를 분석하여 방향을 자동으로 결정합니다.예제다음 코드를 실행하면 dir 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.<!DOCTYPE html> <html&g
웹 페이지에서 링크를 클릭했을 때 해당 파일이 브라우저에서 열리지 않고 바로 다운로드되도록 만들고 싶다면, HTML5에서 제공하는 download 속성을 사용하면 됩니다. 이 속성은 <a> 태그에 추가하며, 속성 값에 다운로드될 파일의 이름을 지정할 수 있습니다.download 속성의 기본 문법download 속성은 다음과 같은 형태로 사용합니다.<a href=파일경로 download=저장될_파일명>다운로드 링크</a>속성 값을 생략하면 원본 파일명 그대로 저장되며, 값을 지정하면 지정한 이름으로 파
HTML에서 요소를 드래그할 수 있는지 여부를 설정하려면 draggable 속성을 사용합니다. 이 속성은 true와 false 두 가지 값으로 설정할 수 있으며, true로 지정된 요소만 마우스로 끌어서 이동할 수 있습니다. draggable 속성이란? draggable은 HTML5에서 도입된 전역 속성으로, 해당 요소가 사용자에 의해 드래그될 수 있는지를 지정합니다. 이미지와 링크(<a> 태그)는 기본적으로 드래그가 가능하지만, <div>나 <p> 같은 일반 요소는 draggable=true를 명시
dropzone 속성이란?HTML에서 드래그한 데이터를 특정 영역에 놓을(drop) 때, 해당 데이터를 복사(copy), 이동(move), 또는 연결(link) 중 어떤 방식으로 처리할지 지정하려면 dropzone 속성을 사용합니다.dropzone 속성의 세 가지 값copy(복사) — 드롭이 발생하면 드래그한 요소의 복사본이 생성됩니다.move(이동) — 드래그한 요소가 원래 위치에서 새로운 위치로 이동합니다.link(연결) — 드래그한 데이터 자체가 아닌, 해당 데이터를 가리키는 링크가 생성됩니다.기본 사용 예제다음은 dropzo
HTML에서 enctype 속성을 사용하면 폼(form) 데이터를 서버로 전송할 때 어떤 방식으로 인코딩할지 지정할 수 있습니다. 이 속성은 <form> 태그 안에 작성하며, 특히 파일 업로드가 포함된 폼을 만들 때 반드시 올바른 값을 설정해야 합니다.enctype 속성의 주요 값enctype 속성에는 다음과 같은 세 가지 값을 사용할 수 있습니다.application/x-www-form-urlencoded – 기본값입니다. 모든 문자가 인코딩되며, 공백은 + 기호로 변환됩니다. 일반적인 텍스트 데이터 전송에 적합합니다.
HTML에서 키를 누를 때 스크립트 실행하기사용자가 키를 누르는 순간 자바스크립트 코드를 실행하고 싶다면 onkeydown 속성을 활용하면 됩니다. onkeydown 속성은 사용자가 키를 누르는 순간 이벤트를 발생시키며, 입력 폼 유효성 검사, 실시간 검색, 단축키 구현 등 다양한 상황에서 유용하게 사용됩니다.onkeydown 속성이란?onkeydown은 HTML 요소에 직접 지정할 수 있는 이벤트 속성으로, 키보드의 키가 눌리는 시점에 지정된 자바스크립트 함수를 호출합니다. 키를 누르는 순간에 반응하기 때문에 onkeyup(키를
모든 HTML 요소에 사용자 정의 데이터를 저장하려면 data-* 속성을 활용할 수 있습니다. 사용자 정의 데이터 속성은 반드시 data-로 시작해야 하며, 속성 이름에는 대문자를 포함할 수 없습니다. 이 속성은 화면에는 표시되지 않지만 JavaScript나 CSS에서 자유롭게 읽어올 수 있어, 요소에 추가 정보를 담아 두는 데 매우 유용합니다. 예제 아래 예제에서는 리스트 항목마다 data-rank-type이라는 사용자 정의 데이터 속성을 지정하고, 항목을 클릭하면 해당 값을 읽어 알림 창으로 표시합니다. <!DOCTYPE