wdev_blog

1. 소개 AOS.js는 스크롤의 움직임에 따라 요소에 애니메이션(트랜지션) 효과를 손쉽게 구현할 수 있는 자바스크립트 라이브러리다. AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS.js의 장점은 굉장히 가볍다는 데 있다. 파일은 aos.css와 aos.js 2개로 동작하며 각각의 파일을 보면 코드도 간단하게 구성되어 있다. 간단하면서도 기본적인 애니메이션 효과를 모두 갖추고 있기 때문에 아주 훌륭한 라이브러리라고 할 수 있다. 2. 사용법 HTML에 아래 코드를 추가한다. 실행하려면 자바스크립트에 아래 코드를 추가한다. AOS.init(); 3. 기능설명 애니메이션 효과를 사..

출처 : 탑 스크롤 애니메이션 구현하기 (tistory.com) 세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우 화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제공할 필요가 있습니다. 화면 최상단으로 스크롤해주는 다양한 자바스크립트 라이브러리가 존재하지만, 기본 자바스크립트로도 가볍게 구현 가능합니다. 가장 단순한 탑 스크롤 애니메이션 구현 윈도우 전역 메서드인 scrollTo() 로 최상단으로 화면을 이동시킵니다. top, left 두개의 파라메터를 사용하거나, 객체를 사용해서 파라메터를 넘길 수 있습니다. goTop window.scrollTo(0, 0); window.scrollTo({ top: 0, left: 0..

출처 : 예제로 이해하는 BEM. | naradesign.github.io 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility, 정찬명 naradesign.github.io 이 글은 BEM by Example(NATHAN RAMBECK)의 한글 번역이다. 본문에서 언급하는 불꽃상자는 이 게시물을 발행한 웹 사이트 이름이다. 지금부터 번역을 시작한다. BEM은 불꽃상자에서 폭넓게 사용하는 잘 알려진 CSS 클래스 명명 규칙이다. BEM의 기본 개념은 단순하고 직관적이지만 BEM을 처음 접할 때 저지르기 쉬운 오류들을 예제를 통해 설명한다. BEM(Block-Element-Modifier)은 CSS 클래스 이름을 위한 불꽃상자의 명명 규칙 표준이다. BEM은..

출처 : [CSS 방법론] BEM 방식 :: nana_log (nykim.work) [CSS 방법론] BEM 방식 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하 nykim.work 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려..

출처 : PSSecurityException 보안 오류.. : 네이버블로그 (naver.com) 우선 보안을 약하게 하는 부분이라 사용에 주의를 요한다. cmd> Powershell.exe -command 블라블라.. CategoryInfo : 보안 오류: .. PSSecurityException FullyQualifiedErrorId : UnauthorizedAccess 처음에는 관리자 권한의 문제인가 싶어서, cmd창을 관리자 권한으로 열고 실행했는데도 여전히 동일하다. ​ 찾아보니 아래와 같이 해결 가능하다. 관리자 권한으로 파워쉘을 실행한다. powershell> get-help Set-ExecutionPolicy Y powershell> Set-ExecutionPolicy RemoteSigned..

출처 : [Node.js]GULP응용하기(babel, webpack, nodemon, brower-sync) : 네이버 블로그 (naver.com) 오늘 배워 볼 내용은 백엔드와 프론트엔드에서 ES6를 사용하는 방법, 클라이언트 코드가 수정되었을 때, 브라우저를 자동으로 새로고침하고, 서버코드가 수정되었을 때, 서버를 자동으로 재시작하는 방법을 알아보도록 하겠습니다~ ​ 기본개념설명 GULP는 JavaScript 빌드 자동화 툴 입니다. GULP에는 무수하게 많은 플러그인들이 있습니다. 오늘은 클라이언트와 서버쪽에서 ES6를 사용하는 방법과 서버코드가 변경될때마다 서버를 재시작하게 해주는 것에 대하여 알아볼 것 입니다. ​ 참! 오해할 수도 있을까봐 미리 알려드리겠습니다. GULP는 "빌드 자동화 툴"입..

출처 : 프로그래밍 언어를 웹에서 실행하고 공유도 가능한 사이트 - 개발자스럽다 (gaerae.com) 개발자, 학생, 프로그램 언어를 배우는 분 모두에게 유용한 사이트를 소개하고자 한다. 가끔 간단한 코드를 실행해보고 싶은데, 실행 환경이 안되는 곳에 있거나 환경을 구성하는게 귀찮을때가 있는데, 그런 경험이 있다면 주목해보자. 현존하는 거의 모든 언어를 온라인에서 코드를 작성하고 실행까지 가능하다. Ideone 홈페이지라이선스코드 공유지원 언어코드 에디터한 줄 평 http://ideone.com - Link, Embed, Download Bash, Pascal (fpc), C, Pascal (gpc), C#, Perl, C++ 4.9.2, PHP, C++14, Python, Haskell, Python..

windows 11 설치전 정품키 확인하기 윈도우 11 설치 전에 내 피씨에 등록된 정품키를 확인하고 싶을때 아래와 진행한다. 여러가지 방법이 있는데 대표적으로 프로그램 설치로 확인하는 방법과 내가 명령어를 통해 확인하는 방법이 있다 후자가 안전하고 제일 깔끔한 방법 윈도우키 > 메뉴가열리면 > cmd > 관리자 권한으로 실행 cmd에 입력한다 cmd|wmic path softwarelicensingservice get OA3xOriginalProductKey windows 11 iso 다운로드 윈도우11 (tistory.com) windows 11 iso 다운로드 윈도우11 windows 11 iso 다운로드 윈도우11 이전에 iso 받으려면 프로그램 설치해서 다운받는 형식이었는데 이제는 공식 홈페이지..

windows 11 iso 다운로드 윈도우11 이전에 iso 받으려면 프로그램 설치해서 다운받는 형식이었는데 이제는 공식 홈페이지에서 windows11 iso를 직접 다운로드가 가능합니다 따로 웹클라우드에 저장할 필요없이 바로 받을 수 있어 보안상 위험도 줄었네요 앞으로는 다운 받을때 구글드라이브나 다른 기타 드라이브 및 클라우드에서 배포하는 파일들은 조심해서 받아야 할 것 같습니다 공식홈페이지에서 바로 받으면되니 되도록 공식홈페이지에서 정품 windows11 iso 를 다운받으세요 링크는 아래 첨부합니다 Windows 11 다운로드 (microsoft.com) Windows 11 다운로드 Windows 11 다운로드 Windows 11 미디어를 설치하거나 만들기 위한 옵션은 아래 3가지입니다. 각 옵션..

페이지 전환 스크립트 (공사중 페이지) 만들기 도메인주소 wdev.kr 을 입력시 그대로 wdev.kr만 노출 wdev.kr 입력시 www.wdev.kr 주소 앞에 www가 자동으로 입력되게 가능\ javascript 이렇게 입력하면 wdev.kr만 입력하여도 자동으로 www.wdev.kr로 변경 페이지 작성시 해당 폴더의 /index.html 파일로 실행되는데 다른 폴더의 페이지나 공사중 페이지를 띄울 수 있다. index.html에 직접 입력해도 되지만, 번거롭거나 파일관리에 불편한 경우 아래와 같이 입력하면 도메인 주소로 접속시 원하는 페이지로 이동 가능 javascript