HTML에서 링크를 클릭했을 때 이동할 페이지의 URL을 지정하려면 앵커 태그(<a>)의 href 속성을 사용합니다. href는 hypertext reference의 약자로, 연결하고자 하는 문서나 리소스의 주소를 값으로 받습니다.기본 문법<a href=URL>링크 텍스트</a><a> 태그 사이에 작성한 텍스트가 화면에 표시되며, 사용자가 이 텍스트를 클릭하면 href 속성에 지정된 URL로 이동합니다.예제아래 코드를 실행하면 href 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.&
HTML에서 srclang 속성은 <track> 요소로 추가되는 텍스트 트랙(자막, 캡션 등)의 언어를 지정하는 데 사용됩니다. 특히 kind=subtitles로 설정된 자막 트랙에는 이 속성을 반드시 지정해야 하며, 값은 유효한 BCP 47 언어 코드(예: en, ko, ru)여야 합니다.주요 속성 정리src: 자막 파일(.vtt)의 경로를 지정합니다.kind: 트랙의 종류를 나타냅니다. 자막은 subtitles, 청각 장애인용 캡션은 captions 등으로 설정할 수 있습니다.srclang: 트랙 텍스트 데이터의 언어
HTML에서 브라우저 창 크기나 기기 환경 등 다양한 상황에 따라 서로 다른 이미지를 표시하고 싶다면 srcset 속성을 사용하면 됩니다. 이 속성은 반응형 웹 디자인에서 필수적인 기능으로, 화면 조건에 가장 적합한 이미지를 자동으로 선택해 로드할 수 있도록 도와줍니다.예제아래 코드를 직접 실행해 보세요. 브라우저 창의 너비를 조절하면 화면 크기에 맞춰 서로 다른 이미지가 로드되는 것을 확인할 수 있습니다.<!DOCTYPE html> <html> <head> &nb
HTML에서 입력 필드에 허용되는 숫자 간격을 지정하려면 step 속성을 사용합니다. step 속성은 숫자 입력 필드(type=number)에서 유효한 값의 증가 단위를 정의합니다. 예를 들어 step 값을 5로 설정하면 0, 5, 10, 15, 20처럼 5씩 증가하는 값만 입력할 수 있습니다. step 속성은 min(최솟값) 및 max(최댓값) 속성과 함께 사용하여 유효한 값의 범위를 더욱 정교하게 제한할 수 있습니다. 기본 문법 <input type=number name=points step=5> 예제 다음 코드를 실
HTML에서 문서가 인쇄되기 직전에 특정 스크립트를 실행하고 싶다면 onbeforeprint 속성을 사용하면 됩니다. 이 속성은 사용자가 인쇄 명령을 실행했을 때, 실제 인쇄 작업이 시작되기 전에 지정된 JavaScript 함수를 자동으로 호출해 줍니다.onbeforeprint 속성이란?onbeforeprint는 <body> 태그에 적용할 수 있는 이벤트 속성으로, 인쇄 대화상자가 열리기 전에 원하는 동작을 수행할 수 있게 해줍니다. 예를 들어, 인쇄용 페이지 스타일을 미리 조정하거나 사용자에게 안내 메시지를 표시하는 등
웹 개발을 하다 보면 사용자가 페이지를 떠나기 직전에 특정 작업을 수행해야 하는 경우가 있습니다. 예를 들어, 저장하지 않은 변경 사항이 있을 때 사용자에게 경고를 표시하거나, 페이지 이탈 전에 데이터를 정리해야 할 수 있죠.이럴 때 사용하는 것이 바로 onbeforeunload 이벤트 속성입니다. 이 이벤트는 문서가 언로드(unload)되기 바로 직전, 즉 사용자가 페이지를 닫거나 새로고침하거나 다른 페이지로 이동하려는 순간에 실행됩니다.onbeforeunload 이벤트의 주요 용도저장되지 않은 데이터가 있을 경우 사용자에게 확인
HTML에서 링크된 문서가 어디에서 열릴지 지정하려면 target 속성을 사용합니다. 이 속성은 <a> 태그와 함께 사용되며, 링크를 클릭했을 때 해당 문서가 새 탭에서 열릴지, 현재 탭에서 열릴지 등을 결정할 수 있습니다.target 속성의 주요 값target 속성에 사용할 수 있는 값은 다음과 같습니다.값설명_blank링크된 페이지를 새 탭(또는 새 창)에서 엽니다._self링크된 페이지를 현재 탭에서 엽니다. (기본값)_parent링크된 페이지를 부모 프레임에서 엽니다._top링크된 페이지를 최상위 프레임에서 엽니다
HTML에서 URL의 앵커(anchor) 부분, 즉 해시(#) 뒤에 오는 문자열이 변경되었을 때 특정 스크립트를 실행하고 싶다면 onhashchange 속성을 사용하면 됩니다.onhashchange 속성이란?onhashchange 속성은 URL의 해시(앵커) 부분이 변경될 때마다 지정된 JavaScript 함수를 자동으로 호출하는 이벤트 속성입니다. 주로 <body> 태그에 적용하며, 페이지를 새로고침하지 않고도 앵커 값의 변화를 실시간으로 감지할 수 있어 탭 전환, SPA(싱글 페이지 애플리케이션) 라우팅 등 다양한 기
HTML 문서에서 특정 요소에 추가 정보를 제공하려면 title 속성을 사용하면 됩니다. title 속성은 마우스 커서를 요소 위에 올렸을 때 툴팁(tooltip) 형태로 나타나는 보조 설명을 지정할 수 있어, 사용자에게 간단한 힌트나 안내를 전달하는 데 매우 유용합니다.title 속성이란?title 속성은 대부분의 HTML 요소에 적용할 수 있는 전역 속성입니다. 링크(<a>), 이미지(<img>), 버튼(<button>) 등에 짧은 설명을 붙일 수 있으며, 화면 낭독기(스크린 리더)도 이 정보를
HTML translate 속성이란?웹 페이지를 다국어로 제공할 때, 페이지 전체가 자동 번역되는 것을 원치 않는 경우가 있습니다. 예를 들어 브랜드명, 코드 예시, 고유명사 등은 번역되지 않아야 자연스럽습니다. 이럴 때 사용하는 것이 바로 HTML의 translate 속성입니다.translate 속성을 사용하면 특정 요소의 내용을 자동 번역 도구(예: Google 번역)가 번역할지 여부를 명시적으로 지정할 수 있습니다.translate 속성의 값translate 속성은 다음 두 가지 값을 가질 수 있습니다.속성 값설명yes해당 요
HTML에서 <input> 요소의 문자 너비를 조절하려면 size 속성을 사용하면 됩니다. size 속성은 입력 필드에 표시되는 문자 수를 기준으로 너비를 지정하며, 값으로 숫자를 입력합니다. 예를 들어 size=10으로 설정하면 약 10자 분량의 너비로 입력 상자가 표시됩니다. 참고로 size는 화면에 보이는 너비만 결정할 뿐, 실제로 입력할 수 있는 글자 수를 제한하지 않습니다. 입력 가능한 최대 글자 수를 제한하려면 maxlength 속성을 함께 사용해야 합니다. 예제 코드 <!DOCTYPE html> &
HTML에서는 width 속성을 사용하여 요소의 너비를 지정할 수 있습니다. 이 속성은 픽셀(px) 단위의 값으로 설정하며, 다음과 같은 요소들에 적용할 수 있습니다.<canvas><embed><img><input><video>width 속성 사용 예제아래 코드는 <video> 요소에 width 속성을 적용하여 동영상 플레이어의 너비와 높이를 지정한 예제입니다. 코드를 직접 실행해 보세요.<!DOCTYPE HTML> <html> &nbs
HTML에서 웹사이트 아이콘(파비콘)의 크기를 지정하려면 sizes 속성을 사용합니다. 이 속성은 <link> 태그와 함께 작동하며, 너비x높이 형식으로 픽셀 단위의 값을 입력합니다.예를 들어 sizes=16x16처럼 작성하며, 하나의 아이콘에 대해 여러 크기를 지정해야 할 경우 sizes=16x16 32x32와 같이 공백으로 구분하여 나열할 수도 있습니다.예제 코드<!DOCTYPE html> <html> <head> <li
HTML 테이블에서 여러 개의 열을 하나로 묶어 스타일을 일괄 적용하려면 span 속성을 사용하면 됩니다. 이 속성은 주로 <colgroup> 태그 안에 포함된 <col> 요소와 함께 사용되며, 해당 열 그룹이 몇 개의 열을 차지(확장)할지를 숫자로 지정합니다.예를 들어 span=2라고 설정하면 두 개의 열이 하나의 그룹으로 묶여 같은 배경색이나 너비 등의 스타일을 공유하게 됩니다.span 속성 사용 예제아래 코드는 첫 번째 열만 회색 배경으로 지정한 간단한 테이블 예제입니다. 직접 실행해 보면서 결과를 확인해
HTML에서는 spellcheck 속성을 사용하여 간단하게 맞춤법 검사 기능을 추가할 수 있습니다. 이 속성은 입력 요소(input), <textarea> 요소, 그리고 contenteditable 속성이 적용된 편집 가능한 요소 내의 텍스트에 대해 맞춤법과 문법을 검사합니다.spellcheck 속성 사용 시 주의사항spellcheck 속성은 일반적인 input 요소에는 정상적으로 작동하지만, 비밀번호 입력 필드(type=password)에는 적용되지 않습니다. 이는 보안상의 이유로 비밀번호 필드의 내용은 브라우저가 검사
사용자가 웹 페이지로 이동할 때 특정 스크립트를 실행하고 싶다면 onpageshow 속성을 사용하면 됩니다. 이 속성은 페이지가 처음 로드될 때뿐만 아니라, 브라우저의 뒤로 가기 버튼 등을 통해 캐시된 페이지로 다시 진입할 때에도 이벤트가 발생한다는 점이 특징입니다.예제다음 코드를 실행하면 onpageshow 속성이 어떻게 동작하는지 직접 확인할 수 있습니다.<!DOCTYPE html> <html> <body onpageshow = "display()"> &n
HTML에서 미디어 파일의 URL을 지정하려면 src(source) 속성을 사용합니다. 이 속성은 해당 요소가 재생하거나 표시할 외부 리소스의 경로를 브라우저에 알려주는 역할을 합니다. 아래 예제 코드를 직접 실행해 보면 src 속성이 실제로 어떻게 동작하는지 쉽게 확인할 수 있습니다.src 속성은 다음과 같은 HTML 요소들과 함께 사용할 수 있습니다: <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source
웹 개발을 하다 보면 사용자가 입력 필드에 텍스트를 붙여넣기하는 순간을 감지해야 하는 경우가 종종 있습니다. HTML에서는 바로 이럴 때 onpaste 속성을 사용하면 됩니다. onpaste는 사용자가 요소에 콘텐츠를 붙여넣는 순간 자동으로 트리거되는 이벤트 속성으로, 여기에 JavaScript 함수를 연결하면 붙여넣기 동작에 반응하는 스크립트를 실행할 수 있습니다. onpaste 기본 예제 아래 코드는 입력 필드에 텍스트를 붙여넣었을 때 화면에 메시지를 표시하는 간단한 예제입니다. 직접 실행해 보면서 동작을 확인해 보세요. <
<iframe> 요소 안에 표시할 페이지의 HTML 콘텐츠를 직접 지정하려면 srcdoc 속성을 사용하면 됩니다. 이 속성에 작성한 HTML 코드가 외부 파일 없이도 프레임 내부에 바로 렌더링되기 때문에, 간단한 콘텐츠나 동적으로 생성한 마크업을 삽입할 때 특히 유용합니다. 사용 예제 아래 코드는 srcdoc 속성을 활용해 iframe 내부에 제목을 표시하는 기본적인 예제입니다. <!DOCTYPE html> <html> <body> <iframe srcdoc = <
HTML에서 순서 있는 목록(ordered list)의 시작 번호를 변경하고 싶다면 start 속성을 사용하면 됩니다. 기본적으로 <ol> 태그는 1부터 번호를 매기지만, start 속성을 활용하면 원하는 숫자부터 목록을 시작할 수 있습니다.start 속성 기본 문법<ol start = >위 코드에서 따옴표 안에 목록을 시작하고 싶은 숫자를 입력하면 됩니다. 예를 들어 5번부터 시작하려면 start=5처럼 작성합니다.사용 예제아래 코드를 실행하면 start 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.