Atelier BiCute

#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..

#1 Progress Indicator 진행 바, 상단 스크롤, 프로그래스 인디케이터, 프로그래스 바 등 다양하게 불리고 있는 스크롤에 따른 진행도를 표시해주는 선을 블로그에 삽입하는 방법입니다. #2 블로그에 적용하기 HTML 편집에서 가장 아래쪽으로 이동한 후, 다음 코드를 복사하여 위쪽에 붙여 넣어주면 적용은 끝입니다. 중간에 보이는 height: 4 가 선의 굵기를, color: "#180204"가 선의 색상을 나타냅니다. 숫자만 바꿔주거나 ""안에 원하는 색상을 넣어주시면 쉽게 자신의 스타일로 수정할 수 있습니다. #3 기타 이 항목은 신경 쓰지 않으셔도 됩니다. HTML에 스크립트 계속 적히는거 싫어하는 스스로를 위해서(?) 만든 파일입니다. 파일 업로드 후, 다음 한줄만 삽입하면 작동.

#1 Google Material Icons 링크 : https://fonts.google.com/icons 사용 방법 방법 1. 원하는 아이콘을 검색하여 클릭하면 오른쪽의 사이드바를 통해 사이즈 색상 등을 선택한 후, 아래쪽의 버튼을 눌러 SVG 또는 PNG 파일로 다운로드하여 사용할 수 있습니다. 방법2. 다운로드하여 사용하는 게 귀찮다 생각되면 HTML에 다음 스타일 시트 한 줄을 추가하는 것으로 손쉽게 사용할 수 있습니다. 위 코드를 삽입하였다면 이제 원하는 장소에 다음과 같이 코드를 입력한 후, 해당 아이콘의 이름을 입력하면 됩니다. (아이콘 이름은 위 이미지의 빨간 화살표 부분입니다) 아이콘이름 get_app #2 Font Awesome 모든 아이콘을 사용하기 위해선 유료 결제(1년 $99)..

#1 자체 문제점이라는 게 무엇? 스킨을 수정하면서 블로그를 사용하다 보니 '어? 이건 왜 이러지?' 싶은 문제점들이 몇 가지 보이기 시작했습니다. 처음엔 내가 뭔가 수정하다가 잘못 건드렸나 보구나... 싶었는데 다른 오디세이 스킨을 쓰는 사람들 모두에게 이 증상이 나타나고 있는 것을 확인했습니다. 공식적으로 배포한 스킨 자체의 문제였기에 해당 문제를 찾아서 제 맘대로(?) 수정해 보았습니다. #2 오류 1. 그리고 수정. 이 부분은 오류...라고 하기엔 별 문제는 아니고, 그렇다고 정상이라고 보기엔 애매한 것 같아 일단 수정은 하였습니다. 비교를 위해 우선 수정 전, 후 이미지부터 확인해 보시고 원하신다면 따라서 수정하시면 될 거 같습니다. 웹 브라우저의 사이즈를 조절하다보면 PC 모드와 Mobile ..

우선 이 글은 윈도우의 사용자 계정 이름을 변경하는 것이 아닌(이건 그냥 언제든지 변경 가능합니다) 마이크로 소프트 계정 기반으로 반 강제적으로 작성되는 "C://사용자/유저이름(영어 소문자)"을 변경하는 것입니다. 저의 경우 등록된 이름은 BiCute로 되어있는데, 이 계정으로 로그인을 하면 'bicut'로 글자가 잘려있어서 이후 나중에 뭐 할 때마다 계속해서 거슬리더군요... (실명으로 하신 분이라면 더더욱 그러할 테고...) 저처럼 뭔가 성격이 더러워서(?) 어떻게든 이런 거 처리하고 싶으신 분들이 참고하시면 좋을 거 같습니다. 이번 글도 지난번 글과 마찬가지로 인터넷에 검색해보니 검색 상위에 상위 레지스트리 잘못 건드려 답이 안나오는 상황으로 만들어버리는 치명적으로 잘못된 방식이 검색되어 적어보는..

부모 요소에 사용하는 속성들 grid GridBox란것을 정의 (이것만으로는 특별한 반응은 없음) display: grid; grid-template-columns 몇 열(columns)로 할 것인지, 박스들의 사이즈는 어떻게 할 것인지 지정. grid-template-columns: 4fr 6fr; /* 4대 6으로 나눔 */ grid-template-columns: 40% 60%; /* %로도 사용은 가능 */ grid-template-columns: repeat(3, 1fr); /* 사이즈가 반복될 경우 repeat 방식으로도 가능 */ grid-template-columns: 1fr 1fr 1fr; /*위 repeat과 같다 */ grid-template-rows 몇 줄(rows)로 할 것인지, ..