728x90
본 포스팅은 학교 수업을 듣고 정리한 내용입니다.
하이퍼링크와 항해
하이퍼링크 만들기
<a> 태그의 href 속성을 이용하여 하이퍼링크 작성
하이퍼링크(hyperlink) 란?
- 다른 HTML 페이지의 연결 고리
- 같은 웹 사이트의 다른 HTML 페이지
- 다른 웹 사이트의 HTML 페이지 모두 연결 가능
- 하이퍼링크는 텍스트나 이미지로 작성
항해
- 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것
하이퍼 링크 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul>
</body>
</html>
링크의 target 속성 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크의 target 속성 활용</title>
</head>
<body>
<h3>링크의 target 속성 활용</h3>
<hr>
<ul>
<li><a href="http://www.w3.org" target="_blank">W3C(새 윈도우, _blank)</a></li>
<li><a href="http://www.etnews.com" target="_self">전자신문(현재 윈도우, _self)</a></li>
<li><a href="http://www.naver.com" target="_parent">네이버(부모 윈도우, _parent)</a></li>
<li><a href="http://www.mk.co.kr" target="_top">매일 경제 신문(브라우저 윈도우, _top)</a></li>
</ul>
</body>
</html>
<a> 태그의 id 속성으로 앵커 만들기
앵커?
- HTML 페이지 내의 특정 위치
- <a id="앵커이름"> 으로 앵커 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>앵커로 이동하는 링크</title>
</head>
<body>
<h1>앵커로 이동하는 링크</h1>
<h2 id="section1">섹션 1</h2>
<p>이 섹션은 링크로 이동 가능한 부분입니다.</p>
<a href="#section1">섹션 1로 이동</a>
</body>
</html>
파일 다운로드 링크 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 다운로드 링크</title>
</head>
<body>
<h1>파일 다운로드 링크</h1>
<p>아래 링크를 클릭하여 파일을 다운로드하세요:</p>
<a href="파일의_경로_또는_URL" download="다운로드될_파일_이름">다운로드</a>
</body>
</html>
인라인 프레임
인라인 프레임 만들기, <iframe>
HTML 페이지 내에 HTML 페이지 삽입
2개의 인라인 프레임을 가진 웹 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이중 인라인 프레임 페이지</title>
</head>
<body>
<h1>이중 인라인 프레임 페이지</h1>
<p>첫 번째 인라인 프레임:</p>
<iframe src="https://www.example.com" width="400" height="300" frameborder="0"></iframe>
<p>두 번째 인라인 프레임:</p>
<iframe src="https://www.example2.com" width="400" height="300" frameborder="0"></iframe>
</body>
</html>
인라인 프레임에 출력할 문서를 srcdoc 속성으로 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 프레임과 srcdoc 속성</title>
</head>
<body>
<h1>인라인 프레임과 srcdoc 속성</h1>
<p>인라인 프레임에서 표시할 문서:</p>
<iframe srcdoc="
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>내부 문서</title>
</head>
<body>
<h2>안녕하세요, 내부 문서입니다!</h2>
<p>이것은 인라인 프레임에서 표시되는 문서입니다.</p>
</body>
</html>
" width="400" height="300" frameborder="0"></iframe>
</body>
</html>
브라우저와 윈도우 인라인 프레임의 계층 관계
인라인 프레임 윈도우의 이름
- <iframe src="iframe1.html name="left"> </iframe>
브라우저 윈도우와 인라인 프레임의 계층 관계
- 브라우저 윈도우와 프레임 윈도우는 부모 자식 관계
- 윈도우 사이의 계층 관계를 나타내는 용어
- parent 윈도우 - 부모 윈도우
- child 윈도우 - 부모 윈도우
- top 윈도우 - 최상위 브라우저 윈도우
- left, right 프레임의 parent 윈도우 : 브라우저 윈도우
- upper, lower 프레임의 parent 윈도우 : right 윈도우
- left, right, upper, lower 프레임의 top 윈도우 : 브라우저 윈도우
target 속성으로 출력할 윈도우 지정
target 속성
- <base>, <a>, <area>, <form> 태그에서 HTML 페이지를 출력할 윈도우 지정
- target 속성에 사용 가능한 값
- _blank - 새로운 브라우저 윈도우(탭) 생성
- _self - 현재 윈도우
- _parent - 부모 윈도우
- _top - 최상위 브라우저 윈도우
- 윈도우이름 - 대상 윈도우 이름
미디어 삽입
HTML5에서 웹 페이지에 미디어 삽입의 표준화
<audio>, <video> 태그
- HTML5에서 오디오 비디오를 삽입하는 표준 태그
- 플러그인 필요 없음
- HTML5 표준 브라우저는 플러그인 없이 오디오 비디오 재생
비 표준 미디어 재생 시
비 표준 미디어
- 플래시 등
<embed>, <object> 태그
<video> 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예시 동영상</title>
</head>
<body>
<h1>HTML5 Video 예제</h1>
<video width="640" height="360" controls>
<!-- 동영상 파일의 경로 또는 URL을 지정합니다 -->
<source src="example.mp4" type="video/mp4">
<!-- 다른 형식의 동영상을 지원할 경우 추가로 source 요소를 사용할 수 있습니다 -->
<!-- <source src="example.webm" type="video/webm"> -->
<!-- 자막(Captions)을 사용하는 경우 아래와 같이 track 요소를 추가할 수 있습니다 -->
<!-- <track kind="captions" src="captions.vtt" srclang="en" label="English"> -->
브라우저가 video 요소를 지원하지 않는 경우에 대한 대체 콘텐츠를 제공합니다.
</video>
</body>
</html>
<video> 태그 속성
- src: 동영상 파일의 경로 또는 URL을 지정합니다.
- controls: 이 속성을 사용하면 동영상 플레이어에 제어 버튼이 표시됩니다 (재생, 일시 정지, 볼륨 조절 등).
- width와 height: 동영상 플레이어의 너비와 높이를 지정합니다.
- autoplay: 이 속성을 사용하면 페이지가 로드될 때 자동으로 동영상이 재생됩니다.
- loop: 이 속성을 사용하면 동영상이 끝날 때 다시 처음부터 재생됩니다.
- muted: 이 속성을 사용하면 동영상의 음소거를 설정합니다.
- poster: 동영상이 로딩되기 전에 보이는 이미지를 지정합니다.
- preload: 동영상 파일의 로딩을 미리 시작할지 지연할지를 결정합니다. 값으로 "auto", "metadata", 또는 "none"을 사용할 수 있습니다.
- captions 또는 subtitles: 동영상에 대한 자막 파일을 지정합니다.
<audio> 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio 예제</title>
</head>
<body>
<h1>HTML5 Audio 예제</h1>
<audio controls autoplay>
<!-- MP3 형식의 음악 파일을 자동으로 재생합니다 -->
<source src="mymusic.mp3" type="audio/mp3">
<!-- MP3 형식의 음악 파일이 지원되지 않을 경우, OGG 형식의 음악 파일을 선택 재생합니다 -->
<source src="mymusic.ogg" type="audio/ogg">
브라우저가 audio 요소를 지원하지 않는 경우에 대한 대체 콘텐츠를 제공합니다.
</audio>
</body>
</html>
728x90
'Programming Language > HTML & CSS & JavaScript' 카테고리의 다른 글
| [HTML & CSS & JavaScript] 계산기(+, -, *) 프로그램 실습 (0) | 2023.12.28 |
|---|---|
| [HTML & CSS & JavaScript] 자바스크립트 코어객체와 배열 (10주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] 자바스크립트 (식과 연산자, 조건문, 반복문, 함수) (9주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #1 (2주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] 웹 개발의 시작 (1주차) (0) | 2023.11.21 |
