반응형 웹 예제 - 영상 자료

960px 이상

 

영상 URL

https://www.youtube.com/watch?v=dAYElEEvSUU

 

https://www.youtube.com/watch?v=TvByiXWRWrU

 

https://www.youtube.com/watch?v=qeZYmfbFnnI

 

https://www.youtube.com/watch?v=OramnEsnZb0

 

https://www.youtube.com/watch?v=Weos2nsNcNQ

 

 

 

 

 

768px - 959px

 

 

 

0 - 767px

 

 

object-fit 속성

object-fit 속성은 대체되는 요소의 내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다.

 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 가로, 세로 일정한 크기로 맞춰준다. CSS3의 background-size 속성과 매우 유사하다.

 

 object-fit속성값

속성값	설명
fill	기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 비율에 맞지 않게 적용됩니다.
contain	요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다.
cover	요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 세로에 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다.
none	크기가 조정되지 않고 원본사이즈로 처리됩니다. 크면 잘리고, 작으면 남습니다.
scale-down	크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경됩니다. 이는 원본 크기보다 작아지는 결과를 보여줍니다.

object-position속성

- object-fit을 이용했을 때 cover나 none속성으로 이미지가 잘려서 보일 때 보일 위치를 이동하는 속성입니다.

- x축 키워드 : left, center, right

- y축 키워드 : top, center, bottom

- 수치는 px이나 %를 이용해서 디테일한 위치를 지정 가능합니다.

---

 

* 인터넷 익스플로러는 지원이 안됩니다.

 안드로이드는 4.4버전부터 iOS는 8.4부터 지원합니다.