강의 보고 따라만드는건 쉽지만 보지않고 하는순간 막히는 부분이 차례차례 나온다.
역시 혼자 만들어보는것이 가장 빠른 공부법이라는걸 다시 한번 느낀다.
부족한 부분과 애매하게 알고 있었던 부분을 명확하게 공부하면서 실습하니 어려워도 배우는 재미가 있다.
아래는 반응형 웹 페이지(유튜브)를 만들면서 새로 배웠던/헷갈리는 부분을 정리한 내용들이다.
HTML
video 태그
HTML 'video' 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
오디오 콘텐츠에도 사용할 수 있으나, audio 요소가 사용자 경험에 좀 더 적합합니다.
특성
이 요소는 전역 특성을 포함합니다.
autoplay
(boolean); 해당 속성이 지정된 경우 비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 재생되기 시작합니다.
video태그 내부에 autoplay 속성이 존재한다면 비디오가 자동재생 됩니다.
autoplay를 비활성화시킬 때 autoplay="false"는 동작하지 않습니다. autoplay를 비활성화하려면 해당 속성을 완전히 제거해야 합니다.
buffered
미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다.
이 속성은 TimeRanges (en-US) 객체를 포함합니다.
controls⭐️
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
crossorigin
crossorigin 속성은 CORS를 사용해서 관련 이미지를 패치해야 하는지 여부를 나타냅니다.
video태그의 자세한 정보는 여기서 확인해보자
iframe 삽입_반응형으로
여기에 있던 사이즈 정보 삭제HMTL
<div class="ytu__video">
<iframe src="https://www.youtube.com/embed/X91jsJyZofw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <section class="info">
</div>
CSS
.ytu__video {
position: relative;
width: 100%;
padding-bottom: 56.2%;
margin: 0px 0px;
/* 360(px) / 640(px) = 0.5625 */에밋_더미 텍스트 생성
CSS
:root 사용
사용자 지정 CSS속성 사용하기
root는 의사 클래스 (트리 구조 의사 클래스)중 하나로
방대한 코드 중에 동일한 스타일링의 요소들을 일괄적으로 바꾸기 위해 사용.
자세한 :root의 사용은 여기에서 확인하자
