Atelier BiCute

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는 일반적으로 이 부분을 따로 그룹을 지어주겠지만, 이 스크롤 기능을..

#1 TOC란? Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 검색을 해보면 수많은 TOC 관련 내용이 있는데 대부분 완전히 동일한 내용이고, 화면의 사이즈를 조절하면 화면을 뚫고나가던가 본문을 덮어버리는 설정들이 많아 가장 많이 사용하는 TOC를 이용하여 제 스타일에 맞게 조금 수정하였습니다. #2 TOC 적용하는 방법 1. js 파일 다운 다음 파일을 다운받아 티스토리의 HTML 편집으로 이동하여 파일을 업로드합니다. 2. js 파일 적용 HTML 편집에서 위쪽에 다음 코드를 삽입해 줍니다. 3. 목차 적용할 장소 찾기 HTML 편집에서 목차를 적용하기 위한 본문..

#1 기능 설명 일반적으로 내비게이션 등의 앵커 태그(a) 등을 이용하여 동일 페이지에서 위치를 이동하게 될 때, 해당 위치로 바로 이동해 버리지만 이 기능을 사용하게 되면 해당 위치로 이동할 때 화면을 스크롤하는듯한 애니메이션 효과를 주어 부드럽게 이동하게 됩니다. #2 적용 및 사용 방법 1. jQuery가 연결합니다. 참고: 제이쿼리(jQuery) 설치하는 방법 2. scrollTo.js를 HTML 문서에 연결합니다. { 다운로드 방식 } 다음 파일을 다운로드하여 HTML의 앞에 연결해 줍니다. { CDN 방식 } 3. 다음 코드를 위쪽에 삽입해 줍니다. 3번째 줄의 'nav a' 항목을 원하는 요소로 지정해 주면, 해당 링크가 걸린 곳으로 이동할 때 스크롤이 흐르듯이 이동하게 됩니다. 4번째 줄의..

#1 기능 설명 화면을 스크롤하게 되면 해당 시점에서 오브젝트들이 서서히 나타나는 효과를 라이브러리를 사용하여 매우 쉽고, 간편하게 다양한 방식으로 줄 수 있습니다. #2 적용 및 사용 방법 공식 페이지 : https://michalsnik.github.io/aos/ 위 페이지에서 각 속성별 효과를 확인해 볼 수 있습니다. AOS 연결하기 ※ 아래 내용은 CDN 방식으로 연결하는 내용이며 download 파일로 연결하고 싶다면 다음 파일을 받아서 이용하셔도 됩니다. CSS와 JS를 연결하기 위해 html의 위쪽에 다음 내용을 입력해 줍니다. AOS를 동작 시키기 위해 다음 내용을 html의 위쪽에 다음 내용을 삽입해 줍니다. 여기까지만 하면 준비과정은 모두 끝났습니다. 이제 원하는 대상에게 data-ao..

네이밍 커벤션(naming convention)이란? 변수명을 짓는 규칙. 컴퓨터 프로그래밍 언어 또는 개발 도구마다 사용되는 표기법이 다르며, 혼용이 가능할 경우 취향에 따라서도 선호하는 표기법이 다르기에 가볍게 정리해 보았습니다. 1. 카멜 표기법 (camelCase) 글자의 모양이 낙타의 등과 같다고 해서 카멜(낙타) 표기법이라 부른다. 변수 명이 두 단어 이상일 경우, 두 번째 이후부터는 단어의 첫 번째 문자를 대문자로 표기하며 띄어쓰기는 사용하지 않습니다. 변수명과 함수명 등에서 주로 사용됩니다. let userName = ""; 2. 파스칼 표기법 (PascalCase) 카멜 표기법과 유사하지만, 첫 번째 단어의 첫 문자도 대문자를 사용합니다. 클래스명과 생성자 명 등에서 주로 사용됩니다. ..

#1 제이쿼리(jQuery)란? jQuery는 웹사이트에서 자바스크립트를 쉽게 사용할 수 있게 도와주는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 높은 호환성과 다양한 기능, 수많은 제이쿼리를 기반으로 한 플러그인 등을 이용하여 편리하게 다양한 기능을 구현할 수 있는 것이 특징입니다. 이번 글은 제이쿼리와 제이쿼리를 이용한 다양한 플러그인을 사용하기 위해 반드시 필요한 사전 준비작업이기에 따로 게시물을 구분하여 작성합니다. #2 제이쿼리 라이브러리 연동(연결)하는 방법 제이쿼리는 특별한 프로그램이 아닌, html에 흔히 연결하여 사용하던 css와 js 같은 파일입니다. 그럼 이 제이쿼리 파일 연결은 어떻게 하는 것인가. (1) 제이쿼리를 다운하여 연동하는 방법 1. https://j..