능글맞은 구렁이
HTML에서 그림, 멀티미디어와 링크 표현 본문
●이미지 삽입
웹 문서에 이미지를 삽입하기 위해서는 <img> 태그를 사용하며, 종료태그 없이 시작태그만 사용한다.
*<img>태그의 속성*
1. src="이미지파일경로" : HTML문서에 표시할 이미지 파일의 경로 지정
2. width="숫자" : 이미지의 폭 지정
3. height="숫자" : 이미지의 높이 지정
4. alt="내용" : 이미지가 표시되지 않을 때 대체될 텍스트를 지정
5. usemap="#이름" : 클라이언트 측의 이미지맵을 지정
※ GIF, JPG, PNG 파일의 특징※
-GIF : 256개의 색상만 지원, 투명배경 처리지원, 용량이 작음, 애니매니션 지원, 로고나 클립아트 형태의 이미지에 적합
-JPG : 트루컬러지원, 압축률이 좋아 용량이 작음, 사진과 같은 이미지에 적합
-PNG : 트루컬러지원, 투명배경 처리지원, 웹 전용 이미지 파일, 클립 아트와 같이 적은 생삭을 가진 이미지에 적합
*실습*
<!DOCTYPE html>
<html>
<head>
<title>img태그의 src속성</title>
</head>
<body>
<!--1번 이미지파일이 HTML문서와 같은 폴더에 있을경우-->
<img src="flower.jpg" border="1"><br/>
<!--2번 절대경로-->
<img src="C:\htmlEX\img\flower.jpg" width="100" height="100" border="1"><br/>
<!--3번 상대경로-->
<img src="img\fower.jpg width="20%" alt="장미꽃이미지입니다.">
</body>
</html>
●하이퍼링크삽입
HTML문서가 일반적인 문서와 구별되는 대표적인 특징은 바로 하이퍼링크이다. 이것을 이용하면 클릭을 통해 다른
HTML문서, 글자, 이미지, 동영상등의 특정 위치로 이동할 수 있다.
하이퍼링크를 삽입할 때는 <a>태그 ('anchor')를 사용한다.
*<a>태그의 속성*
1. href="URL" : 링크를 통해 이동하고자 하는 곳의 경로나 주소를 지정
2. target="창의이름" : 링크를 클릭하였을 때 링크된 내용이 표시될 창을 지정(현재 창에서 열리는지, 새로운창에서 열리는지)
target의 속성값-1) _blank : 새로운 창으로 링크된 문서를 엶
2) _self : 현재의 창에서 링크된 문서를 엶
3) _top : 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사랒리고 하나의 화면에서 링크된 문서를 엶
4) _parent : 부모 프레임에서 링크된 문서를 엶
5) 프레임명: 링크된 문서를 표시할 프레임의 이름을 직접 지정하는 경우
3. download : href 속성에 지정된 파일을 다운로드해서 저장
*<href="URL">*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.naver.com">네이버</a><br />
<a href="http://www.naver.com">durlfmf zmfflrgktpdy<img src="naver.gif"></a><br/>
</body>
</html>
*<target="창의이름"> *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.naver.com" target="_self">네이버(현재창)</a><br/>
<a href="http://www.naver.com" target="_blank">네이버(새로운창)</a><br/>
</body>
</html>
*download"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="HTML5_logo.jpg" download> HTML5 로고 다운받기 </a><br />
<a href="flower.jpg" download>꽃그림을 다운받기
<img src="flower.jpg"></a><br />
</body>
</html>
*id 속성을 사용한 특정 위치로의 이동*
한 페이지의 내용이 길어서 스크롤을 많이움직여야 하는 경우 <a>태그의 id속성을 사용하면 동일한 페이지의 특정 위치로 사용자를 바로 이동시킬 수 있다.
형식
-링크부분 : 1) 같은 페이지의 경우 : <a herf="#이동할 특정 위치의 이름">내용</a>
2) 다른 페이지의 경우 : <a herf="페이지경로#이름">내용</a>
-이동할 위치 : <a id="이동할 특정 위치의 이름">~~</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특정 위치로 이동</title>
</head>
<body>
<h3>목차</h3>
<a herf="#html">HTML이란 무엇인가?</a>
<a herf="#css">CSS란 무엇인가?</a>
<a herf="#JS">자바스크립트란무엇인가?</a>
<a herf="HTML5소개.HTML#HTML5특징>HTML5특징(다른페이지로 이동)</a><hr/>
<a id="html">HTML</a>
<p>HyperText Markup language</p>
<a id="#css>CSS</a>
<p>Cascading Style Sheet</p>
<a id="js">자바스크립트</a>
<p>클라이언트 쪽에서 독립적으로 실행되는 프로그램을 작성하기위한 스크립트언어</p>
<a href="#top">맨위로</a>
</body>
</html>
---------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다른페이지의 특정위치로 이동</title>
</head>
<body>
<h3>HTML5</h3>
<p>HTML5는 차세대 웹 문서 표준으로 W3C에서 채택되었다.</p><br />
<a id="HTML5특징">HTML5 특징</a>
<ol>
<li>강화된 마크업 요소</li>
<li>CSS3의 지원</li>
<li>자바스크립트를통한 다양한 api지원</li>
<li>모바일 웹 환경고려</li>
</ol>
</body>
</html>
*다양한 링크설정*
1. 이메일 링크 : <a herf="mailto:이메일주소">텍스트/이미지</a>
2. 자바스크립트 링크 : <a herf="javascript:자바스크립트코드">텍스트/이미지</a>
3. 파일 링크 : 1) 음악 <a herf="파일명.확장자" title="타이틀명">음악파일</a>
2) 동영상 <a herf="파일명.확장자">동영상파일</a>
3) 압축 파일 <a herf="파일명.확장자">파일명</a>
● 멀티미디어 표현
*AUDIO*
*오디오 속성*
HTML5에서 오디오를 재생하기위한 태그는 <audio> 태그를 사용한다.
*<audio> 태그속성*
1. autoplay : 웹 문서 로딩 시에 오디오를 자동으로 재생할지 여부를 지정
2. controls : 오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부를 지정
3. loop : 오디오반복 재생 여부를 지정
4.muted : 음소거 여부를 지정
5. preload="속성값" : 웹문서가 로딩될 때 오디오의 로딩 상태를 지정
6. src="URL" : 재생할 오디오 파일의 URL을 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio태그</title>
</head>
<body>
오디오재생 : <audio src="audio_sample.ogg" controls autoplay loop>
현재의 브라우저는 audio 요소를 지원하지않습니다.
</audio>
</body>
</html>
*오디오 파일 형식*
1. ogg : <audio controls> <source src="audio_sample.ogg" type="audio/ogg"></audio>
2. wav : <audio controls> <source src="audio_sample.wav" type="audio/wav"></audio>
3. mp3 : <audio controls> <source src="audio_sample.mp3" type="audio/mp3"></audio>
*VIDEO*
*비디오 속성*
HTML5에서 오디오를 재생하기위한 태그는 <video> 태그를 이용한다.
1. autoplay : 웹 문서 로딩 시에 오디오를 자동으로 재생할지 여부를 지정
2. controls : 오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부를 지정
3. loop : 오디오반복 재생 여부를 지정
4.muted : 음소거 여부를 지정
5. preload="속성값" : 웹문서가 로딩될 때 오디오의 로딩 상태를 지정
6. src="URL" : 재생할 오디오 파일의 URL을 지정
7. width, height : 화면에서 비디오 콘텐츠가 표시될 영역의 크기를 설정
8. poster : 지정한 비디오데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안 보여줄 이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video태그</title>
</head>
<body>
비디오재생 : <video src="video_sample.mp4" controls>
현재의 브라우저는 audio 요소를 지원하지않습니다.
</video>
</body>
</html>
*비디오 파일 형식*
1. mp4 : <video controls> <source src="movie_sample.mp4" type="video/mp4"></video>
2. webm : <video controls> <source src="movie_sample.webm" type="video/webm"></video>
3. ogv : <video controls> <source src="movie_sample.ogv" type="video/ogv"></video>
*비디오 재생 구간 지정*
<audio> 태그 또는 <video> 태그의 src 속성의 값을 지정할 때 '#t=[시작시간],[종료시간]'을 붙여서 지정하면,
시작시간부터 재생을 시작하여 종료시간까지 재생을 한다. '시간:분:초' 형식으로 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video태그</title>
</head>
<body>
비디오재생 : <video src="video_sample.mp4#t=10,20" controls>
현재의 브라우저는 audio 요소를 지원하지않습니다.
</video>
</body>
</html>
*<track>태그 속성*
<track> 태그는 여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션같이 시간이 지정된 텍스트 파일을 지정하기 위해 사용된다.
1. default : 사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화되어야 한다는 것을 지정
2. kind="속성값" : 텍스트 트랙의 종류를 지정
3. label="텍스트" : 사용자가 읽을 수 잇는 트랙의 제목을 지정
4. src="URL" : 텍스트 트랙파일의 URL을 지정
5. srclang="언어코드" : 텍스트 트랙 데이터의 언어를 지정 (kind="subtitles"인경우 반드시 지정)
6. subtitles : 비디오의 자막을 정의
7. captions : 대화나 사운드 효과를 글로 옮기거나 번역한 것으로, 소시를 또렷하게 알아들을 수 없는 청각이 약한 사람들에게 적합
8. descriptions : 비디오 내용에 대한 텍스트 형식의 설명을 정의
9. chapters : 장의 제목을 정의 한 것으로 미디어 자원을 탐색하기 위한 것
10. metadata : 스크립트에서 사용하기 위한 내용의 정의하는것으로, 브라우저에는 표시되지 않음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자막 처리를 위한 track</title>
</head>
<body>
자막처리 :
<video src="video_track.mp4" controls autoplay loop>
<track src="video_track.vtt" srclang="ko" label="자막표시" kind="subtitles" default>
</video>
</body>
</html>'Mark Up > HTML' 카테고리의 다른 글
| 웹브라우저 자동완성기능 제어 (0) | 2023.01.09 |
|---|---|
| HTML-시멘틱속성 (0) | 2021.05.24 |
| HTML에서 입력양식 (0) | 2021.05.24 |
| HTML에서 테이블 표현 (0) | 2021.05.16 |
| HTML-텍스트 표현 (0) | 2021.05.13 |
