WEBPI's Markup && Css Developer

이미지의 원본 사이즈를 확인하기 위한 방법으로 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..

모바일 크롬의 상단 컬러셋 변경meta name="theme-color" content="***"content에 rgb, 및 해시컬러 사용가능...

기본이 충실하지 못하다보니 react 너무나 어려운것...잘하고 싶다.. ㅜㅜ

flexible 레이아웃에 대해 정리를 잘해주셨네요빨리 브라우저 호환 걱정없이 사용했으며 좋겠습니다.너무나 편한것! 출처 : 나라디자인 http://naradesign.net/wp/2017/05/02/2467/

에이전시 +si를 빼고 나면 회사가 없다 그나마 있는 곳들도 잡플래닛의 평가로 필터링을 하면 국내엔 과연 갈만한 곳이 존재하는지 알 수가 없다. 급격히 변화하는 추세를 따라가지 못하는 나를 탓해야지...에휴... 걍 부모님 말대로 공무원이나 할걸...여기서나마 징징글이라도 써보자

Javascript 최적화 - for문for문의 최적화for (var i in array) | forEach .. 를 사용하지 말자for in 문은 매우 느리다. object의 key를 확인해야하는게 아니면 for in 문 사용을 자제하자!for (var i = 0; i < array.length; i++) .. 대부분 이런방식이다.이것도 최적화된 방법은 아니다.아주 기본적인 방법이다. 그럼 뭘사용해요 빼에에ㅔ엑!따라서 성능에 제일 좋은 방법은 length 를 매번 체크하지않고 저장해서 사용하는법이다.for (var i = 0, length = array.length; i < length; i++) .. 이방식이다. 이로써 우리는 for in 문보다 64배 빠른 for 문을 사용할수있다. "!!!!!!!..

이 포스트는 git을 접하다 보면 마주치는 다양한 상황들에 대해 대처하기 위해 정리한 글이다. Ctrl+F 키를 눌러 원하시는 키워드를 검색하시면 다양한 케이스들을 볼 수 있다. 이 문서는 계속해서 업데이트 될 예정이고, 댓글로 제보 해주면 감사할 것 같다 >_