V 앱(vlive.tv)의 svg 아이콘입니다. 하늘색 배경의 색상 코드는 #54f7ff, 남색 글자의 색상 코드는 #46465a 입니다. svg엔 기본적으로 색상을 넣지 않았으니, 사용하실 때 참고해주세요.

전엔 그냥 "이런 거 만들고 있다!"라고만 쓰느라 제대로 정리 못 했던 걸 이번엔 좀 정리해보려고 합니다. 먼저, 이 사이트를 보며 크롬 익스텐션에 사용 가능한 APi등을 훑어봤습니다. 그리고 정적인 웹사이트를 보여주는 거니 굳이 라이브러리를 쓰지 않고 바닐라 자바스크립트로 작업하는 중입니다.아무래도 새 탭을 조작하는 거다 보니 최대한 빠르게 진행됐으면 좋겠다는 생각이 강하게 들더군요. "background": { "scripts": ["background.js"], "persistent": false} chrome.browserAction.onClicked.addListener(function(){chrome.tabs.create({url:"chrome://newtab"})}); 먼저, 확장 프로그램 ..

뜬금없이 타오르는 창작욕에 만들기 시작한 크롬 확장 프로그램. 구글 API만 잠깐 공부하면, 어차피 html, css, javascript기 때문에 지금까지 그리 어렵진 않았습니다. 별다른 건 아니고 새 탭을 꾸며주는 익스텐션입니다.지금은 검색, 날씨, 간단한 인사(유저 이름은 사용자가 저장), 할 일 목록(to-do list)이 전부지만, 필요한 기능을 차근차근 추가해나갈 예정입니다. 당연하지만 유저 이름과 할 일 목록은 작성과 동시에 저장되며, 새로 고침을 하건, 크롬을 껐다가 켜건 계속 불러옵니다. 할 일 목록에 있는 옵션은 현재 3가지입니다.삭제, 수정, 중요 표시삭제는 말 그대로 항목을 삭제하는 것이고, 수정도 말 그대로 내용을 수정하는 겁니다. 중요한 일정은 목록의 맨 위로 올라오며, 배경 색..

결론부터 간단히 짚고 넘어가자면, transform으로 위치를 옮긴 요소의 자식은 position: fixed를 써도 고정되지 않습니다. https://www.w3.org/TR/css-transforms-1/#transform-rendering 여기서 상세한 설명을 읽으실 수 있습니다. 요소에 배경을 넣으면 글자가 읽기 힘들어져서, 전 보통 이미지의 opacity를 낮추고 배경을 검은색으로 만든 뒤, 글자를 흰색으로 변경합니다. 그때, background-image의 opacity 조절을 위해 새 자식 요소를 만들고, 그 요소의 opacity를 조절합니다. 이번에 드로워의 배경도 똑같이 만들다 문제에 봉착했는데, 드로워를 스크롤 하면 자식 요소에 부여한 position: fixed가 position: a..

아빠 학교도 시험 기간이고, 어버이날도 코 앞이라 조부모님과 함께 간 기장.노동절이라 그런지 사람이 엄청나게 많았다.용암할매횟집이란 곳에서 밥을 먹었는데, 번호표를 뽑고 한참을 기다려야 들어갈 수 있었다. 멸치 무침.이런 멸치는 처음 먹어보는데, 끝 맛이 생각보다 비렸다. 멸치구이.별생각 없이 머리도 한 번 먹어봤는데, 생각보다 괜찮았지만, 어두육미는 공감을 못 하겠다.당연하지만 생명체의 눈알도 처음 먹어본 건데, 식감은 생각보다 말랑말랑했다. 멸치보다 김치가 더 맛있는 탕이다.밥 비벼 먹으면 그만한 게 또 없다. 여담이지만, 멸치가 이렇게 많으니 멸치잡이 배도 있을 거고, 그럼 당연히 갈매기도 있을 줄 알았는데, 5월이라 그런지 갈매기는 얼마 되질 않았다. 아래는 해운대에 있는 비비비당이란 전통 찻집 ..

