웹 콘텐츠를 저장하는 태그
:-텍스트를 저장할 때 사용하는 태그는 h1~h6 , p 태그이다
-이미지를 저장할 때 사용하는 태그는 img태그이다
이미지 태그(<img>) : 문서에 이미지를 포함한다.
:-img 태그의 "필수 속성"인 src 속성을 이용하여 이미지를 html 문서에 포함(경로: 상대경로, 절대경로 )시킨다. alt 속성으로 이미지에 대한 설명을 작성한며, 웹 접근성을 향상시키기 위해 웹 표준에서는 사용할 것을 권장한다.
-상대경로 : 현재 파일 위치를 기준으리 상대 파일의 위치를 지정
-절대경로 :서버 root부터 표시한 경로
-크기를 조정하고 싶으면 < width=“ 숫자 ”> 길이는 <height = “ 숫자 “>,
-이미지가 깨져서 사진이 안나올경우 대안으로 설명해줄 수 있는 문구 <alt =“ 이미지 내용 ”>
-이미지에 마우스를 올려놨을때 툴 팁이라는 것을 통해 도움말이 나오게 하고 싶을 때 <title =“ 도움말 내용”>
-내가 지금 있는 위치에서 내려가고 싶을 때는 / , 올라가고 싶을때는 ../ 두번 올라가고 싶을 때는 ../../
-이미지에 마우스를 올려놨을때 툴 팁이라는 것을 통해 도움말이 나오게 하고 싶을 때 <title =“ 도움말 내용”>
-내가 지금 있는 위치에서 내려가고 싶을 때는 / , 올라가고 싶을때는 ../ 두번 올라가고 싶을 때는 ../../
비디오태그,오디오태그 :
"필수 속성"인 src 속성을 이용하여 비디오 또는 오디오를 html 문서에 포함
-autolay : 자동재생 , preload : 자동으로 불러오기 , loop : 무한반복 , muteed : 음소거
[실습]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 콘텐츠를 담는 태그</title>
</head>
<body>
<h3>웹 콘텐츠를 저장하는 태그</h3>
<p>텍스트를 저장할 때 사용하는 태그는 h1 ~ h6, p 태그이다.</p>
<p>이미지를 저장할 때 사용하는 태그는 img 태그이다.</p>
<img src="./batman.jpg" alt="배트맨">
<img src="images/superman.jpg" alt="슈퍼맨">
<img src="../images/wd.jpg" alt="원더우먼">
<img src="D:/{ 01. HTML5 }/batman.jpg" alt="배트맨">
<p>동영상을 저장할 때 사용하는 태그는 video 태그이다.</p>
<video autoplay preload controls loop muted>
<source src="video/Baddies.mp4">
</video>
<p>오디오를 저장할 때 사용하는 태그는 audio 태그이다.</p>
<audio autoplay preload controls loop muted>
<source src="audio/Over_the_Horizon.mp3">
</audio>
</body>
</html>[결과물]
'Html' 카테고리의 다른 글
| 07. 공간분할태그 (0) | 2022.09.20 |
|---|---|
| 06. 테이블태그 (0) | 2022.09.20 |
| 05. 하이퍼링크 태그 (0) | 2022.09.20 |
| 04.시맨틱태그 (0) | 2022.09.20 |
| 01. Html 기본문서 (0) | 2022.09.20 |