WEBPI's Markup && Css Developer

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

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

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

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

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