HTML (3) 썸네일형 리스트형 Visual Studio Code Live Server 플러그인으로 웹 개발 쉽게 하자 HTML / CSS / JS 등으로 웹 개발을 할 때, 수정된 사항을 직접 확인하기 위해 VS Code에서 저장하고, 웹브라우저에서 새로고침하는 작업을 반복하는 경우가 많다.필자는 왼쪽에 에디터, 오른쪽에 브라우저를 띄워 놓고 작업하는데 계속해서 프로그램을 왔다갔다 하면서 조작하는 게 여간 귀찮은 일이 아니었다.이런 불편함을 해소해 줄 비주얼 스튜디오 코드의 플러그인을 소개한다. Live Server 플러그인은 Visual Studio Code 에디터에서 저장`(Ctrl + S || Cmd + S)`이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 보여준다.Visual Studio Code의 '확장' 탭에서 "Live Server"를 검색하여 설치한다. 설치된 후 확인할 html/ht.. 웹사이트 상단 진행바 넣기 / HTML 16진수 색상코드 쉽게 얻는 법 1. Progress Bar 적용하기스크롤이 있는 페이지에서, 페이지 상단에 현재 어느 정도까지 읽었는지 표시되는 Progress Bar를 적용하는 방법을 다뤄보고자 한다. 위 사진과 같이 읽은(스크롤한) 정도에 따라 차오르는 진행바는 다음과 같은 내용을 웹페이지의 `body` 태그 안에 넣어서 적용할 수 있다. 1-1. PrognRoll jQuery 플러그인 CDN으로 적용 height 우측에 있는 숫자를 수정해서 진행바의 굵기를 설정할 수 있디. 1-2. 색상코드 찾아서 넣기진행바의 색깔은 16진수 색상코드를 입력해서 설정하는데, 위 예시의 경우는 `#ab9bbf`으로, 연보라색이다.갓구글 검색을 이용하면 색상코드 값을 쉽게 구할 수 있는데, 구글에 위 예시인 `#ab9bbf`를 .. 스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 사이트를 볼 수 있다. 스크롤을 했을 때 요소에 나타나기 애니메이션 효과를 구현해주는 라이브러리를 소개하고자 한다.바로 `AOS(Animate On Scroll Library)`이다. 간단한 적용 예시와 설명은 라이브러리 홈페이지에서도 확인할 수 있다.https://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 2. 준비 과정혹 JavaScript를 다루는 방법을 모르더라도, `div`.. 이전 1 다음
