미디어 태그는 이미지, 오디오, 비디오 등의 멀티미디어를 넣을 때 사용하는 태그입니다.
이 세 태그 모두 html문서에 직접 삽입되는 것이 아닌, src 속성을 통해 html문서에 미디어가 링크되는 방식으로 웹페이지 위에 나타납니다.
미디어 태그는 절대경로 혹은 상대경로를 통해 링크됩니다.
아래는 미디어 태그를 경로별 특징으로 나눈 것입니다.(예시 이미지 태그)
절대경로로 사용할때,
<img src=”http://링크”>
<img src="/이미지명">
상대경로로 사용할때,
<img src="../이미지명">
상대경로로 사용하며 실행파일과 같은 폴더에 이미지 파일이 존재할때,
<img src=”이미지명.jpg”>
절대경로는 파일이 존재하는 위치의 주소를 모두 적은 것으로 프로그램이 실행되는 위치에 구애되는 상대경로와 달리 절대경로는 html파일 위치와 상관없이 어느 경로에서든 자유롭게 사용할 수 있다는 장점이 있습니다. 하지만 상대경로를 사용하면 현재경로를 중심으로 파일의 상대적인 위치를 구할 수 있기 때문에 이용하려는 파일의 상위 폴더가 달라져도 코드를 따로 수정하지 않아도 된다는 장점이 있습니다.
(절대경로: 현재 어느 경로에서 프로그램을 실행하든 파일의 위치만 그대로 라면 상관없다. 상대경로: 사용하려는 파일의 위치가 일부 달라져도 된다.)
//절대경로는 상위 루트 로부터 경유한 경로를 전부 기입한 경로이다.
//상대경로는 현재경로에서 시작해 파일을 잃어나가기 때문에 위에서부터 최상위 루트 디렉토리인 C 디렉토리 로부터 시작되어 모두 읽는 절대경로와 달리프로그램이 실행되는 위치에 구애된다
1. <img> 빈태그
이미지 태그는 <br>이나<hr>처럼 끝태그가 존재하지 않는 빈태그로 jpg, png, ico 등 다양한 이미지 파일을 html 문서에 링크해주는 태그입니다. 이미지 태그는 text가 아닌 img를 웹페이지상에 올려야 하기 때문에 요소를 html문서상에 직접 삽입하지 않고 링크의 방식을 통해 html문서상에 연결합니다.
그렇기 때문에 a태그에 href 속성이, link태그에 rel 속성이 반드시 필요한 것처럼 html이 잘 동작하기 위해서는 img태그에서도 src속성이 반드시 필요합니다.
img에서 사용할 수 있는 속성
| src | source의 약자, (오디오, 동영상 태그의 source와는 다르다)<img>태그에서 파일을 링크해주는 "필수" 속성 |
| alt | 이미지를 가져오는데 실패했을 경우 보여줄 대체 텍스트를 명시한다. 반드시 사용할 필요는 없지만 브라우저의 호환성 문제나 파일 경로 오류 등의 문제로 이미지가 로드되지 않았을 때 그 이미지가 무엇이었는지 혹은 발생한 에러가 무엇인지를 보여주기 위해 권장된다. |
| width | 이미지의 너비를 명시한다. px, em, rem, %, vw, vh 등을 사용할 수 있다. |
| height | 이미지의 높이를 명시함. px, em, rem, %, vw, vh 등을 사용할 수 있다. |
| crossorigin | <canvas> 요소에 사용될 이미지에 교차 출처 접근(cross-origin access)을 허용하는 제3의 사이트(third-party site)로부터의 이미지 허용 여부를 명시함. |
| ismap | 해당 이미지가 서버 사이드 이미지맵(server-side image map)의 일부인지 여부를 명시함. |
| longdesc | 이미지에 대한 부가적인 설명을 제공하는 URL을 명시함. |
| sizes | 서로 다른 페이지 레이아웃에 대한 이미지 소스의 크기를 명시함. |
| srcset | 각각 다른 환경에서 사용될 이미지 소스를 명시함. |
| usemap | 클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시함. |
| title | 이미지 위에 마우스를 올렸을때(hover) title에 적힌 텍스트가 뜬다. |
자세한 사항은 아래의 링크로
http://www.tcpschool.com/html-tags/img
img가 보이지 않을때
src속성이 비었거나 null
src의 url이 현재 사용자가 보는 페이지의 url과 같다
이미지 파일이 손상되어 불러올 수 없다
이미지 파일의 메타데이터가 손상되어 원본 크기를 알아낼 수 없으며 img 요소의 속성에도 크기가 지정되지 않음
브라우저가 지원하지 않는 이미지 형식임
이미지 다운로드 방지
다른 이름으로 저장x
.img {pointer-events : none;}
드래그, 우클릭, 선택 금지
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
2. <audio></audio>태그와 <video></video>태그
audio태그와 video태그는 모두 인터넷 익스플로러 8이상부터 호환됩니다. 하지만 현재 서비스하는 대부분의 브라우저에서 호환되기 때문에 크게 걱정 안하고 쓰셔도 됩니다.
그러나 웹 브라우저마다 지원하는 확장자가 달라 생기는 문제는 신경써서 해결해줄 필요가 있습니다.
이것을 위해 사용하는 태그가 source태그입니다.
<source> 태그의 src 속성은 재생할 미디어 파일의 URL을 명시합니다.
<source> 요소가 <audio> 요소나 <video> 요소 내부에 사용될 때는 반드시 src 속성이 명시되어야 합니다.
미디어타입을 명시해주는 type속성을 입력하지 않으면 브라우저가 파일을 다운로드한 후 재생가능한 파일인지 확인하는 작업이 필요하므로 지정하는 것을 권장합니다.
<audio>태그와 <video> 태그의 controls 속성은 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기를 표시해줍니다.
poster속성은 video태그에서 쓰였을때, 비디오가 재생되기전에 미리보기사진을 보여줍니다.
'대학강의정리 > 22.1 웹프로그래밍기초' 카테고리의 다른 글
| 3. 공간분할 태그와 시맨틱 태그 (0) | 2022.04.20 |
|---|---|
| 3. 입력양식태그 (0) | 2022.04.20 |
| 2. html5 기본태그 중 테이블태그 (0) | 2022.04.19 |
| 2. html5 기본태그 중 목록태그 (0) | 2022.04.19 |
| 2. html5 기본태그 중 글자태그 (0) | 2022.04.19 |
