Atelier BiCute

#1 Git ≠ GitHub 깃(Git)과 깃허브(GitHub)는 같은 것이 아닙니다. Git은 버전 관리를 손쉽게 도와주는 소프트웨어이며, GutHub는 이 Git으로 저장된 내용들을 저장할 수 있는 공간을 제공해 주는 서비스 중 가장 유명한 것일 뿐, 깃허브만 이런 기능을 사용할 수 있는 것은 아닙니다. #2 GitHub를 사용하는 이유. 소스 코드의 버전별 저장/관리 팀 프로젝트(협업) 코드 공유 코드의 배포 파일을 통으로 복사하지 않아도 브렌치를 이용해 여러 가지 패턴을 시도해 볼 수 있음 등. #3 깃허브(GitHub) 사용 준비 1) GitHub 유저등록 아래의 GitHub 홈페이지로 이동한 후 회원가입(Sign Up)을 하고 로그인(Sign In)을 합니다. 링크 : https://githu..

제가 설치하여 사용하고 있는 확장 프로그램 모음입니다. 하나씩 글을 적기엔 분량이 너무 적을 거 같아서 그냥 한 번에 쭉 리스트를 올려봅니다. #1 이건 필수! Korean(사용법) Language Pack for Visual Studio Code Visual Studio Code의 설정을 한글로 바꿔주며, 기본적으로 처음 설치 시 오른쪽 아래의 팝업창을 통해 자동으로 설치됩니다. Live Server 웹브라우저를 통하지 않더라도 수정하는 결과를 바로바로 확인할 수 있게 도와주는 프로그램으로 코딩한 내용의 수정 사항을 즉각적으로 확인할 수 있습니다. #2 강력 추천 Auto Rename Tag 한쪽의 태그만 수정해도 반대쪽의 태그까지 자동으로 수정해 줍니다. Bracket Pair Colorizer 2 ..

#1 기능 설명 웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다. 간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다. #2 효과 확인하기 다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다. 공식 페이지 : https://animate.style/ #3 적용 및 사용 방법 Animate.css 연결하기 ※ NPM 방식과 CDN 방식을 지원합니다. 혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다. 다음 코드를 앞에 붙여 넣습니다. 사용 방법 기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니..

윈도우에서는 그냥 설치했었는데 Homebrew가 뭐지? 어떻게 설치하라는거지?...등 패닉에 걸린 사람들을 위해 적어보는 Mac에서 Git 설치하는 방법입니다. *M1 CPU 변경 이후 설치 오류가있어 추가적인 작업이 필요하다고 듣긴했는데... M1 모델을 사용하고 있지 않아 그 부분은 확인하지 못했습니다. #1 Git에서... 1) Git 홈페이지로 이동 우선 Git을 다운받을수 있는 홈페이지로 이동합니다. 링크 : https://git-scm.com/ 2) Download 페이지로 이동 오른쪽에 보이는 Download for Mac을 클릭하여 설치 안내 페이지로 이동합니다. 3) Homebrew 페이지로 이동 Homebrew 링크를 눌러 Homebrew 페이지로 이동합니다. *(별로 중요하지 않은 이..

리액트를 시작하기 위하여 Node.js와 React를 설치하는 방법. 그리고 기본적인 파일들의 설명을 정리해 보았습니다. #1 Node.js 설치하기 다음 사이트로 이동하여 Node.js를 설치합니다 링크 : https://nodejs.org/en/ 왼쪽은 많은 사람들이 사용하고 있어 신뢰할 수 있는 안정성을 가진 버전, 오른쪽은 최신 버전입니다. (그냥 최신버전 받으시면 됩니다) ※ Node.js는 라이브러리를 설치하기 쉽게 도와주는 툴 #2 Visual Studio Code 설치 다음 사이트로 이동하여 Visual Studio Code를 설치합니다 링크 : https://code.visualstudio.com/ 1) 작업 폴더 생성 원하는 위치에 리액트를 사용하기 위한 폴더를 생성합니다. 2) 작업 ..

