CSS3 Viewport의 개념 - 해상도와 뷰포트(Viewport size)를 구분하자 * * 뷰포트(Viewport)란 디바이스에서 그래픽을 노출하는 영역의 크기를 말하며, 해상도와는 다른 개념입니다. Html에서 작성하는 width, height 그리고 그것을 바라보는 vh, vw 등의 단위는 모두 viewport에 준거합니다. 케이스를 통해서 뷰포트에 대한 이해를 조금 더 명확히 해볼 수 있습니다. 1. 디바이스별 해상도/스크린 크기/뷰포트 비교 디바이스 해상도 스크린 크기 뷰포트 iPhone 13 mini 1080x2340 5.4" 360x780 iPhone 13 Pro 1170x2352 5.4" 390x844 iPhone 13 Pro Max 1284x2778 6.7" 428x926 Huawei Mate 20 Lite 1080x2340 6.3" 360x780 Huawei Mate 2.. 2023. 3. 19. [CSS/jQuery] hover/mouseover/mouseenter 실습 예제 * * MouseHover, Hover, mouseover, mouseenter 모두 '마우스 커서가 객체에 올라갔을 때' 이벤트를 발생시키는 메서드라고 볼 수 있습니다. 1. 먼저 언어에 따라서 사용하는 표현이 어떻게 달라지는지 간단히 알아보고 2. 특히 CSS와 jQuery에서는 각 메서드가 어떻게 다른지 예제로 실습해보겠습니다. 예제 링크는 아래와 같습니다. https://codepen.io/noa-xyz/pen/KKBmKqq hover/mouseover ... codepen.io 1. 언어에 따라서 사용하는 표현이 어떻게 달라지는지 C# MouseHover - 대상에 커서가 올라가 있을 때 이벤트를 발생시킵니다. (대상에 커서를 올리면, 즉시는 아니지만 직후에 이벤트가 발생하는 것을 볼 수 있습니.. 2023. 1. 20. CSS)모든 브라우저에 적용되는 Full-size Video 만들기 * * 동영상을 배경으로 사용하고자 할 때 가장 편한 방법은 object-fit 속성을 사용하는 것이지만, IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다. 이 글은 object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다. 동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다. 크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다. 우선 JSFiddle에서 작성한 예시입니다. Edit fiddle - JSFiddle jsfiddle.net 아래는 작성한 예시 중 관련된 내용입니다. html 1 2 3 4 5 6 7 8 9 10 11 Big Buck Bunny a full-size backgr.. 2019. 7. 29. 이전 1 다음 728x90
