[HTML] html의 태그(멀티미디어, 영역, 하이퍼링크) - 2

HTML TAG

멀티미디어 관련 태그

태그명	설명	속성
`<img>`	사진이나 그림 삽입	src	이미지 파일 경로 지정
		alt	이미지를 설명해주는 텍스트
		width, height	이미지의 크기 설정
`<audio>`	플러그인 없이 음악을 재생	src	음악파일 경로 지정
		controls	재생도구 표시여부 지정
		autoplay	자동재생 여부지정(모바일에선 적용X)
		loop	반복 여부 지정
		preload	음악파일을 미리 다운로드할지 여부 등 지정
`<video>`	플러그인 없이 미디어 재생	src	미디어 파일의 경로 지정
		controls	재생도구 표시여부 지정
		autoplay	자동재생 여부지정(모바일에선 적용X)
		loop	반복 여부 지정
		preload	재생 시 모두 불러올지 지정
		poster	재생 전 출력할 이미지 출력 / 경로 입력
		width, height	비디오의 크기 설정

멀티미디어 태그 예시

<img
  src="/경로 지정"
  width="340px"
  height="340px"
  alt="사진을 불러오지 못했을 경우 표시될 텍스트"
/>

<audio src="/경로 지정" controls autoplay loop></audio>

<video
  src="/경로 지정"
  controls
  autoplay
  loop
  width="400px"
  height="200px"
  poster="/경로 지정"
></video>

• <img>

  • alt
    • 이미지가 뜨지 않았을 경우 나타낼 문구를 기입한다
    • 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명 문구로도 사용된다
    • ”” 와 같이 공백으로 두어도 오류는 발생하지 않는다

• <audio>

  • 브라우저별로 사용가능한 파일이 다르니 확인 후 사용 권장
  • Chrome의 경우 MP3, OGG, WAV 파일을 지원한다

• <video>

  • poster
    • 비디오 화면 썸네일을 설정할 수 있다
    • src와 마찬가지 형식으로 이미지 경로를 입력해주어야 한다
  • preload
    • none : 비디오가 캐시되지 않는다
    • metadata : 비디오의 기본정보 메타데이터(길이 등)만 미리 가져온다
    • auto : 전체 비디오를 미리 다운로드한다
    • 빈 문자열 입력시 auto와 같은 설정이 된다

• 공통 속성

  • controls
    • 해당 속성을 명시하면 재생도구(비디오의 경우 소리조절, 일시정지 , 재시작 버튼 등)를 제공한다
  • autoplay
    • 해당 속성을 명시하면 재생할 수 있는 가장 빠른 시점부터 자동으로 재생되기 시작한다
    • 비활성화 하려면 해당 속성을 완전히 제거하여야 한다
  • loop
    • 해당 속성을 명시하면 반복 재생된다

영역 관련 태그

태그명	설명
<div>	block요소로 한줄 단위로 영역을 차지한다
<span>	inline요소로 content영역만을 차지하며 수평으로 나열된다
<iframe>	현재 페이지 내에 다른 웹페이지를 추가한다

영역 태그 예시

<div style="border: 1px solid blueviolet">
  첫번째영역
  <span style="background-color: red">첫번째</span>
  <span style="background-color: yellowgreen">두번째</span>
  <span style="background-color: yellow">세번째</span>
</div>
<div style="border: 1px solid blueviolet">두번째영역</div>
<div style="border: 1px solid blueviolet">세번째 영역</div>

첫번째영역 첫번째 두번째 세번째

두번째영역

세번째 영역

• 블럭(block) 요소

  • 한 줄 단위로 영역을 차지하는 요소
  • 줄바꿈이 적용되어 이미 존재하는 요소의 다음줄에 출력된다
  • h(1~6), p, pre, div, … 태그들이 이에 해당된다

• 인라인(inline) 요소

  • content 내용에 해당되는 부분의 영역만 차지하는 요소
  • 줄바꿈이 적용되지 않아, 옆으로 연이어져서 출력된다
  • 다음줄로 넘기고자 한다면 br 태그로 개행을 넣어주어야 한다
  • b, s, mark, input, img, label, span, … 태그들이 이에 해당된다

iframe 태그 예시

<iframe
  src="./2023-01-04-1_html.md"
  width="600"
  height="800"
  frameborder="10"
></iframe>

• 현재 문서 내에 다른 웹페이지를 추가할 수 있다

하이퍼링크 관련 태그

<a href="#iframe-태그-예시">iframe내용으로 올라가기</a>

iframe내용으로 올라가기

• 하이퍼링크 기능은 웹 문서에서 외부사이트, 문서 내부 이동이 가능하게끔 하는 태그이다
• <a>태그 속성
  • href
    • 링크한 페이지의 id 값이나, 사이트 주소를 넣는다
  • target
    • 링크 페이지가 표시될 위치(새창, 현재창)를 지정한다
    • 속성 생략시 기본값을 _self로 지정된다
    • target=”_blank” 로 명시하면 새창으로 열리게 된다
  • download
    • 링크한 페이지를 표시하지 않고 다운로드하게 된다
  • rel
    • 현재 페이지와의 관계를 지정한다
  • type
    • 페이지의 파일 유형을 지정한다