HTML DOM의 History length 속성은 현재 브라우저 창의 히스토리 목록에 저장된 URL의 개수를 반환합니다. 즉, 사용자가 해당 창에서 이동해 온 페이지 수를 JavaScript로 손쉽게 확인할 수 있습니다.참고로 이 값에는 최소 1이 포함되는데, 현재 페이지 자체도 히스토리에 기록되기 때문입니다. 또한 다른 탭이나 창의 히스토리는 별도로 관리되므로, 각 세션마다 고유한 히스토리 목록을 가지게 됩니다.문법(Syntax)History length 속성의 기본 사용 문법은 다음과 같습니다.history.length예제아래
HTML DOM에서 HTML 객체(HTML Object)는 HTML 문서의 최상위 요소인 <html> 태그를 나타냅니다. 자바스크립트를 사용하면 이 객체에 접근하여 문서 전체의 내용을 읽거나 조작할 수 있습니다.HTML 객체에 접근하는 방법HTML 객체는 다음과 같은 문법을 통해 접근할 수 있습니다.문법(Syntax)document.getElementsByTagName(HTML)getElementsByTagName() 메서드는 태그 이름이 일치하는 모든 요소를 NodeList 형태로 반환합니다. HTML 문서에는 <
HTML DOM iframe 객체는 HTML 문서 내의 <iframe> 요소를 자바스크립트로 다룰 수 있게 해주는 인터페이스입니다. 이 객체를 활용하면 웹 페이지 안에 다른 문서나 콘텐츠를 동적으로 삽입하고 제어할 수 있습니다.iframe 객체 생성 방법자바스크립트에서 iframe 객체를 새로 만들려면 다음과 같이 createElement() 메서드를 사용합니다.document.createElement(IFRAME);iframe 객체의 주요 속성iframe 객체가 제공하는 대표적인 속성은 아래 표와 같습니다.속성설명con
HTML DOM 이미지 객체란?HTML DOM의 이미지(Image) 객체는 HTML 문서 내 <img> 요소를 나타내며, JavaScript를 통해 이미지의 속성을 읽거나 수정하고, 동적으로 새로운 이미지를 생성할 때 사용됩니다.img 객체 생성 방법document.createElement() 메서드에 IMG를 전달하면 새로운 이미지 요소를 간단히 만들 수 있습니다.document.createElement(IMG);이미지 객체의 주요 속성이미지 객체에서 자주 사용되는 속성은 다음과 같습니다.속성설명alt이미지의 alt 속
HTML 문서를 작성할 때 가장 먼저, 그리고 반드시 문서 맨 위에 배치해야 하는 것이 바로 DOCTYPE(문서 유형 선언)입니다.DOCTYPE은 이 페이지가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에 알려주는 역할을 합니다. 덕분에 브라우저는 해당 버전에 맞는 표준 렌더링 방식으로 페이지를 해석할 수 있습니다. 또한 대소문자를 구분하지 않기 때문에 <!DOCTYPE html>처럼 소문자로 작성해도 무방합니다.DOCTYPE이 올바르게 선언되지 않으면 브라우저가 호환 모드(quirks mode)로 전환되어 의도하지
개요YouTube에 업로드된 동영상은 간단한 임베드(삽입) 작업만으로 HTML 웹 페이지에 손쉽게 추가할 수 있습니다. 이 글에서는 동영상 ID를 확인하는 방법부터 <iframe> 태그와 <embed> 태그를 활용해 동영상을 삽입하는 과정까지 예제와 함께 단계별로 살펴봅니다.1단계: 동영상 ID 확인하기동영상을 삽입하려면 먼저 해당 동영상의 고유 ID를 알아야 합니다.1단계: 원하는 동영상 페이지로 이동한 뒤, 동영상 위에서 마우스 오른쪽 버튼을 클릭하고 Stats for nerds(통계 정보) 메뉴를 선택합니
HTML DOM Object type 속성이란?HTML DOM의 Object type 속성은 <object> 요소의 type 속성 값을 설정하거나 반환하는 데 사용됩니다. 여기서 type 속성은 해당 객체가 나타내는 콘텐츠의 미디어 타입(MIME 타입)을 지정하는 역할을 합니다.type 속성 값 설정하기type 속성의 값을 설정하려면 다음과 같은 문법을 사용합니다.obj.type = type_of_media위 코드에서 type_of_media는 표준 미디어 타입을 의미하며, 예를 들어 image/bmp, image/tif
HTML DOM의 paddingLeft 속성은 HTML 요소의 왼쪽 안쪽 여백(padding) 값을 가져오거나 새로 설정할 때 사용하는 JavaScript 속성입니다. 이 속성을 활용하면 버튼 클릭 같은 사용자 이벤트에 반응해 요소의 왼쪽 여백을 동적으로 변경할 수 있습니다. 문법(Syntax) paddingLeft 속성의 기본 문법은 다음과 같습니다. 1. 왼쪽 패딩 값 가져오기 object.style.paddingLeft 2. 왼쪽 패딩 값 설정하기 object.style.paddingLeft = value; 설정 가능한 값(V
HTML DOM의 id 속성은 HTML 요소의 id 값을 반환하거나 새로 설정할 수 있게 해주는 기능입니다. 이 속성을 활용하면 자바스크립트만으로 특정 요소의 식별자를 동적으로 읽어오거나 수정할 수 있습니다.문법(Syntax)id 속성의 사용 문법은 다음과 같습니다.1. id 값 반환하기object.id2. id 값 설정하기object.id = value여기서 value는 해당 요소에 지정하고자 하는 id 값을 의미합니다.예제(Example)id 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 단락(p) 요소의 현재
HTML DOM의 innerHTML 속성은 요소(element) 내부의 HTML 콘텐츠를 읽어오거나 수정할 수 있게 해주는 강력한 기능입니다. 여기서 말하는 내부 HTML(inner HTML)이란 해당 요소 안에 포함된 텍스트와 중첩된 HTML 태그 전체를 의미합니다.innerHTML을 활용하면 자바스크립트만으로 페이지의 특정 영역을 동적으로 변경할 수 있어, 버튼 클릭에 반응하는 인터랙티브한 웹 페이지를 쉽게 만들 수 있습니다.문법(Syntax)innerHTML 속성의 기본 문법은 다음과 같습니다.1. innerHTML 값 가져오
HTML DOM의 innerText 속성은 HTML 요소의 내부 텍스트 콘텐츠를 읽어오거나(반환), 새로운 텍스트로 수정할 수 있게 해주는 속성입니다. 자바스크립트로 웹 페이지의 텍스트를 동적으로 변경할 때 가장 많이 사용되는 방법 중 하나입니다. innerText 속성의 주요 특징 요소에 화면에 렌더링되는 텍스트만 반환합니다. CSS 스타일을 인식하여, display:none으로 숨겨진 텍스트는 제외됩니다. 값을 할당하면 기존 텍스트가 새 텍스트로 대체됩니다. 문법(Syntax) innerText 속성의 기본 문법은 다음과
HTML DOM에서 input 버튼의 type 속성은 해당 입력 요소가 어떤 유형(type)인지 문자열로 반환합니다. 반환될 수 있는 값은 총 세 가지로, button(일반 버튼), submit(폼 제출 버튼), reset(폼 초기화 버튼)입니다.이 속성은 읽기 전용이며, 자바스크립트를 통해 동적으로 생성된 버튼이나 사용자가 클릭한 버튼의 실제 유형을 확인해야 할 때 특히 유용합니다.문법(Syntax)type 속성의 기본적인 사용 문법은 다음과 같습니다.object.type예제(Example)아래 예제는 input 버튼의 type
HTML DOM의 value 속성은 입력 버튼(input) 요소의 value 속성값을 읽어오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 버튼에 표시되는 텍스트를 동적으로 제어할 수 있어, 클릭 이벤트에 따라 버튼 문구를 바꾸는 등 다양한 인터랙션을 구현할 수 있습니다. 문법(Syntax) value 속성의 기본 문법은 다음과 같습니다. 1. 값 가져오기(반환) object.value 2. 값 설정하기(수정) object.value = 텍스트 예제 다음은 value 속성으로 버튼의 기존 텍스트를 읽어온 뒤, 새로
HTML DOM의 name 속성은 HTML 문서에서 입력 버튼(input button) 요소의 name 속성 값을 가져오거나 변경하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 버튼의 이름을 동적으로 읽어오고 수정할 수 있어, 폼 처리나 이벤트 핸들링 시 매우 유용하게 활용됩니다.구문(Syntax)name 속성의 기본 구문은 다음과 같습니다.1. name 값 반환하기object.name2. name 값 변경하기object.name="text"여기서 "text"는 해당 입력 버튼에 새롭게
HTML 캔버스 stroke() 메서드란?HTML5 <canvas> 요소는 자바스크립트(JavaScript)를 이용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 강력한 도구입니다. 그중 stroke() 메서드는 moveTo()와 lineTo() 등으로 미리 정의한 경로(path)를 실제 화면에 선으로 그려주는 역할을 합니다.<canvas> 요소는 기본적으로 width와 height 속성을 통해 캔버스의 너비와 높이를 각각 지정할 수 있습니다. stroke() 메서드로 경로를 그리는 일반적인 작업 순
HTML DOM에서 Address 객체는 문서 내의 <address> 요소를 나타내는 데 사용됩니다. 이 객체를 활용하면 JavaScript로 동적으로 주소 정보를 담은 요소를 생성하거나 조작할 수 있습니다.Address 객체란?<address> 요소는 일반적으로 웹 페이지에서 작성자나 소유자의 연락처 정보를 표시할 때 사용됩니다. DOM의 createElement() 메서드를 사용하면 런타임에 새로운 address 요소를 만들어 문서에 추가할 수 있습니다.예제다음 예제는 버튼을 클릭하면 새로운 <addr
HTML 캔버스(Canvas)의 shadowOffsetY 속성은 도형에서 그림자가 떨어져 있는 세로(수직) 거리를 설정하는 데 사용됩니다. <canvas> 요소는 자바스크립트(JavaScript)를 활용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 강력한 도구입니다.캔버스의 기본 구조모든 캔버스는 크기를 정의하는 두 가지 속성을 가지고 있습니다. 바로 캔버스의 높이(height)와 너비(width)입니다. 이 두 값을 지정하면 원하는 크기의 드로잉 영역을 만들 수 있습니다.shadowOffsetY 속성 문법s
HTML의 <optgroup> 요소에서 disabled 속성은 옵션 그룹(option-group) 전체를 비활성화하는 데 사용됩니다. 이 속성이 지정되면 해당 옵션 그룹은 클릭할 수 없는 상태가 되며, 그룹 안에 포함된 모든 옵션 역시 더 이상 선택할 수 없습니다. disabled 속성 문법(Syntax) <optgroup disabled> disabled 속성은 별도의 값 없이 단독으로 작성하며, XHTML 문법을 따르는 경우 disabled=disabled 형태로도 표기할 수 있습니다. 예제(Example)
HTML DOM Style lineHeight 속성이란?HTML DOM Style의 lineHeight 속성은 텍스트에서 줄과 줄 사이의 간격, 즉 행 높이(line height)를 설정하거나 현재 값을 반환하는 데 사용됩니다. 문단의 가독성을 조절하거나 디자인 의도에 맞게 텍스트 배치를 다듬을 때 유용하게 활용할 수 있습니다.구문(Syntax)lineHeight 속성의 현재 값을 가져오려면 다음과 같이 작성합니다.object.style.lineHeightlineHeight 속성을 새로 설정하려면 다음 구문을 사용합니다.object
HTML 캔버스(Canvas)의 shadowBlur 속성은 그림자의 흐림(blur) 정도를 설정하는 데 사용됩니다. 기본값은 0이며, 값이 커질수록 그림자가 더 부드럽고 넓게 퍼지는 효과를 냅니다.<canvas> 요소는 자바스크립트(JavaScript)를 활용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 HTML5의 강력한 기능입니다. 모든 캔버스는 크기를 정의하는 두 가지 속성, 즉 height(높이)와 width(너비)를 가지고 있습니다.shadowBlur 속성 문법shadowBlur 속성의 기본적인 사용