4. 테이블 채색, 이미지, 오디오, 비디오

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

---

▲예제 01. 테이블 채색

 - <col span="n" style="background: red"> n만큼 가로 방향으로 열 지정후 빨간색으로 채색

 - <td colspan="n"></td> n만큼 칸이 가로 방향으로 합쳐짐

 - <td rowspan="n"></td> n만큼 칸이 세로 방향으로 합쳐짐

 

 

▲예제 02. 이미지

 - <img src="#" /> #주소의 이미지를 불러온다. <img> 태그는 />로 마무리 가능

 - alt="#" 이미지가 없을 시 # 텍스트가 출력된다.

 - http://placehold.it/ 임시 자리 채우기용 이미지 제공 사이트

 

 

▲예제 03. 오디오

 - <audio src="#"></audio> # 주소의 음원파일을 출력한다.

 - type="audio/mp3" 트래픽을 막기 위해 미리 오디오 파일의 타입을 지정하는 용도

 - controls="controls" 음원 재생 도구

 - loop="loop" 반복

 - autoplay="autoplay" 자동 재생, 크롬에서는 작동이 안된다.

 

▲예제 04. 오디오

▲예제 05. 비디오

 - <video src="#"></video> #주소의 동영상을 재생한다.

 - video.js가 필요하면 홈페이지 들어가서 긁어오면 된다.