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

yuzu sim

Jan 12, 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>

<그 외 태그>

<hr>: 수평선을 나타내는 태그 - Block

<br>: 줄 바꿈을 나타내는 태그 - Inline

<meta>: 문서의 메타 데이터를 정의하는 태그 - Inline

고유 속성 값이 있으니 Inline인지 Block인지 확인하기!

예시)


<body>
    <span>Hello</span> 
    <span>Bye</span>
    <div>World</div>
</body>

💡

눈으로 보기에는 div나 span이나 크기가 같지만 검사를 해보면 차이를 알 수 있음

div는 block 속성이라 한 줄을 다 차지하고

span은 inline 속성이라 자신의 크기 만큼만 차지함

HTML/CSS