반응형 이미지/ 비디오 / padding top %

반응형 이미지 배경 꽉채우기 

background: no-repeat;
background-size: cover;
background-position: center;

max-width : 100% -> 이미지 크기의 최대크기까지 늘려줌
width: 100% -> 화면 최대크기까지 늘려줌

 

반응형 비디오 

autoplay 할때는 muted 설정하자  -> 웹 접근성때문에!
영상도 width 100% -> 반응형 지원함
영상도 max-width: 100%는 원본의 영상크기까지 늘어남.

유튜브는 비디오랑 다르게  url에 autoplay, mute 같은거 붙어있음. (파라미터)  -> 알아서 자동재생+음소거

유튜브영상 width:100%, height:100% 주면 되긴하는데 화면비율을 자동으로 잡아주진않음.

-> 100vh는 먹음

 

 

padding top  %

 

padding top에 %를 주면 영상의 높이를 반응형으로 구현할수있다 .

 

1. 부모요소 ( 컨테이닝 블록)를 기준으로 부모요소의 width에 영향을 받아서 높이를 가지게 됨

 -> 부모의 높이는 상관없음. (보통 높이는 지정해 주지않지만)

 

2. padding top: 100% 하면 부모의 width를 기준으로 잡기때문에 정사각형 모양이 나옴.

   50%주면 가로가 긴 직사각형.

 

3. 마진값도 똑같이 퍼센트로 줄 수 있음.