IE Not Supported
190603 티스토리 스킨 #12 제작일지
190603 티스토리 스킨 #12 제작일지

제일 큰 변화입니다. css 변수를 사용하다, 간단하게 스킨 설정에서 테마를 변경할 수 있도록 html의 class를 건드려서 테마가 변경되도록 했습니다. .element {color:#fff}.theme-something {color:#000} 뭐 이런 방식을 사용했는데, 이 방식을 사용하니 테마 하나 추가하자니 수정할 css가 산더미라 새로운 방식을 사용하게 됐습니다. 테마를 변경하면 html에 선언해둔 변수들의 내용만 달라지며, css는 이 포스트에 작성했던 방식처럼 한 줄만 써두면 됩니다. 모바일에서 imgur 이미지를 첨부하려니 힘들더라고요.그냥 imgur의 링크를 첨부하면 알아서 이미지로 변환해서 보여주도록 했습니다. 다음 페이지를 로딩할 때 나오는 이미지를 이 포스트에 작성한 이미지로 변경했..

마인크래프트 피스톤 관측기 무한 회로화 방지하기
마인크래프트 피스톤 관측기 무한 회로화 방지하기

외국에선 Observer Stabilizer라고 부르던데, 한국어론 검색하니 나오는 결과가 없다시피 해서 뭐라 불러야 할지 모르겠네요. 자동 켈프 농장이나 자동 호박 / 수박 농장 등을 만들려면, 옵저버가 바라보고 있는 블록을 피스톤으로 밀어 없앨 필요가 있는데, 피스톤이 지나가는 것도 블록 업데이트에 해당하니 피스톤이 한 번 지나가는 순간 무한회로가 돼버립니다.옵저버가 바라보는 블록을 피스톤으로 없애도 무한회로가 되지 않게 하는 장치가 옵저버 안정화 장치입니다. 일반적인 옵저버 안정화 장치는 너비를 1칸 초과로 - 보통 3칸 - 차지하는데, 농장을 만들 때 굉장히 불편해서 너비 1칸짜리 옵저버 안정화 장치를 만들었습니다. 들어가기에 앞서, 일반적인 옵저버 안정화 장치는 아래와 같이 만듭니다. 레드스톤 ..

트와이스 로더 svg
트와이스 로더 svg

들어가기에 앞서, 로더란 로딩 중에 나타나는 이미지를 말합니다. loading.io 등의 사이트에서 받을 수 있는 이미지가 그 예시겠네요. 적재적소에 활용하면 로딩 중이란 걸 가장 직관적으로 나타낼 수 있습니다. 기본적으로 흔히 사용하는 돌아가는 원과 트와이스 로고를 활용해 만들었습니다. 원 하나가 로고를 감싸고 빙빙 도는 방식입니다. 원의 색상은 트와이스 공식 색상 두 가지가 계속 반복되도록 해뒀습니다. 로고를 조금 더 작게 만든 2번째 버전입니다. 로고에 애니메이션을 추가한 3번째 버전입니다.

티스토리 반응형 스킨 #13 Kiss Me
티스토리 반응형 스킨 #13 Kiss Me

주소 : https://kissme2145.tistory.com/ 아래 이미지들은 제 테스트 블로그에서 찍은 스크린샷입니다. 세분화된 색상 설정으로 간단하게 색상을 변경할 수 있습니다. 커버 화면의 모습입니다. - 썸네일을 작게 4개씩 보여주는 리스트- 썸네일을 1:1 비로 보여주는 리스트- 배경에 썸네일이 들어간 리스트- 갤러리형 리스트 총 4가지로 구성되어 있습니다. 좌측 드로워엔 - 관리자 프로필- 구독, 이웃 추가, RSS 링크- 링크 목록- 방문자 수- 티스토리 메뉴바 로 구성되어 있고 우측 드로워엔 - 홈, 방명록, 공지사항 바로 가기- 카테고리 목록- 최근 글- 최근 댓글 로 구성되어 있습니다. 각 드로워의 배경엔 이미지가 3개씩 슬라이드쇼로 표시됩니다. 글 목록에선 썸네일을 1:1 비로 보..

[자바스크립트] 헥스 색상 rgba로 변경하기
[자바스크립트] 헥스 색상 rgba로 변경하기

#fff같은 헥스 색상을 rgba(255,255,255,1)처럼 rgba로 변경하는 스크립트입니다. toRgba = (hex, opacity) => { let value = hex.replace("#",""); value.length === 3 && ( value = value.charAt(0) + value.charAt(0) + value.charAt(1) + value.charAt(1) + value.charAt(2) + value.charAt(2) ), value = value.match(/[a-f\d]{2}/gi), (opacity === undefined || opacity > 1) && (opacity = 1) return `rgba(${parseInt(value[0],16)},${parseI..

190530 티스토리 스킨 제작일지
190530 티스토리 스킨 제작일지

BGM 플레이어 비디오를 클릭하면 비디오를 전체 화면으로 보여줍니다.다시 한 번 클릭하면 전체 화면이 취소됩니다. 키보드 이벤트도 추가했습니다.O - 랜덤 영상 재생P - 비디오 일시 정지 / 재생[ - 볼륨 업] - 볼륨 다운 새 글 알림 변경 기존엔 Masonry 리스트에서만 1px짜리 테두리로 새 글을 표시했는데, 이젠 모든 리스트에서 딸기로 새 글을 표시합니다. 자동 다크 모드 오후 6시부터 오전 7시까지 자동으로 블로그에 다크 모드가 적용됩니다.

[마인크래프트 BE] 서버원들과 생존기 2 - 6
[마인크래프트 BE] 서버원들과 생존기 2 - 6

이제 또 슬슬 질려가네요 ㅋㅋㅋ 신호기까지 설치하고 열심히 광질 중입니다.사암 블럭 수요를 예상해보니, 솔직히 이 맵 삭제하기 전에 절대 완성 못 할 것 같습니다. 만들고 스크린샷 보니 오른쪽 끝이 좀 어색하길래 손봤습니다. 창고 상자 개수가 부족해져서 반대편도 전부 상자로 도배했습니다. 왼쪽 구석에 있는 쓰레기통은 이제 아래에 호퍼 마인카트가 아래 호퍼 4개에 전달해주는 방식으로 바꿔서, 덫 상자 대신 일반 상자로 교체했습니다. 집 옆에 있던 좀비 스포너를 사용해 크게 쓸모는 없지만 썩은 고기 생성기를 만들었습니다.스켈레톤 스포너였으면 좋았을 텐데 정말 아쉽네요 ㅠㅠ 회수된 아이템은 이렇게 아이템 자동 분류기로 들어오게 됩니다.나중에 슬라임 농장이며 뭐며 만들면 이 회로들 겹칠까봐 벌써 머리가 좀 아프..

티스토리 이미지 새 탭에서 열기
티스토리 이미지 새 탭에서 열기

위 사진처럼 클릭했을 때 이미지를 새 탭에서 열어줍니다.티스토리의 플러그인처럼 특정 크기 이상인 이미지에만 적용되지 않고 모든 이미지에 적용됩니다. 블로그에 우클릭을 막아뒀지만, 이미지의 다운로드를 막으려는 건 아닐 때도 쓸 수 있고, 다양한 경우에 쓸 수 있습니다. Vanilla JSArray.from(document.querySelectorAll(".imageblock>img")).forEach(a => { // 첨부파일 선택 방지 const d = document.createElement("a"), // 새 a 태그 생성 c = a.parentNode.parentNode; // .imageblock 부모인 p d.href = `${a.src}?original`, a.removeAttribute("o..

190527 크롬 확장프로그램 [트와이스 새 탭] 제작일지
190527 크롬 확장프로그램 [트와이스 새 탭] 제작일지

스토어 링크 업데이트할 기능이 딱히 없어서 고민하다 꽤 괜찮은 기능이 생각나서 업데이트하는 중입니다.아직 완성된 단계는 아니라서 실제 업데이트까진 시간이 좀 걸릴 것 같습니다. 바로 Focus Timer입니다.시간을 좀 더 알차게 쓰기 위해 집중할 시간을 정해놓는 기능입니다. 당장 박터지게 공부하는 고등학생 수업시간도 50분이고, 성인이 집중할 수 있는 시간도 글마다 다른데 보통 20분 ~ 30분 사이길래 굳이 시간은 넣지 않고 분만 넣었습니다. 설정한 시간이 얼마나 남았는지 시각적으로 보여줘서 더욱 집중력을 올릴 수 있도록 했습니다. 페이지를 새로 고침해도 해당 레이어는 자동으로 켜집니다. 집중하는 시간 동안에는 유튜브 등의 사이트 접속을 차단합니다.사실 이 기능 때문에 만들었다 해도 과언이 아니죠. ..

스킨/스킨 목록
잡담
갤러리