HTML - target태그, 이미지, 비디오 삽입하기

링크로 이동하기

  <a href="http://www.google.com" target="_self">구글</a>

    <a href="http://www.naver.com" target="_blank">네이버</a>

<a> 태그의 href는 문서간, 문서내, 다른프로그램과 연결을 지원함  <a> 태그의 target 속성은 문서가 열리는 위치를 지정할 수 있음

 

target의 속성값

target="_self" 으로 설정해준 경우 

링크가 위치한 현재 문서에서 열리기 때문에 생략가능함

 

target= "_blank" 으로 설정해준 경우 

링크가 위치한 현재 문서가 아닌 새로운 탭에서 문서가 열림

 

 

HTML 문서 내부링크 사용하기 

<h1 id="top"> <a href="#section">공지사항으로 이동</a> </h1>

 

<h2 id="section">공지사항</h2>

<a href="#top">맨위로</a>

문서 내부 특정한 위치를 설정해주고 문서 내부 특정한 위치로 이동할 링크 선언을 해줌

 

HTML 내부링크 예시

---

공지사항으로 이동

---

---

공지사항

 

---

---

맨위로돌아가기

 

---

HTML문서에 이미지 삽입하기 / 이미지에 링크 걸기 

 <a href="이동할 링크">

<img src="이미지경로" alt="이미지설명" width="200px" >

 

img 태그의 src는 이미지 경로를 지정하는 속성임 width, height 속성을 통해 너비와 높이를 지정할 수 있음

상대경로란
 현재폴더를 기준으로 자원경로를 표현하는 방식 

 현재폴더 : ./파일명 작성 
 상위폴더 : ../파일명 으로 작성
 하위폴더 : /파일명 작성 
 절대경로 : 디렉토리(/) 기준으로 자원 경로를 표현하는 방식
    

HTML 문서에 오디오 / 비디오 넣기 

 

   <video controls src="비디오가 들어있는 경로" width=""> </video>

  <audio src="오디오가 들어있는 경로" controls> </audio>

controls : 웹 브라우저에 음원재생을 제어하는 제어기 생성   autoplay : 웹 브라우저에서 음원을 자동으로 재생     loop : 웹 브라우저에서 음원을 반복 재생   volume : 음원의 볼륨을 설정 (0.0 ~ 1.0까지 )