짧은 HTML 태그 정리(audio, video, a)

납벙·2022년 8월 19일
post-thumbnail
2022-04-22
계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.


개발에 대해 아무것도 모르는데 책 보고 무작정 따라하는 중.
뒤돌아서면 까먹고 노트에 기록해놔도 안 볼 것이 분명하므로 여기다 공부를 기록해놔야겠다.
신기한 공간이구만



audio, video 태그 정리

  • controls : 플레이어 화면에 컨트롤 바를 표시한다.
  • autoplay : 오디오나 비디오를 자동으로 실행한다.
  • loop : 오디오나 비디오를 반복 재생한다.
  • muted : 오디오나 비디오의 소리를 제거한다.
  • preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 기본값은 'preload="auto"'이다. 사용할 수 있는 값은 auto, metadata, none.
  • width, height : 비디오 플레이어의 너비, 높이 지정. 둘 중 하나만 지정하면 나머지 값은 자동이다.
  • poster : 비디오가 재생되기 전까지 화면에 표시되는 이미지라는데 썸네일 말하는거인듯?
<!doctype html>
<body>
	<div id="container">
  		<video scr="medias/salad.mp4" width="500" autoply></video>
  	</div>
</body>


하이퍼링크 삽입하기

  • a : anchor의 줄임말. 텍스트를 사용하면 텍스트 링크, 이미지를 사용하면 이미지 링크가 된다. 가장 기본은 href 속성을 이용해 링크할 주소를 쓰는 것.

이미지 링크 만드는 법
<a href="https://velog.io/write?id=2ebb421c-7159-4c93-8e98-d47fb67704cb"> <img src="images/tangerines.jpg" alt="레드향"></a>
a태그를 닫기 전에 img속성을 추가해주는군

  • target="_blank" 를 추가해주면 클릭한 링크를 새 창에서 열어준다.


까먹었던거 리마인드

- <p></p> p태그 paragraph 약자로 문단 바꿔주는 태그
- <br> 줄바꾸는 태그. 닫아주지 않아도 된다고 한다! 편하넹
profile
디자이너가 코딩 공부 즁~♪

0개의 댓글