V 앱 svg 아이콘

V 앱 svg 아이콘

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

190511 크롬 확장 프로그램 제작 일지

전엔 그냥 "이런 거 만들고 있다!"라고만 쓰느라 제대로 정리 못 했던 걸 이번엔 좀 정리해보려고 합니다. 먼저, 이 사이트를 보며 크롬 익스텐션에 사용 가능한 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가지입니다.삭제, 수정, 중요 표시삭제는 말 그대로 항목을 삭제하는 것이고, 수정도 말 그대로 내용을 수정하는 겁니다. 중요한 일정은 목록의 맨 위로 올라오며, 배경 색..
position:fixed와 transform

position:fixed와 transform

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

190501 기장 대변

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

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

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

Parallax Scroll 플러그인

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

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

가끔 스크린 샷만 찍고 올리질 않아서 이제 왜 찍었는지 생각도 안 나는 스크린 샷도 있네요 ㅋㅋㅋ;; 엔더 포탈이 고장 나서 엔더 드래곤을 한 번 더 잡았습니다.포탈에 들어가면 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! 도전과제 때문에 맵을 새로 만들었습니다.제가 플레이 중인 맵은 이미 너무 넓은 지역을 탐사했고, 이미 탐험한 청크는 업데이트되지 않으..
1 2 3 4 5 6 7 ··· 33