기타 공부/프론트엔드

9월 20일 오픈SW플랫폼 과제 - 자기소개 페이지

모항 2022. 9. 23. 21:51

간단한 과제이지만 기록은 하는 것이 좋을 것 같아서 적어두겠다.

자기소개 페이지를 만드는 과제로,

미디어 파일을 사용할 것, iframe 등 수업에서 배운 태그를 사용할 것, 배경음악이 자동재생되게 할 것 등의 요구사항이 있었다.

css 작업은 선택사항이었다.

 

 

아래는 깃허브 링크이다.

업로드되어있는 html과 css파일을 다운로드받아 둘을 한 폴더에 함께 넣고 html 파일을 브라우저상에서 실행시키면 자기소개 페이지를 볼 수 있다.

 

GitHub - 00blowup/2022OpenSWPlatform_0920: 2022년 2학기 오픈SW플랫폼 자기소개 웹사이트 만들기 실습

2022년 2학기 오픈SW플랫폼 자기소개 웹사이트 만들기 실습. Contribute to 00blowup/2022OpenSWPlatform_0920 development by creating an account on GitHub.

github.com

 

아래는 웹페이지를 위에서 아래까지 스크롤하는 영상이다.

 

 

교수님께 제출한 결과물에는 my favorites 영역의 music 부분에서 재생될 음원 파일도 들어있었지만, 저작권을 준수하기 위해 깃허브에는 음원 파일을 제외하고 업로드했다.

 

iframe 태그를 새로 알게 되었는데,

흥미롭긴 하지만 브라우저 측과 유튜브의 영상 제공자 측에서 이 기능에 제한사항을 걸어둔 경우가 많아 실질적인 사용이 번거롭다고 느꼈다.

 

오디오 및 비디오의 자동재생에도 제약이 많았다. 크롬에서는 음소거되어있는 미디어만이 사용자의 별도 조작 없이 자동재생될 수 있다. 쩝... 고등학생 때만 해도 그런 것이 없어서 편하게 웹페이지에 배경음악을 넣었었는데...

이와 관련하여 교수님께 질문을 드렸더니, audio 태그에 autoplay 어트리뷰트가 정상적으로 포함되어있다면 크롬에서 자동재생이 되지 않아도 요구사항을 충족한 것으로 쳐주겠다는 답신을 받았다.