Odyssey 스킨의 5가지 커버 스타일중 4번째 커버 스타일을 수정해 보았습니다. #1 포스터 타입 커버 5가지 커버 스타일중 4번째. 포스터 스타일은 다음과 같이 생겼습니다. 새로타입으로 길쭉하게 되어있어, 말그대로 포스터나 책 리뷰용으로 괜찮게 생겼지만... 둘다 저랑은 인연이 없는지라, 이 커버 스타일은 사용할 일이 없을줄 알았습니다. 하지만 기왕 있는거... 그냥 제 스타일대로 뜯어고쳐서 다른데 써먹을 생각으로 열심히(?) 수정을 해 보았습니다. #2 수정하기 박스 사이즈 변경 주말 심심풀이 삼아 아무생각없이 하다보니 기록이 누락되어 대충 코드만 남겨봅니다. 포스터 관련 CSS의 범위는 대략 다음과 같습니다. [style.css:2483~2595] 아래 내용으로 수정하였습니다. /* articl..

#1 기능 설명 페이지를 아래로 스크롤하면 임계값이 충족될 때(사용자 뷰포트의 하단) 각 애니메이션이 트리거 됩니다. data-av-animation 속성을 통해 사용하려는 것을 선언하기만 하면 됩니다. #2 적용 및 사용 방법 연결하기 html의 위쪽에 다음 내용을 입력해 줍니다. ※ 공식 페이지에서 파일을 다운로드할 수도 있습니다. 공식 페이지 : https://jjcosgrove.github.io/jquery-aniview/ 사용 방법 공식 페이지부터 Animate.css와 함께 사용하라고 안내하고 있습니다. $('.aniview').AniView(); 기본 작동은 '.aniview' 클래스를 가져와 실행한다는 것인데 다음과 같은 옵션 설정도 가능합니다. var options = { animateC..

#1 베이직 타입 커버 썸네일 이제 블로그에 글이 조금씩 쌓여가면서 새로운 타입의 커버를 하나씩 추가하게 되었습니다. 이미지 비율 유지 타입, 단순 텍스트 타입에 이어 3번째로 사용하게 되는 커버인 '베이직 타입'입니다. 베이직 타입 커버를 사용해 보면, 썸네일의 이미지가 깔끔하지 못하고 억지로 이미지를 과하게 줄여서 굉장히 자글자글하게 깨진 상태로 보입니다. 특히나 이미지보다 글자가 메인일 때 크게 눈에 띄는데... 이 부분을 어떻게든 수정해 보기로 했습니다. #2 수정하기 해당 부분은 스킨 편집의 HTML과 CSS가 아닌, 자바스크립 파일 중 common.js 안에 포함되어 있습니다. 자바스크립트를 수정하기 위해선 메모장이나 vscode 등의 코드 편집기를 사용하시면 됩니다 해당 파일을 열어 다음 항..

adobe와 microsoft의 프로그램들이 무슨 악성프로그램처럼 매번 백그라운드에서 돌아가며 업데이트하고 이것저것 확인하는 게 꼴 보기 싫어서 적어보는 윈도우의 시작 프로그램 확인하는 방법과 설정(ON/OFF) 방법입니다. #1 시작프로그램 확인 및 설정 (1) "설정"으로 들어가서 사이드바에서 "앱"을 클릭합니다. (2) "앱" 항목 중 "시작 프로그램"을 클릭합니다. (3) 이곳에서 시작 프로그램을 확인하고 버튼을 눌러 ON/OFF로 설정해줄 수 있습니다. *영향이 높은 항목을 OFF 할 때는 주의해주세요. #2 보너스 위 방법 외에도 흔히 강제 종료할 때 자주 보게 되는 작업 관리자(crl + art + del)에서도 설정할 수 있습니다. 시작 프로그램 탭으로 이동하여 원하는 프로그램을 선택하면 ..

#1 기능 설명 마우스 휠을 스크롤하면 해당 위치까지 부드럽게 애니메이션처럼 스크롤되는 효과. 전체 화면을 페이지 넘기듯 전환하는 방식으로 웹페이지에서 자주 사용되었던 지금은 유행이 살짝 지난 효과. #2 적용 및 사용방법 (샘플) 1. jQuery 연결하기 jQuery를 사용하므로 jQuery 연결은 필수. 참고: 제이쿼리(jQuery) 설치하는 방법 2. HTML 샘플 한국 서울 대전 대구 부산 서울 대전 대구 부산 bicute.net 전체적인 내용은 중요하지 않지만 이 글에선 16~19라인의 section을 전체 화면으로 스크롤되게 할 것이며, 모두 동일한 location이라는 클래스를 주었습니다. 위아래 주석처리가 되어있는 div는 일반적으로 이 부분을 따로 그룹을 지어주겠지만, 이 스크롤 기능을..