javascript events : animationstart, animationend구현 해야 할 UI 중에 하나의 애니메이션이 끝나면,이어서 그 다음 애니메이션이 나와야 하는 경우가 생겼습니다.  위 이미지처럼 화살표 애니메이션이 진행하다가 끝나면, 이어서 다음 애니메이션이 나와야 하는 상황.평소처럼 animation에 딜레이를 적용하여 이어진 애니메이션 처럼 연출하거나,라이브러리를 사용할 수도 있겠지만,  라이브러리를 사용하기에는 간단한 애니메이션이고,딜레이로 작업하려고 생각해보니 반응형 화면 크기 별로 애니메이션 진행 시간을 다르게 적용해야 되서, 화면 크기 별로 다르게 delay 시간을 적용해야 하는 점이 비효율인 것 같아서, 애니메이션 처리 방법에 대해 인터넷에서 찾아보다가 javascript..

gulp.js웹 프론트, 퍼블리싱을 진행할 때, 작성한 코드에 대한 결과 화면을 수시로 확인해야 한다. 보통 코드를 저장하고 나서 결과 화면을 보기 때문에저장하는 시점에 맞춰서 최신의 결과 화면을 보여주어야 한다. react 프로젝트에서는 모던한 환경구성을 알아서 제공해주거나 설정 접근성이 좋지만, 전통적인 웹 프로젝트에서는 이러한 환경을 직접 구축해야만 자동 처리의 편리함을 얻을 수 있다. 그러한 웹 프로젝트에서도 자동으로 처리기능이 있었으면 하는 마음에 방법을 찾아 본 결과,가끔식 언급되어 이름으로만 들어본 gulp.js가 이러한 자동처리를 도와줄 수 있다는 것을 알았다.gulp 설치node가 설치되어 있는 상태에서,  1. Gulp 명령어 유틸을 전역(Global)로 설치하기npm install -..

Web Components : Custom Elementshtml 에서도 react 나 vue 처럼 컴포넌트 단위로 작업을 할 수 있는지 궁금하여 검색해보다가 Custom Elements 에 대해서 알게 되었다.문서에는 Custom Elements에 대해 아래와 같이 설명이 되어 있다.웹 컴포넌트 표준의 주요 기능 중 하나는 사용자 정의 페이지 기능을 제공하는 길고 중첩된 요소들의 묶음으로 만족하는 것보다는, HTML 페이지에서 기능을 캡슐화하는 사용자 정의 요소를 생성하는 능력입니다. Custom Elements 작성크게 두 파트로 나뉜다. 1. 커스텀 요소를 구현. 하고 2. 커스텀 요소를 정의(등록) 한다. 1. 구현class 클래스이름 extends HTMLParagraphElement 2. 정의..

# 기본 유효성 체크의 사용자 정의 유효성setCustomValidity() 와 reportValidity() 제목을 많이 고민하다가 지었는데 맞는 제목인지 모르겠지만, 기본 제공 유효성 체크의 커스텀에 대한 내용이다. html에서 기본 제공하는 유효성 체크의 ui는 많이 보았지만, 실제로 이것을 이용해서 유효성 체크를 해보거나 공부한 적은 없었다.사용 방법은 잘 알고 있다시피 input 태그에 속성으로 required(필수) 나 type(입력값 종류), pattern(패턴), min, max ... 등을 이용해서 해당 input의 유효값을 정의하고, form 태그 안 에서 submit을 발생시키면 그 시점에 전송되기 전에 자동으로 위처럼 유효성 체크를 수행하게 된다. html 기본 유효성 체크를 이용해..

FTPFTP는 인터넷을 통해 파일 송수신을 지원하기 위해 고안된 프로토콜입니다.HTTP와는 다르게 양방향 통신이며, 작업이 끝나기 전까지 연결이 끊어지지 않습니다.20번 포트는 데이터 전송을 위해 사용되고, 21번 포트는 명령과 응답 등 제어 정보를 위해 사용됩니다.비밀번호, 데이터 전송 연결이 평문으로 전송되기 때문에 중간에 가로채어질 경우 암호화되지 않아 보안상 취약합니다.액티브(Active) 모드능동 모드라고도 합니다.클라이언트가 서버에게 포트를 알려줘서 통신하는 방식으로서 네트워크 포트 20번, 21번을 사용하는 방식을 액티브 모드라고 합니다.패시브(Passive) 모드수동 모드라고도 합니다.클라이언트가 서버가 지정한 임의의 서버 포트로 연결할 수 있게 합니다.패시브 모드는 앞서 액티브 모드에서 ..

CSS CounterCSS 이용하여   요소처럼 자동으로 넘버링 하게 해줍니다.CSS Counter는 CSS에서 유지 관리하는 "변수"로, CSS는 값을 추적하여 규칙에 따라 값을 증가시킬 수 있습니다. 사용되는 속성CSS 카운터는 "변수"와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다(사용 횟수를 추적합니다).counter-reset : 카운터를 생성하거나 재설정합니다.counter-increment : 카운터 값을 증가시킵니다.content : 생성된 콘텐츠 삽입.counter()또는 counters()함수 : 카운터 값을 요소에 추가합니다.body { counter-reset: section 0; /* counter 이름을 'section'으로 지정합니다. 초기값은 0입니다. 초..