프론트

HTML 이미지 오디오 비디오 하이퍼링크

짱코딩러 2022. 8. 20. 00:33

 

이미지

<img> :이미지를 삽입할 때 사용

src, alt(이미지를 표시할 수 없는 상황에 쓰임)

<img src="이미지 파일 경로“
    alt="대체용 텍스트">

이미지 파일 경로를 지정할 때에는 상대경로나 절대경로로 지정할 수 있다.

절대경로 : url입력

상대경로 : 폴더 경로 입력. 파일이 있는 경우 사용(많이 쓰임)

./  =>현재 폴더      
../ =>상위 폴더
/폴더이름 /이미지이름.확장자  => 하위 폴더로 이동할 때 사용

width, height

=>%는 창의 비율에 맞출 수 있고, px는 절대크기를 지정할 수 있음.

 

 

오디오 비디오

<object> : 음악, 동영상, PDF파일 등 다양한 개체를 삽입

data : 재생할 파일 지정
width, height : 플레이어 화면 크기 지정

<object width="너비" height="높이" data="파일"></object>

 

<embed> : 닫는 태그 없음

src : 멀티미디어 파일 지정
width, height : 플레이어 크기 지정

<embed src="파일 경로" width="너비" height="높이">

 

<audio>, <video>

controls : 재생막대 표시

width : 플레이어 너비 지정

loop : 반복재생

muted : 소리제거

preload : 재생방법(auto, metadata, none) 디폴트는 auto

width, height : 플레이어 크기 지정

poster : <video>썸네일

<audio src="오디오 파일 경로"></audio>

 

<video src="비디오 파일 경로" controls width="숫자"></video>

 

하이퍼링크

<a> : 다른 문서나 사이트로 연결해주는 기능

target =“blank" 로 하면 연결된 문서가 새창으로 열림

<a href="링크할 주소">텍스트 또는 이미지</a>

 

 

'프론트' 카테고리의 다른 글

CSS 고급 선택자  (0) 2022.08.24
CSS 레이아웃, 박스 모델, 배경, position  (0) 2022.08.22
CSS 글꼴, 목록, 표  (0) 2022.08.22
HTML 폼  (0) 2022.08.20
HTML 텍스트, 목록, 표  (0) 2022.08.17