HTML 멀티미디어에 관련된 태그들

img태그 : 
1 이미지를 삽입하는 태그이다
2 img태그는 빈 태그로써 끝나는 태그가 없다 
3 속성 중 src와 alt 속성은 필수로 적어줘야 한다.
src : 이미지에 링크나 이미지가 저장되어있는 경로를 명시한다 
alt : alternative에 줄임말로 이미지가 출력되지 않았을 때 출력되는 대체 택스트를 명시한다.
4 : 인라인요소이다

ex)

<img src="google logo img 경로" alt="google logo" width="333" >

위코드와같이 src에 구글 로고에 대한 이미지 경로를 적어줬다 만약 이미지를 다운로드했다면 다운로드한 이미지가 들어있는 폴더를 찾아 경로를 적어주게 된다.
추가적으로 이미지를 다운로드해서 사용하는 방식을 권장한다 그래야 코드 가독성이 좋아질뿐더러 이게 어떤 이미지였는지 기억이 안 날 때 이미지가 저장되어있는 폴더에 가서 확인하기에도 편하다

alt 부분을 보면 google logo 라고 명시했는데 alt에 속성을 이해하기 위해서 src에 경로를 지워보는 것을 권한다 그러면 google logo라는 대체 택스트가 화면에 표시되는 것을 확인할 수 있을 것이다.

이미지에 크기를 조정하기 위해 width와 height속성을 사용할 수 있는데 필자는 css를 배운 후에 css로 이미지에 크기를 조절하는 것을 권장하고 꼭 width와 height를 사용하겠다면 별도의 px는 따로 명시해주지 않는다.

audio 태그 :
1audio 태그는 소리 콘텐츠(mp3)를 화면에 출력할 때 사용된다.
2인 라인 요소이다.
3 이때 여러 가지 속성들이 사용된다.

autoplay:브라우저가 랜더링(로딩)되면 별도의 동작 없이 자동 재생되는 기능을 하는 속성이다.
controls : 오디오에 재생 정지 음소거 등등을 제어할 수 있는 바를 만들어 주는 기능을 하는 속성이다.
loop: 오디오의 재생이 끝나면 처음부터 다시 재생하는 기능을 가진 속성이다.
src: 오디오 파일에 경로(url)를45++ 명시하는 기능을 가진 속성이다.
muted : 브라우저가 랜더링(로딩)되었을때 오디오가 음소거된 상태로 화면에 표시되게 하는 기능을 가진다.

ex)

<audio src="오디오 경로" controls muted loop autoplay></audio>

위 코드를 확인해보면 controls속성을 이용해 제어 바를 만들어줬고 muted를 이용해 화면 출력 시 음소거 loop속성을 이용해 오디오 끝나면 다시 재생 , autoplay를 이용해 처음에 화면 출력 시 재생된 상태로 시작하는 
기능을 볼 수 있을것이다 
이때 controls는 필수는 아니지만 작성해주지 않으면 눈에 보이지 않기 때문에 작성해주는 것을 권하고 나머지 속성들은 필요에 따라 작성해주면 될 것이다. 부가적으로 src를 작성하지 않으면 audio는 출력되지 않는다.

video 태그 :
1video 태그는 영상 콘텐츠(mp4)를 화면에 출력할 때 사용한다.
2인 라인 요소이다.
3 이때 여러 가지 속성들이 사용된다.

autoplay:브라우저가 랜더링(로딩)되면 별도의 동작 없이 자동 재생되는 기능을 하는 속성이다.
controls : 비디오에 재생 정지 음소거 등등을 제어할 수 있는 바를 만들어 주는 기능을 하는 속성이다.
loop: 비디오의 재생이 끝나면 처음부터 다시 재생하는 기능을 가진 속성이다.
src: 비디오 파일에 경로(url)를45++ 명시하는 기능을 가진 속성이다.
muted : 브라우저가 랜더링(로딩)되었을때 비디오가 음소거된 상태로 화면에 표시되게 하는 기능을 한다
poster:  동영상 썸네일(동영상이 재생되기전 동영상에 나타나는 이미지)에 경로(url)를 명시한다.
기타 여러 속성이 존재하고 width와 height속성을 이용해 크기를 설정할 수 있지만 이역시 css를 이용해 조절하는 것을 권장한다.

ex)

<video src="비디오 경로" controls muted autoplay loop poster="썸네일 경로"></video>

위 코드를 확인해보면 src를 이용해 동영상에 경로를 설정하였고 controls를 이용해 동영상을 정지 재생 음소거 등등의 제어 바를 생성 autoplay를 이용해 페이지가 로딩되었을 때 자동재생  loop를 이용한 재생 종료 후 다시 재생  poster를 이용한 썸네일을 만들어준 것을 확인할 수 있다.
audio태그와 마찬가지로 contorols는 필수는 아니지만 필수적으로 작성하여 화면에 동영상을 출력시키는 것을 권장하고 나머지 속성은 필요에 따라 작성해주면 될 것이다 부가적으로 audio태그처럼 src속성을 작성하지 않으면 video는 출력되지 않는다.