떠돌이 상인은 마을에만 스폰되는 줄 알았더니, 그게 아닌가 봅니다. 나무 집 지으니까 그 주변에 계속 스폰되는 걸 보면, NPC 집으로 인식되는 집(문 안에 침대) 근처에 랜덤 스폰인가 보네요. 새로 짓기 시작한 집 지상에 새로 지은 집입니다. 이 주변에 이런저런 건물들 추가해서 그냥 이 주변 전체를 하나의 마을로 만들어볼 생각입니다. 새로 추가된 종도 마을에 놓고 싶어서, 로켓 든든하게 챙기고 모험을 시작했습니다. 잘 쓰고 있긴 하지만, 아무리 생각해도 셜커 상자나 겉날개는 과하게 좋은 아이템이 아닌가 싶네요..ㅋㅋㅋ 엔더상자랑 합치면 한 번에 들고 다닐 수 있는 용량이 엄청나게 커지는 셜커 상자. 크리에이티브에서 날아다니는 속도보다 빠르게 날 수 있는 겉날개. 물론 둘 다 엔더 드래곤을 잡고 엔더 유..

출처 : 위키피디아 Parallax Scroll(패럴렉스 스크롤)은 위 움짤처럼 페이지를 스크롤 할 때 페이지와 배경 이미지 간 시차를 만들어서 움직이는듯한 느낌을 주는 것을 일컫습니다. 웹 페이지에 적용하기 위해 간단한 스크립트를 제작해봤습니다. 라이브 데모 & 설명서 : https://marshall-ku.github.io/Parallax-Scroll/깃허브 : https://github.com/marshall-ku/Parallax-Scroll 일전에 소개한 모바일 기기에서 background-attachment:fixed를 사용하는 방법(링크)와 함께 사용해, 모바일에서도 PC와 똑같이 동작하도록 했습니다. 위 사진처럼 요소의 크기를 class 하나로 변경하실 수 있고, 이미지의 추가나 이미지에 타..

가끔 스크린 샷만 찍고 올리질 않아서 이제 왜 찍었는지 생각도 안 나는 스크린 샷도 있네요 ㅋㅋㅋ;; 엔더 포탈이 고장 나서 엔더 드래곤을 한 번 더 잡았습니다. 포탈에 들어가면 tp만 계속되며 어두운 공간에 갇혀버리더라고요. 엔더 진주 몇 개 있던 거로 밖에 집어 던지며 탈출했기에 망정이지, 맵 지워야 할 뻔했습니다. 판다를 납치해왔습니다. 대나무는 사탕수수와 비교도 안 되게 잘 자라네요. 위에서 언급한 왜 찍었는지 모르겠는 스크린 샷 1입니다. 분명 뭔가 이유가 있었을 텐데... 죽순을 아무리 줘도 교배를 안 하길래 확인해보니 주변에 일정 수 이상 대나무가 있어야 교배를 하더군요. 열심히 교배하다 보니 갈색 새끼도 태어나네요. 가스트의 공격에 깨지지 않는 길을 만들기 위해 코블스톤을 제거하고 프리즈머..

이번 BE 1.11.0 업데이트와 함께 추가된 나쁜 징조(bad_omen) 디버프가 꽤 재밌어 보여 한 번 해봤습니다. 관련 도전과제가 4개 추가되었습니다. Sound the Alarm! - 경보 발동!I've got a bad feeling about this - 안 좋은 예감We're being attacked! - 공격당한다!Kill the Beast! - 야수 처치! 레이드를 모두 마쳐도 Sound the Alarm!은 완료되지 않더군요;;혹시 몰라서 웨이브 올 때마다 종 열심히 때렸는데도요...ㅠㅠ 원래 하던 맵에서 진행하려 했으나, Sound the Alarm! 도전과제 때문에 맵을 새로 만들었습니다.제가 플레이 중인 맵은 이미 너무 넓은 지역을 탐사했고, 이미 탐험한 청크는 업데이트되지 않으..