2023.08.11 모각코 6회차 결과

멀티미디어 태그

 

 

 

html의 멀티미디어 태그에는 크게 이미지, 오디오 ,비디오 태그가 있다.

먼저 이미지 태그란 html 문서에 이미지 콘텐츠를 넣을 때 사용한다.

사용법을 알아보기 전에 멀티미디어 태그를 다루는데 중요한 파일의 경로에 대해 먼저 알아볼 것이다.

먼저 파일의 절대 경로란 말 그대로 파일의 절대적인 고유한 경로를 지정하는 것이다. 반면 상대경로란 현재 문서를 기준으로 경로를 인식하는 방법이다.

파일이 html파일의 어디에 저장되어있는가에 따라 표현이 달라지기 때문에 둘을 구분하는 것이 중요하다.

 

 

 

 

 

1.이미지 태그

먼저 이미지 태그에 대한 설명이다. src태그를 이용하여 이미지를 화면에 나타내보았다.

여기서 중요한 것은 tree로 시작하는 파일명 앞에 붙은 것들이다.

첫 번째줄과 두 번째줄은 이미지파일이 상위 폴더에 있기 때문에 ../를 파일명 앞에 붙여주었고, 세 번째 줄과 네 번째 줄은 이미지파일이 html파일과 동일한 디렉토리에 있기 때문에 다른 방식으로 표현해준 것을 확인할 수 있다.

참고로 html파일의 하위 폴더에 이미지 파일이 존재하

는 경우에는 src = "하위폴더/파일명" 태그를 통해 표현할 수 있다.

 

 

 

 

 

 

2.오디오 태그,비디오 태그

 

오디오 태그와 비디오 태그 또한 표현방식이 이미지 태그와 다르지 않다

. 멀티미디어 파일이 html파일 기준으로 상위에 있는지 하위에 있는지에 따라 표현방식이 달라지는 것이 중요했다.

위 mp3파일과 mp4파일 모두 html파일의 상위 폴더에 저장하였기 때문에 파일명 앞에 ../를 붙인 것을 볼 수 있다.

참고로 controls태그는 멀티미디어 태그의 속성 중 하나로, 화면에 컨트롤바(재생막대)를 표시하기 위해 사용했다.