RWD [TIL]반응형 웹 디자인과 viewport 2021년 한 해의 Desktop vs Mobile vs Tablet Market Share Worldwide 그래프를 보면 모바일디바이스가 데스크탑 보다 높은 이용율을 보이는 것을 알 수 있다. 그렇기 때문에, 기존의 웹사이트의 컨텐츠를 그대로 유지하면서 다양한 해상도에 맞게 표시하는 반응형 웹 디자인(Responsive web design)이 필요하다. 반응형 웹 디자인(Responsiv... Viewporttext-size-adjustRWDRWD iframe 요소를 반응형으로 만들기 <video> 태그는 따로 영상을 감싸주는 요소가 필요하지 않지만 <iframe> 태그를 사용해 가져온 영상은 반응형에 대응하기 위해 감싸주는 요소가 필요하다. 이 감싸주는 태그(대개 div)가 <iframe>의 기준이 되기 때문에 영상 사이즈를 유동적으로 조절하려면 감싸주는 요소가 반드시 필요하다. 이렇게 감싼 <div> 요소에 포지션으로 relative를 주고 내부에 있는 <iframe>... 반응형iframeRWDRWD
[TIL]반응형 웹 디자인과 viewport 2021년 한 해의 Desktop vs Mobile vs Tablet Market Share Worldwide 그래프를 보면 모바일디바이스가 데스크탑 보다 높은 이용율을 보이는 것을 알 수 있다. 그렇기 때문에, 기존의 웹사이트의 컨텐츠를 그대로 유지하면서 다양한 해상도에 맞게 표시하는 반응형 웹 디자인(Responsive web design)이 필요하다. 반응형 웹 디자인(Responsiv... Viewporttext-size-adjustRWDRWD iframe 요소를 반응형으로 만들기 <video> 태그는 따로 영상을 감싸주는 요소가 필요하지 않지만 <iframe> 태그를 사용해 가져온 영상은 반응형에 대응하기 위해 감싸주는 요소가 필요하다. 이 감싸주는 태그(대개 div)가 <iframe>의 기준이 되기 때문에 영상 사이즈를 유동적으로 조절하려면 감싸주는 요소가 반드시 필요하다. 이렇게 감싼 <div> 요소에 포지션으로 relative를 주고 내부에 있는 <iframe>... 반응형iframeRWDRWD