특정 버튼 클릭 시 레이어 팝업을 노출시켜주는 JS 플러그인이다.주요 특징은 다음과 같다. 팝업 노출 후 포커스가 팝업으로 이동하여 정보 탐색 순서가 자연스럽다.ESC 키를 눌러 팝업을 닫을 수 있다.닫기 버튼에서 실수로 Tab 키를 누르면 포커스가 다시 팝업으로 이

재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어자주 사용하는 코드를 손쉽고 빠르게 작성하기 위해 복사 + 붙여넣기가 많이 사용되지만 더 좋은 방법이 있다.능률을 200% 끌어올려 주는 필수 기능! 바로 스니펫이다. VSCode에는 기본

flexbox는 행과 열 형태로 자식 요소를 배치하기 위한 레이아웃 속성이다.테스트 페이지 바로가기flex container: 정렬할 요소들을 감싸는 부모 요소flex item: flex container의 자식 요소(정렬할 요소) 간단한 예제로 <ul> 안의

임시로 이미지를 표시하는 서비스이다.이미지 크기와 형식, 배경색, 텍스트 등을 지정할 수 있다.url 뒤에 /이미지사이즈 만 입력하면 끝이다.150px \* 100px 사이즈의 이미지를 표시하는 예시이다. 너비와 높이 사이즈가 동일하다면 한 번만 적어도 된다. 선택

자바스크립트 소스 코드 파일들에 주해를 달기 위해 사용하는 마크업 언어이다.자바스크립트에 타입 힌트를 제공할 수 있다.JSDoc 주석은 /\*\* ... \*/ 사이에 기술한다. author은 항목의 작성자를 나타낸다.이름 뒤에 꺾쇠를 넣고 이메일을 추가한다.매개변수의

"영문은 Roboto로 적용 해주시고, 한글은 나눔 스퀘어로 적용해 주시고, 숫자는 Noto Sans로 적용해 주세요." 만약 이런 요청이 있다면 태그로 각각 감싸주지 않아도 unicode-range를 이용하면 쉽게 적용이 가능하다.unicode-range는 @fon

Visual Studio Code에서 SCSS compiler를 적용하기 위해 테스트를 진행했다.extension은 Live Sass Compiler와 Easy Sass를 비교했고, 최종적으로 Live Sass Compiler를 선택했다.css formatexpand

웹 페이지 로딩 타임을 당길 수 있는 의외의 방법이 있어서 사용 중이다.보통 페이지가 로딩될 때 하단부의 배경 이미지들은 뷰포트에 노출되지 않는다.아래 참고 이미지에서 Section 2, 3의 배경 이미지는 처음에 불필요하다.이러한 배경 이미지의 요청을 로딩 후로 미루

Scroll Trigger Animation의 약자로, Vanilla JS와 CSS로 구성된 플러그인이다.스크롤 시 요소의 일부분이 뷰포트에 노출되면 애니메이션 트리거를 활성화한다.플러그인 용량이 굉장히 가볍고 적용 방법이 쉽다는 것이 큰 장점이다.또한 개발자가 의도하

페이지를 로딩하는 시점에서 불필요한 이미지 리소스의 요청을 미루는 기술이다. 초기 요청 수를 줄여 로딩 속도를 높이기 위함두 가지 방법을 정리했다.보통 javascript를 이용한 방법이 많이 사용되고 있지만 HTML loading 속성을 이용하면 쉽게 구현이 가능하다