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

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

이미지의 원본 사이즈를 확인하기 위한 방법으로 naturalWidth, naturalHeight를 쓸 수 있다. 로드가 시작 되었다면 확인가능하다 셀렉터.naturalWidth 셀렉터.naturalHeight

gulp를 이용한 sass 컴파일 1. node.js 설치 (ruby가 아닌 node를 이용함) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로젝트 폴더의 커맨드 창(cmd) or shell에서 npm init 실행으로 package.json 생성 3. npm install --global gulp-cli 글로벌 설치 4. npm install --save-dev gulp 로컬 설치 (--save-dev 옵션으로 개발과정으로만 사용) 5. npm i gulp-sass sass 모듈 설치 6. gulpfile.js 생성후 코드 작성 (gulpfile 작성은 gulp 사이트에서 확인..

Chrome 85에 새로 적용된 content-visibility 속성은 페이지 로드 성능을 향상시키는 가장 효과적인 새로운 CSS 속성 중 하나입니다. content-visibility는 UserAgent가 layout, painting을 포함한 요소의 렌더링 작업을 필요로할 때까지 생략할 수 있도록 합니다. 콘텐츠의 대부분이 화면 밖에 있을 때, content-visibility을 활용해서 렌더링을 생략하게 되면 사용자의 초기 로드 시간이 훨씬 빨라집니다. 또한, 화면 내 콘텐츠와 더 빠르게 상호작용할 수 있습니다... 아래의 경로에서 자세한 사항을 알 수 있습니다 https://wit.nts-corp.com/2020/09/11/6223 (번역) 랜더링 성능을 향상 시키는 새로운 CSS 속성 cont..