figure, figcaption태그 

figure태그 :
1 figure태그는 이미지의 영역을 설정할 때 사용된다 
2 블록 요소이다
figcation태그 :
1 figcation태그는 figure태그 안에 있는 이미지에 대한 설명을 표시할 때 사용된다 
2인 라인 요소이다

ex)

<figure>
  <img src="경복궁 이미지 경로" 
  alt="경복궁">
  <figcaption>위 사진은 경복궁으로써 조선에 법궁으로 불린다.</figcaption>
  <img src="태극기 이미지 경로" alt="태극기">
  <figcaption>위 사진은 태극기로써 대한민국에 국기이다</figcaption>
</figure>

위 코드와 같이 figure태그를 이용해 이미지에 영역을 설정해줬고 img태그를 이용해 이미지를 표시한 다음 figcaption을 이용해 해당 이미지에 대한 설명을 적어줬음을 확인할 수 있다.
figure 같은 경우 이미지를 여러 개 넣어 장식할 때 사용되고 figcaption은 이미지에 대한 설명을 해야 할 때 사용한다. 

iframe태그 : 
1 iframe태그는 html으로 코딩한 페이지에 다른 사이트 페이지를 삽입하는 기능을 가진다.
2인 라인 요소이다
3 iframe태그는 여러 가지 속성을 사용할 수 있다.

allowfullscreen: 전체 화면 모드 사용 여부를 설정한다
frameborder: 프레임 테두리 사용 여부를 설정한다 0= 테두리를 사용하지 않는다는 의미이고 , 1= 테두리를 사용한다는 의미이다.
src:  해당 페이지에 대한 경로(url)를 설정한다.
name : frame에 이름을 설정한다.

ex)

<iframe src="iframe을 사용할 페이지 경로" frameborder="0" width="500" height="500"></iframe>



<iframe width="900" height="506" src="iframe을 사용할 페이지 경로" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; 
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

위 코드와 같이 다른 사이트 페이지가 html로 코딩한 페이지에 삽입되었음을 확인할 수 있다.

주로 유튜브 영상을 삽입하는 데 사용되는데 이때 넣어주고 싶은 유튜브 영상을 클릭하고 영상에 마우스 우클릭을 하면 소스코드 복사라는 것이 있다 그것을 클릭한 후 html 파일에 붙여 넣기 하면 해당 동영상이 삽입되는 것을 확인할  수 있다.
iframe으로 가져온 페이지에 너비 높이 등등의 스타일은 css를 사용하는 것을 권장한다. 

부가적으로 iframe은 보안에 취약하다는 단점을 가지고 있다.

script태그 :
1 script태그는 JS파일을 불러오거나 html 파일에 내장하여 작성할 때 사용되는 태그이다  

2 script태그는 여러 속성이 존재한다.
async속성: 비동기적 실행 여부를 설정한다 

동기적과 비동기적의 대한 설명
동기적 : 순차적으로 위에서 아래로 자바스크립트의 코드를 읽는 방식이다.(직렬적 인방식
비동기적: 동시에 자바스크립트 코드를 읽는 방식이다 (병렬적인 방식)

scr : 외부에 있는 JS파일을 불러올 때 파일에 경로를 명시한다. (필수로 작성해야 함)
defer: html과 JS가 서로 연결되어 어떠한 동작을 할 때 JS입장에서는 html에 내용을 알고 있어야 어떠한 동작을 할 수 있다 이때 defer속성은 html 파일을 한번 읽은 후에 script태그를 해석하게 하는 기능이 있다.

때문에 script태그로 js파일을 가져올 때에는 script태그를 body태그 안에서 가장 아래에 작성해야 js파일 입장에선 html에 대한 내용을 참조할 수 있다. but head태그에 script태그를 작성할 것이라면 
이 defer라는 속성을 이용해 js파일이 html에 내용을 참조할 수 있게 html에 내용을 한번 읽고 script를 실행할 수 있게 해줘야 한다. 
필자는 script태그를 body가장 아래에 작성하는 방식을 권장한다.

ex1) 바디 태그 가장 아랫부분에 script태그를 사용한 경우

<body>
<p>안녕</p>
<p>하세요!</p>
<script src="./js_location.js">

</script>
</body>

ex2) 해드 태그에 script태그를 사용한 경우 defer속성을 사용한다.

 <title>Document</title>
  <link rel="stylesheet" href="./test.css">
  <script src="./js_location.js" defer>

  </script>
</head>