Atelier BiCute

#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)로 할 것인지, ..

아래 내용은 BiCute 스킨(ver.2.0 이상)을 사용하여 게시물을 작성할때 어떻게 표시되는지에 대한 안내입니다. 아래 목록에 있는 항목들은 사용자화 한 항목들이며, 이외의 기능들에 대해서는 기본 티스토리 기능을 따라가고 있습니다 기본 티스토리 기능을 유지하고 있는 기능들에 대해선 추후 디자인의 변경이 발생할 수 있습니다. --- 문단 모양 --- • [제목 1]로 작성하면 이렇게 표시됩니다 자동 목차에 반영됩니다. 대분류의 제목이나 길지 않은 문장의 타이틀로 추천합니다. • [제목2]로 작성하면 이렇게 표시됩니다. 자동 목차에 반영됩니다. 대부분의 타이틀이 길거나, 대분류 내부의 소분류로 추천합니다. • [제목3]으로 작성하면 이렇게 표시됩니다. 제목3은 자동목차에 적용되지 않습니다. 주로 링크나 ..

#1 BiCute 스킨 소개 Odeyssey 스킨을 기반으로 쓸데없는 기능을 최대한 삭제하였으며, 심플하고 깔끔하지만 세련된 스타일로 제작하였습니다. 과도한 이펙트와 특수효과들은 사용하지 않았기에 쾌적하고 빠른 블로그를 이용할 수 있습니다. #2 BiCute 스킨 특징 • Odyssey의 장점은 계승! - PC 레이아웃 : 2단 우측 사이드바 / 1단 서랍형 사이드바 - 목록 탐색 타입 : 페이지 나열 / 더보기 버튼. - 티스토리 '메뉴'를 활용한 네비게이션 바 적용 가능. - 헤더 슬로건 섹션 적용 가능. - 이벤트 배너 섹션 적용 가능. - 사이드바 프로필 / SNS 링크(YouTube, Instagram, Twitter). *Facebook 삭제 - 트위터 타임라인 적용 가능. *Facebook ..

※ 윈도우의 스크린샷 기능이 더럽게 불편해서 개인적인 용도로 추후 재설치를 했을 때를 대비하여 적어놓는 글입니다. #1 스크린 캡처 방법 윈도우를 사용하면서 스크린 캡처를 하는 대표적인 방법은 다음과 같습니다. Windows + PrtScn 전체 화면이 캡처와 함께 저장. Windows + Shift + S를 눌러 캡처 도구를 이용하여 사각형 캡처, 자유형 캡처, 창 캡처, 전체 화면 캡처를 선택할 수 있습니다. 이때 가장 많이 사용되는 건 원하는 부분만 선택하는 사각형 캡처와 특정 창만을 선택하는 창 캡처일 것입니다. 하지만 이 단축키를 이용하여 캡처를 하게 되면 '캡처가 클립보드에 복사됨'이라는 안내가 나올 뿐, 실제로 파일로 저장이 되지 않기 때문에 매번 캡처 도구를 활성화하거나 다른 프로그램에 불..

부모요소에 사용하는 속성들 flex flex는 부모 요소에 사용하면 자식 요소들을 정렬 시켜주는 속성 display: flex; flex-direction 정렬의 방향을 지정하는 flex-direction flex-direction:row; /* (기본값) 자손을 가로로 배치 */ flex-direction:column; /* 자손을 세로로 배치 */ flex-direction:row-reverse; /* 자손을 가로방향으로 순서를 뒤집어 배치 */ flex-direction:column-reverse; /* 자손을 세로방향으로 순서를 뒤집어 배치 */ flex-wrap 줄바꿈 여부를 지정하는 flex-wrap flex-wrap : nowrap; /* (기본값) 줄바꿈 하지않음 */ flex-wrap :..

홈팟이 있는 장소에서 애플 기기를 사용하게 되면, 좀 더 가까이 이동하거나 탭 하여 연결하라는 푸시 알람과 함께 진동이 발생합니다. 이게 음악을 듣거나 홈팟을 사용하게 될 경우엔 분명 매우 편리한 기능인데... 저처럼 책상에 홈팟이 있을 경우 작업을 하다 폰을 들 때마다 팝업창이 떠버리기 때문에, 오히려 매번 매우 불편한 상황이 발생합니다. 이럴 땐 다음과 같은 방법으로 홈팟의 푸시 알람을 끌 수 있습니다. 홈팟 자동 연결 푸시 알람 끄기 1. 홈팟 연결 푸시 알람은 위와 같이 나타납니다. 이 알람을 끄기 위해선 다음 절차를 따릅니다. 2. '설정 > 일반 > AirPlay 및 Handoff'로 이동합니다. 3. HomePod으로 전송을 OFF로 해줍니다.