태그 사용 - 멀티미디어, 그 외

Jan 15, 2024
태그 사용 - 멀티미디어, 그 외

<멀티미디어 관련 태그>

  • <img> : 이미지를 삽입하는 태그 - Inline
src : 소스 / 이미지의 상태값 → 자바에서의 생성자 매개변수
절대 경로, 상대 경로 다 사용 가능
Atribute : 속성
alt : 소스를 못 찾았을 때 대체 영역….이미지가 오류나면 안되기 때문에 잘 안씀
  • <audio> : 오디오 콘텐츠를 삽입하는 태그 - Inline
  • <video> : 비디오 콘텐츠를 삽입하는 태그 - Block
예시) 태그로 이미지 설정
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="https://i.namu.wiki/i/yaJpstKfFhhpZhZj4vy7es8sq7TjmR2YfIbeq82PMPH-Oje8vkFK5sEHpLV4JTrEMjgtJubRSp70Cb1psIfffMgCg7JaH-EvoCxMFiS0MA0fV6QoxuxbPSIPgBbk5UPCx6aYVGb9jyrqEL4sXZucrw.webp"> </body> </html>
notion image
notion image
 

<그 외 태그>

  • <hr>: 수평선을 나타내는 태그 - Block
  • <br>: 줄 바꿈을 나타내는 태그 - Inline
  • <meta>: 문서의 메타 데이터를 정의하는 태그 - Inline
 
고유 속성 값이 있으니 Inline인지 Block인지 확인하기!
예시)
notion image
 
<body> <span>Hello</span> <span>Bye</span> <div>World</div> </body>
💡
눈으로 보기에는 div나 span이나 크기가 같지만 검사를 해보면 차이를 알 수 있음
div는 block 속성이라 한 줄을 다 차지하고
span은 inline 속성이라 자신의 크기 만큼만 차지함
notion image
notion image
notion image
Share article

vosw1