HTML에서는 media 속성을 사용하여 링크된 문서가 어떤 미디어나 기기에 최적화되어 있는지 지정할 수 있습니다. 이 속성은 주로 스타일시트를 화면, 프린터 등 특정 출력 대상에 맞게 적용할 때 활용됩니다. media 속성은 다음과 같은 요소들과 함께 사용할 수 있습니다. <a> – 하이퍼링크를 정의하는 요소 <area> – 이미지 맵의 클릭 가능한 영역을 정의하는 요소 <link> – 외부 리소스(스타일시트 등)를 연결하는 요소 <source> – 미디어 파일의 대체 소스를 지정하는
HTML5 드래그 앤 드롭 API에서 ondragenter 속성은 드래그 중인 요소가 유효한 드롭(놓기) 대상 영역으로 진입하는 순간 지정된 스크립트를 실행합니다. 사용자가 어떤 요소를 끌어다가 특정 영역 위로 가져가는 바로 그 시점에 이벤트가 발생하므로, 하이라이트 표시나 안내 메시지 출력 등 다양한 상호작용을 구현할 수 있습니다.ondragenter 속성의 기본 문법드롭 대상이 되는 요소에 아래와 같이 ondragenter 속성을 추가하면, 해당 영역으로 드래그가 진입할 때마다 지정한 자바스크립트 함수가 호출됩니다.<ele
HTML에서 입력 필드에 허용되는 최소값을 지정하려면 min 속성을 사용합니다. 이 속성은 주로 숫자나 날짜 입력 필드에서 사용자가 입력할 수 있는 값의 하한선을 정의하는 데 활용됩니다. min 속성이란? min 속성은 <input> 요소에서 허용되는 최솟값을 설정합니다. type=number, type=date, type=range 등 다양한 입력 유형과 함께 사용할 수 있으며, 폼 제출 시 브라우저가 자동으로 유효성 검사를 수행하여 최소값 미만의 입력을 차단합니다. 예제 코드 다음 코드를 실행하여 min 속성의 실제
HTML에서 폼(form) 데이터를 서버로 전송할 때 사용할 HTTP 메서드를 지정하려면 method 속성을 사용합니다. 이 속성은 <form> 태그 안에 작성되며, 일반적으로 get과 post 두 가지 값을 가집니다.method 속성의 주요 값get(기본값): 폼 데이터가 URL 뒤에 쿼리 문자열 형태로 붙어 전송됩니다. 검색어 조회처럼 간단하고 노출이 허용되는 요청에 적합합니다.post: 폼 데이터가 HTTP 요청 본문(body)에 담겨 전송됩니다. 비밀번호 같은 민감한 정보나 대용량 데이터를 보낼 때 권장됩니다.예제
HTML에서는 multiple 속성을 사용하여 사용자가 하나의 입력 필드에 두 개 이상의 값을 입력할 수 있도록 지정할 수 있습니다.이 속성은 주로 <input type=file> 요소와 함께 사용되어 한 번에 여러 파일을 업로드할 수 있게 해주며, <input type=email>이나 <select> 요소에도 적용할 수 있습니다. multiple 속성은 불리언(Boolean) 속성이므로 별도의 값을 지정하지 않고 속성 이름만 작성하면 됩니다.예제아래 코드를 실행하면 multiple 속성을 직접 확인
HTML에서 onerror 이벤트는 요소를 로드하는 과정에서 오류가 발생했을 때 트리거됩니다. 가장 대표적인 예로, 이미지 파일이 존재하지 않거나 경로가 잘못되어 로드에 실패하는 경우를 들 수 있습니다. 이때 onerror 이벤트 속성을 활용하면 오류 상황을 감지하여 사용자에게 알림을 표시하거나 대체 이미지로 교체하는 등의 후속 처리를 수행할 수 있습니다. 예제 아래 코드를 실행하면 onerror 이벤트 속성의 실제 동작을 확인할 수 있습니다. <!DOCTYPE html> <html> <body&g
HTML에서 비디오의 오디오 출력을 음소거 상태로 설정하려면 muted 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 타입으로, <video> 태그에 추가하기만 하면 해당 비디오가 재생될 때 소리가 자동으로 음소거됩니다.자동 재생(autoplay) 기능과 함께 사용할 때 특히 유용합니다. 대부분의 브라우저는 사용자 경험 보호를 위해 소리가 켜진 자동 재생을 차단하지만, muted 속성이 적용된 비디오는 자동 재생이 허용되기 때문입니다.예제다음 코드를 실행하여 muted 속성이 실제로 어떻게 동작하는지 확인해
HTML에서 novalidate 속성을 사용하면 폼(form)을 제출할 때 브라우저가 기본적으로 수행하는 입력값 유효성 검사를 생략하도록 지정할 수 있습니다. 이 속성은 불리언(Boolean) 속성으로, <form> 태그에 추가하기만 하면 되며 별도의 값을 설정할 필요가 없습니다.novalidate 속성이 적용되면 필수 입력란이 비어 있거나 이메일 형식이 올바르지 않은 경우에도 브라우저가 오류 메시지를 표시하지 않고 그대로 폼을 전송합니다.novalidate 속성 사용 예제<!DOCTYPE html> <h
HTML에서 요소에 이름을 부여하려면 name 속성을 사용합니다. 이 속성은 주로 폼 데이터를 서버로 전송할 때 각 입력 값들을 구분하는 식별자 역할을 하며, 자바스크립트나 CSS에서 특정 요소를 참조할 때도 활용됩니다.name 속성은 다음과 같은 HTML 요소에서 사용할 수 있습니다.<button><fieldset><form><iframe><input><map><meta><object><output><param><sel
HTML details 요소의 open 속성이란?HTML에서 <details> 요소에 open 속성을 사용하면 페이지가 로드되는 순간 세부 정보가 접히지 않고 펼쳐진 상태로 사용자에게 표시됩니다. 이 속성은 불리언(Boolean) 속성이므로 별도의 값을 지정할 필요 없이 속성 이름만 작성하면 됩니다.반대로 open 속성을 생략하면 세부 정보는 기본적으로 접힌 상태로 시작되며, 사용자가 <summary> 영역을 클릭해야만 내용을 확인할 수 있습니다.open 속성 사용 예제다음 코드를 실행하여 open 속성이 실제
HTML에서 동영상 자막 등 텍스트 트랙에 제목을 지정하려면 <track> 요소의 label 속성을 사용하면 됩니다. label 속성은 사용자가 플레이어 메뉴에서 자막 트랙을 선택할 때 화면에 표시되는 이름을 정의하는 역할을 합니다.label 속성이란?label 속성은 해당 텍스트 트랙이 어떤 언어나 용도를 가지고 있는지 사용자에게 알려주는 읽기 전용 문자열입니다. 예를 들어 영어 자막에는 English, 한국어 자막에는 한국어처럼 사람이 알아보기 쉬운 제목을 붙일 수 있습니다.참고로 kind=subtitles로 지정된
HTML에서 요소의 콘텐츠 언어를 지정하려면 lang 속성을 사용합니다. 이 속성은 해당 요소 안에 담긴 텍스트가 어떤 언어로 작성되었는지 브라우저, 검색 엔진, 스크린 리더 등에 알려주는 역할을 합니다.lang 속성이 중요한 이유검색 엔진이 페이지 내용의 언어를 정확하게 파악하여 SEO에 도움이 됩니다.스크린 리더가 올바른 발음으로 텍스트를 읽어 접근성이 향상됩니다.브라우저가 언어에 맞는 하이픈 넣기, 따옴표 스타일, 글꼴 렌더링 등을 적용할 수 있습니다.예제아래 예제에서는 영어뿐만 아니라 프랑스어와 스페인어로 작성된 콘텐츠도 함
HTML에서 <input> 요소에 미리 정의된 옵션 목록을 제공하려면 <datalist> 요소를 사용하고, 두 요소를 연결할 때는 list 속성을 활용합니다. 핵심은 <input> 요소의 list 속성 값과 <datalist> 요소의 id 값을 동일하게 지정하는 것입니다. 이렇게 하면 입력 필드를 클릭하거나 타이핑할 때 미리 정의된 옵션들이 자동 완성 형태로 나타납니다.예제<!DOCTYPE html> <html> <head>
동영상 재생 중 자막 큐(cue)가 바뀌는 순간 특정 스크립트를 실행하고 싶다면 oncuechange 속성을 활용하면 됩니다. 이 속성은 HTML의 <track> 요소와 함께 사용되며, 현재 표시 중인 텍스트 트랙의 큐가 변경될 때마다 지정한 JavaScript 코드가 자동으로 실행됩니다.oncuechange 속성 기본 문법가장 간단한 사용 형태는 다음과 같습니다. <track> 요소에 oncuechange 속성을 직접 작성하면 큐가 변경될 때마다 해당 이벤트 핸들러가 호출됩니다.<video> &
HTML에서 <meter> 태그의 low 속성을 사용하면 측정값 중 낮은 값으로 간주되는 범위를 설정할 수 있습니다. <meter> 태그는 디스크 사용량, 연료 잔량, 설문 결과처럼 정해진 범위 안의 스칼라 값을 시각적으로 표현할 때 유용합니다.low 속성과 함께 min(최솟값), max(최댓값), high(높은 값 기준) 속성을 조합하면 게이지의 상태를 더욱 정교하게 제어할 수 있습니다.예제다음 코드를 실행하여 low 속성이 실제로 어떻게 동작하는지 직접 확인해 보세요.<!DOCTYPE html>
HTML에서 미디어가 재생을 마친 후 자동으로 처음부터 다시 시작되도록 하려면 loop 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 타입으로, <audio> 또는 <video> 태그에 추가하기만 하면 해당 미디어가 무한히 반복 재생됩니다.loop 속성 사용 예제아래 코드는 loop 속성을 적용하여 비디오가 끝날 때마다 자동으로 다시 재생되도록 구현한 예제입니다.<!DOCTYPE HTML> <html> <body> &
HTML에서 입력 필드에 허용되는 최댓값을 지정하려면 max 속성을 사용합니다. 이 속성은 주로 <input> 태그와 함께 사용되며, 숫자나 날짜 입력 시 사용자가 입력할 수 있는 상한선을 정해줍니다.예를 들어, 숫자 입력 필드에서 최솟값이 1이고 최댓값이 10으로 설정되어 있다면, 사용자는 그 범위를 벗어나는 값을 입력할 수 없습니다. 폼 제출 시 브라우저가 자동으로 유효성을 검사하기 때문에 별도의 JavaScript 코드 없이도 간편하게 입력값을 제한할 수 있습니다.max 속성 사용 예제아래 코드는 숫자 입력 필드에
HTML에서 입력 필드에 허용되는 최대 문자 수를 제한하려면 maxlength 속성을 사용합니다. 이 속성은 텍스트 입력란(<input type=text>)이나 <textarea>에 적용할 수 있으며, 사용자가 지정된 문자 수를 초과하여 입력하지 못하도록 자동으로 차단해 줍니다.maxlength 속성 예제다음 코드는 maxlength 속성을 실제로 구현한 예제입니다. Cricketer(크리켓 선수) 입력란에는 최대 20자까지만 입력할 수 있으며, 숫자 입력란인 Rank(순위)는 min과 max 속성으로 1~10
ondrop 속성이란?HTML의 ondrop 속성은 드래그한 요소를 특정 영역에 놓는(dropping) 순간에 지정된 스크립트를 실행하는 이벤트 핸들러입니다. 파일 업로드, 카드 정렬, 목록 재배치 같은 드래그 앤 드롭 인터랙션을 구현할 때 핵심적으로 사용됩니다.참고: ondrop 이벤트가 정상적으로 발생하려면 대상 요소의 ondragover 이벤트에서 반드시 event.preventDefault()를 호출해야 합니다. 브라우저는 기본적으로 요소 위에 다른 요소를 드롭하는 것을 허용하지 않기 때문입니다.예제아래 예제 코드를 실행하면
HTML에서 ondurationchange 속성은 오디오 또는 비디오의 재생 길이(듀레이션)가 변경되는 순간 자동으로 트리거되는 이벤트 속성입니다.ondurationchange 속성이란?브라우저가 미디어 파일의 메타데이터를 읽어 들이면 재생 시간(duration)이 처음 설정되며, 이때 ondurationchange 이벤트가 발생합니다. 또한 스트리밍 방식으로 콘텐츠를 제공하는 경우 서버에서 전송되는 데이터에 따라 길이 정보가 갱신될 때마다 이 이벤트가 다시 트리거됩니다.이 속성은 동영상의 총 재생 시간을 사용자에게 표시하거나, 특