하이퍼링크 + 이미지
<!DOCTYPE html>
<html>
<body>
<h3>이미지를 클릭하세요.</h3>
<a href="https://www.naver.com/" target="_blank"><img src="C:\JavaScript\work\f.jpg" alt="HTML5 Logo" title="naver로 이동"
border="2" style="width:100px;height:110px"></a>
<a href="https://velog.io/@tkdeod1234" target="_blank"><img src="C:\JavaScript\work\spel.gif" alt="newton site"
title="Velog 이동" border="2" style="width:170px;height:110px"></a>
</body>
</html>하이퍼링크를 걸어주는 태그인 a태그에 이미지를 삽입시켜주는 img 태그를 함께 사용하면 사용자가 이미지를 클릭 시 하이퍼링크를 통해 특정 사이트로 이동하는 기능을 만들 수 있습니다.
img 태그
-
img 태그 속성
- src : 파일 위치를 지정해줍니다.
- alt : 이미지를 보여줄 수 없을 경우 대체로 텍스트를 띄워줍니다.
- width/height : 이미지의 가로, 세로 길이를 조정해줍니다. %를 쓸 경우 웹 브라우저의 크기에 따라 자동 조절되어 크기가 표시됩니다.
- style : 이미지의 크기나 위치등을 정해줍니다.
- border 이미지의 경계선 두께를 정해줍니다.
-
figure 태그
- 보통 이미지, 영상을 올릴 때 사용하는 테그로 부가 설명을 넣을 때 figcaption 태그를 같이 사용해줍니다. (이미지 밑에 제목과 같은 이미지 정보를 적을 때 사용)
- target 태그 : 클릭시 새로운 창을 어떠한 방식으로 열어줄까에 대한 태그입니다.
- self : 현재 열린 창에 그대로 링크를 띄워줍니다.
- blank : 새로운 창에 링크를 열어줍니다.
- parent : 부모 창에서 열어줍니다. ( 부모 창이 없으면 self처리 됩니다.)
- top : 모든 브라우저 중 최상위 브라우저 창에서 열어줍니다. ( 부모 창이 없으면 self처리 됩니다.)
audio 태그
<!DOCTYPE html>
<html>
<body>
<h3>오디오 자동 재생</h3>
<audio src="C:\JavaScript\work\a.mp3" controls loop autoplay></audio>
<h3>오디오 수동 재생</h3>
<audio src="C:\JavaScript\work\b.mp3" controls></audio>
<h3>오디오 다중 재생</h3>
<audio controls>
<source src="C:\JavaScript\work\a.mp3" type="audio/mpeg">
<source src="C:\JavaScript\work\b.ogg" type="audio/ogg">
<source src="C:\JavaScript\work\c.wav" type="audio/wav">
오디오 파일을 재생할 수 없습니다.
</audio>
</body>
</html>오디오 태그를 사용시 mp3파일과 같은 음성 파일을 불러와 인터넷 창에서 재생시킬 수 있습니다.
- audio 태그 속성
- src : 재생하고 싶은 오디오 파일의 지정 경로를 입력하여 줍니다.
- controls : 재생, 정지, 음소거 등의 인터페이스를 보이게 할 수 있습니다.(재생 제어기)
- loop : 반복 재생을 가능하게 합니다.
- autoplay : 웹 페이지가 열리는 동시에 자동 재생 시켜줍니다. 하지만 크롬에서 정책상으로 막아두어서 일반적으로는 사용 불가능하고 몇 가지 방법이 있다고는 하는데 저는 audio는 사용이 안됐었습니다. 아마 무분별한 광고로 인해 사용자들에게 많은 피해가 가서 정책적으로 막은듯합니다.
- preload : 오디오 파일 사용 여부와는 무관하게 다운로드를 진행합니다.
- muted : 오디오 파일의 디폴트값을 음소거로 둡니다.
video 태그
<!DOCTYPE html>
<html>
<body>
<h3>비디오 자동 재생</h3>
<video src="C:\JavaScript\work\b.mp4" autoplay controls loop width="300" height="250"></video>
<h3>비디오 수동 재생</h3>
<video src="C:\JavaScript\work\a.mp4" controls width="300" height="250"></video>
<h3>비디오 다중 재생-비디오 파일이 현재 폴더에 있는 경우</h3>
<video controls autoplay width="300" height="250">
<source src="C:\JavaScript\work\a.mp4" type="video/mpeg">
<source src="C:\JavaScript\work\a.ogv" type="video/ogg">
<source src="C:\JavaScript\work\a.webm" type="video/webm">
비디오 파일을 재생할 수 없습니다.
</video>
<h3>비디오 다중 재생-비디오 파일이 웹 사이트에 있는 경우</h3>
<video controls autoplay width="300" height="250" poster="wait.jpg">
<source src="사이트 주소."
type='video/mp4; codecs="avc1, mp4a"'>
<source src="사이트 주소"
type='video/ogg; codecs="theora, vorbis"'>
비디오 파일을 재생할 수 없습니다.
</video>
</body>
</html>- video 태그 속성
- src : 파일 경로를 지정해줍니다.- controls : 재생, 일시정지 등의 재생 제어기를 표시해줍니다.
- width, height : 가로, 세로길이를 조정합니다.
- autoplay : 웹 페이지가 열리면 동영상을 자동 재생시킵니다. 이 또한 크롬에서는 정책적으로 막아둬서 그냥은 못 쓰고 muted 속성을 추가해서 음소거 동영상으로 만들면 자동재생이 가능합니다.
- muted : 음소거 상태로 만듭니다.
- preload : 미리 다운로드합니다.
- poster : 동영상이 다운이 완료되지 않았을 경우 대체 이미지를 부여해줍니다.
참고 자료 : 국비 교육 내용
프로그래밍 공부 중!