WEBPI's Markup && Css Developer

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..

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

요소가 새로운 겹침 상태를 생성해야 하는지 지정합니다. mix-blend-mode와 함께 사용했을 때 특히 유용합니다. / * 키워드 값 * / isolation: auto; isolation: isolate; / * 글로벌 값 * / isolation: inherit; isolation: initial; isolation: revert; isolation: revert-layer; isolation: unset; .bg { isolation: isolate; } .isolation { mix-blend-mode: difference; } 지원 https://caniuse.com/?search=isolation

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; ..

. 이벤트 기간 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) 이벤트에 관한 내용을 블로그 / 카페 / 소셜네트워크 / 기타 커뮤니티 등에 업로드 합니다. (단, 해당 카페, 커뮤니티 등..

급 사고싶네

혹 방문하신분증 클럽하우스 초대 가능하신분 있으시면 초대 부탁드려봅니다 비밀댓글 남겨주시면 연락처 남기겠습니다

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..

change() 이벤트는 유저 작용에 의해 발생 jquery로 처리할 경우 $(element).prop("checked", true).change(); or $(element).prop("checked", true).trigger('change'); 같이 체크

w descriptor 사용 ! src 속성은 srcset을 지원하지 않을때 적용 뷰포트 가로가 450px 이하일 때 이미지.png (450px) 뷰포트 가로가 451~768px 일 때 이미지2.png (768px) 뷰포트 가로가 769px 이상일 때 이미지3.png (1080px) sizes 는 고정 사이즈가 필요시 지정해준 크기의 이미지 대상 사용 x descriptor는 언급하지 않음 ! ie는 지원하지 않는다 Polyfill은 https://github.com/aFarkas/respimage