J-Web

Posting

• WebP
• Vue Provide/Inject
• CSS var()
• let과 const를 써야하는 이유
• 타입스크립트(TS)
• JS Class
• YouTube Player API
• VSCode에서 snippets 활용하기
• CSS flexbox
• 임시 샘플 이미지(placeholder image) 추가하기
• JSDoc
• Git 명령어 정리
• 언어 별로 폰트를 적용하는 방법 unicode-range
• VSCode에서 SCSS 셋팅하기
• background-image lazyload
• image lazyload

Example

• SmartCursor로 마우스 커서 커스텀하기
• details + summary 태그로 부가 정보 접었다 펴기
• Priority Nav 플러그인 예제
• Swiper 다양한 예제
• scroll snap
• a 태그와 iframe 태그로 유튜브 영상 연결하기
• 마우스 패럴렉스 효과
• 요소가 보이는지 판단하는 isVisible prototype
• Swiper 센터 슬라이드 크기 키우기
• Flexbox Layer Popup
• JS로 이미지의 원본 사이즈 가져오기
• 앞면 동일한 카드 맞추기
• drag and drop으로 파일 올리기

유용한 웹 툴

• 스프라이트 이미지 제너레이터
• 그라데이션 백그라운드 제너레이터
• CSS 삼각형 제너레이터
• text-stroke 제너레이터
• SVG 코드 최적화
• SVG data-url 인코더
• 칼라 네이밍
• CSS clip-path maker
• 올인원 툴

Contact Me

• Email: zaixu91@gmail.com
• Web: https://fe-jw.github.io
• GitHub: https://github.com/FE-jw