공공기획 스튜디오 퍼블리크

웹 브라우저/페이지 제어를 위한 인터페이스 본문

Reference

웹 브라우저/페이지 제어를 위한 인터페이스

public 2025. 8. 5. 19:22

1. Document Object Model

1.1. 개요

<!DOCTYPE html>
<html>
<head>
	<title>문서 제목</title>
</head>
<body>
	<h1>HTML DOM</h1>
    <p class="text">DOM 트리</p>
</body>
</html>

See the Pen public.re.kr/52-1-1-01 by Lee Deokho (@duqe) on CodePen.

1.2. DOM 객체의 접근방법

See the Pen public.re.kr/52-1-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-1-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-1-2-03 by Lee Deokho (@duqe) on CodePen.

1.3. DOM 요소 객체 수정

See the Pen public.re.kr/52-1-3-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-1-3-02 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-1-3-03 by Lee Deokho (@duqe) on CodePen.

1.4. DOM 객체의 삽입과 삭제

See the Pen public.re.kr/52-1-4-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-1-4-02 by Lee Deokho (@duqe) on CodePen.

2. Browser Object Model

2.1. 개요(및 비window 객체의 속성과 메서드)

객체 속성 메서드
history hash host, hostname, href, pathname, port, protocol 등 assign(), reload(), replace()
location length back(), forward(), go()
navigator appCodeName, appName, appVersion, language, platform, product, vendor 등 javaEnabled()
screen avaiHeight, avaiWidth, pixelDepth, colorDepth, height, width --

2.2. window 객체

 window 객체의 주요 메서드 설명
open() 새로운 윈도우 열기
- Param1: URL
- Param2: target
- Param3: height(pixel), width(pixel), left(pixel), top(pixel), location(yes/no), menubar(yes/no), status(yes/no) , resizeable(yes/no)
close() 열림 창 닫기
setInterval() 일정 시간 간격으로 함수를 반복적 호출, 함수 수행을 중지하기 위해 clearInterval() 사용
setTimeout() 일정 시간 후에 지정 함수 수행, 함수 수행 중지를 위해 clearTimeout() 사용
alert() 경고창 표시
confirm() 확인창 표시
prompt() 입력창 표시
moveBy(폭, 높이) 윈도우를 현재 위치에서 지정한 픽셀만큼 이동
moveTo(x좌표, y좌표) 윈도우를 지정한 위치로 이동
resizeBy(폭, 높이) 윈도우의 크기를 지정된 크기 만큼 변경
resizeTo(x좌표, y좌표) 윈도우의 크기를 지정한 크기로 변경

See the Pen public.re.kr/52-2-2-01-main by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-2-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-2-2-03 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-2-2-04 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-2-2-05 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/52-2-2-06 by Lee Deokho (@duqe) on CodePen.

[참고자료]

저작자표시 비영리 동일조건 (새창열림)

'Reference' 카테고리의 다른 글

최신 ICT 시사상식 2023  (0) 2025.06.24
Photoshop CC 화면 깜빡임 오류  (0) 2025.06.24
웹 프로그래밍은 사용자와 대화를 위한 서비스 로직을 구성하는 것  (0) 2025.02.17
웹 디자인의 통일된 문서 양식과 일관성 있는 디자인 요소의 이해  (0) 2025.02.17
웹 기획을 위한 웹페이지의 구조적 이해  (0) 2025.02.17
'Reference' Related Articles more