profile
J-Web
post-thumbnail

VSCode에서 snippets 활용하기

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

6일 전
·
0개의 댓글
·
post-thumbnail

CSS flexbox

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

2022년 9월 23일
·
0개의 댓글
·
post-thumbnail

임시 샘플 이미지(placeholder image) 추가하기

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

2022년 9월 16일
·
0개의 댓글
·
post-thumbnail

JSDoc

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

2022년 9월 12일
·
0개의 댓글
·
post-thumbnail

언어 별로 폰트를 적용하는 방법 unicode-range

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

2022년 7월 7일
·
0개의 댓글
·
post-thumbnail

Visual Studio Code에서 SCSS 셋팅하기

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

2022년 6월 30일
·
0개의 댓글
·
post-thumbnail

웹 최적화를 위한 background-image lazyload

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

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

STA(Scroll Trigger Animation)

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

2022년 5월 27일
·
2개의 댓글
·
post-thumbnail

웹 최적화를 위한 image lazyload

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

2022년 5월 20일
·
0개의 댓글
·