분류 전체보기 496

@media (hover: hover)

CSS 호버 문제는 일반적으로 장치마다 :hover 의사 클래스를 서로 다른 방식으로 해석할 때 발생합니다.가장 일반적인 문제 중 하나는 사용자의 포인터가 더 이상 요소 위에 있지 않은 후에도 :hover 스타일이 계속 적용되는 "고정 호버"문제입니다.이 문제를 해결하려면 인접한 형제 선택기(+)를 사용하여 사용자의 포인터가 요소 위에 있을 때만 활성화되는 호버 리스너를 만들 수 있습니다.또 다른 해결책은 사용자가 요소 위에 마우스를 올려놓을 때만 호버 클래스나 스타일을 적용하는 @media(hover:호버)및 (pointer:fine)와 같은 미디어 쿼리를 사용하는 것입니다.마지막으로,호버 동작이 필수적이지 않은 경우 포인터-이벤트 속성을 사용하여 모바일 장치에서 호버 효과를 비활성화할 수 있습니다. ..

Web story/CSS 2023.06.02

새로운 이미지 확장자 .jxl .webp .avif

jpg xl(jxl)은 압축률 매우 우수하나 지원하는 브라우저가 거의 없다 webp는 대부분 지원중이며 jpg png gif 대체 가능하다 jpg에 비해 파일크기가 25-34프로 작다 avif는 avi1 코덱에서 파생되었으며 일부 테스트에서 jpg에 비해 최대 50프로까지 작아진다 애니메이션 지원도 가능하여 gif 대체도 가능하며 투명도 지원함으로 png 대체도 가능하다 webp 만큼의 브라우저 지원은 아니지만 늘어나고 있는 추세이다 webp는 자주는 아니지만 이유중이고 avif가 애니메이션 지원이 가능 하기에 필요에 따라서 유용하게 쓰일 수 있어 보인다

Web story/Design 2023.06.02

ios 100vh bug fix

ios 모바일 vh는 쓰지 않는게 좋다 상하단 브라우저의 높이 가변 문제로 아래 위가 잘리는 현상이 발생한다 그 이슈를 해결 하는 방법 (또는 dvh 사용도 고려해 볼만 하다) // css body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } // js var vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); .element { height: 100vh; height: calc(var(--vh, 1vh..

Web story/Mobile 2023.06.02

Intersection Observer API

교차 관찰자는 기본적으로 관찰 중인 요소(Element)가 뷰포트(Viewport)와 교차하고 있는지를 감지하는 API인데, 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는지를 알려주는 API entries 관찰 대상의 여러 정보들이 배열로 담겨져 있다. - boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly) - intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly) - intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number) - isIntersecting: 관찰 대상의 교차 상태(Boolean) - root..

Dynamic color change : mix-blend-mode

mix-blend-mode 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정한다 포토샵의 blend와 유사한 기능을 보여준다 /* Keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; ..

Web story/CSS 2023.06.02

2021년 1월~12월 1등 기록!그래픽카드 통합 1등 브랜드 MSI!특별 이벤트

. 이벤트 기간 2022년 1월 5(수) ~ 1월 18일(화) ​ ​2. 당첨자 발표 2021년 1월 20일(목) 이후 당첨자 개별 안내 ​ 3. 참여 대상 MSI 그래픽카드를 사랑하시는 모든 분들 ​ ​ 4. 이벤트 경품 MSI 지포스 RTX 3060 게이밍X 트윈프로져8 * 1명 http://prod.danawa.com/info/?pcode=13470908 MSI 럭키박스 * 10명 너구리 라면 기프티콘 * 200명 ​ 5. 신청서 제출 링크 http://naver.me/Gfo0gdQL ​ 6. 참여 방법 1) 신청서 제출 링크에 접속합니다. 2) 퀴즈 정답을 입력합니다. 3) 이벤트에 관한 내용을 블로그 / 카페 / 소셜네트워크 / 기타 커뮤니티 등에 업로드 합니다. (단, 해당 카페, 커뮤니티 등..

Computer 2022.01.06

Svelte.js

What is Svelte? Svelte is a tool for building fast web applications. 스벨트는 빠른 웹 구축을 위한 도구이다 It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces. interactive한 유저 인터페이스를 쉽게 구축 할 수 있다는 목표를 공유하는 React 및 Vue와 같은 JavaScript 프레임 워크와 유사하다 But there's a crucial difference: Svelte converts your app into ideal JavaScri..

Web story/Front End 2021.02.05
반응형