안녕하세요. 티스토리 파비콘 설정에 대하여 알아보겠습니다. 파비콘. 웹 디자이너가 아니라면 다소 생소할 수 있는 이름입니다. 즐겨찾기와 아이콘의 합성어로 브라우저의 즐겨찾기, 주소창, 탭 등 은근히 많은 곳에 쓰이는 아이콘입니다. 아래의 이미지를 보시면 각 탭의 사이트마다 다른 디자인의 파비콘이 있는 것을 확인하실 수 있습니다. 이렇게 각각의 사이트에 파비콘이 있듯이 티스토리 개인 블로그에도 나만의 파비콘을 갖고 있다면 훨씬 전문적이며 본격적이고 좋아보일 겁니다. 기본적으로 티스토리는 블로그의 파비콘을 설정하지 않았다면 티스토리 파비콘이 뜰 것입니다. (네 번째 T 도트 아이콘) 하지만, 우리는 더 애착을 갖고 관리를 하고 싶기 때문에 파비콘을 설정하겠습니다. 포토샵을 이용하겠습니다. 파비콘은 브라우저의..
확장팩, 아이템 팩 필요 없습니다. 흘러간 시절 가스등 아이템을 베이스로 제작하였습니다. Boy With Lov 네온사인 폴리곤은 다음과 같습니다. LOD 0 (High) Vertices: 11673/Polygons: 11236 LOD 1 (Medium) Vertices: 9478/Polygons: 9054 Shadow LOD 0 (High) Vertices: 16/Polygons: 18 Shadow LOD 1 (Medium) Vertices: 16/Polygons: 18 Make It Right 가사 네온사인 폴리곤은 다음과 같습니다. LOD 0 (High) Vertices: 14825/Polygons: 17890 LOD 1 (Medium) Vertices: 14825/Polygons: 17890 Sh..
hover효과이기 때문에 모든 스타일 속성(서서히 나타났다 서서히 사라지는 속성)을 hover에 주면 된다고 생각했었습니다. 하지만 마우스가 빠졌을 때에도 부드럽게 사라지도록 만들기 위해서는 기본적인 상태에도 트랜지션을 줘야 한다는 것을 알았습니다. 만약 기본적인 상태의 div에 트랜지션을 주지 않았다면, hover시 서서히 변했을 테지만 마우스를 이미지에서 빼면 갑자기 원래 배경 이미지로 확 변하는 것을 볼 수 있을 겁니다. 이것은 멋도 없고 오래된 방식으로 보기 좋지 않겠지요. See the Pen hover alpha by kindkimyoung (@kindkimyoung) on CodePen. 주석에도 적었지만, div class를 여러개 만들기 싫어서 div에 인라인 스타일로 직접 배경 이미지를..
확장팩, 아이템 팩 필요 없습니다. 넝쿨 2칸은 전통적인 창가 화분 아이템을 베이스로 만들었습니다. 넝쿨 1칸 두개와 일자형 까지 홀리데이 벽장식 아이템이 필요합니다. 2칸 넝쿨은 313폴리, 1칸 기본 사이즈 두 개는 173 폴리, 일자형은 23 폴리입니다. 네 가지 타입에 네 개의 컬러를 준비했습니다. (4x4) 정글 어드벤처가 있으시다면 넝쿨 아이템이 있겠지만, 저를 포함해 정글 어드벤처가 없으신 분들께 유용할 수 있겠다고 생각되어 만들었습니다. 아래에서 위쪽으로 뻗어나가는 넝쿨입니다. 하얀 타일 외벽에 매칭 했지만 붉은 벽돌과도 예쁘게 사용할 수 있을 것입니다. 기본적으로 치트를 사용하지 않고도 예쁘게 붙도록 만들고 싶었습니다. 하지만 다소 빈 부분이 보이고 티가 나기 때문에 치트를 사용하여 여러..
메뉴 텍스트에 마우스를 over 했을 때 밑줄이 있길 바라는 작업지시서를 받았습니다. hover 밑줄 이펙트는 검색하면 어디에든 많이 나오긴 합니다. 찬찬히 둘러보면서 어느 위치에 어떤 속성을 줄지 찾고 적용해보는 것이 가장 어려운 것 같습니다. 카페 24 솔루션을 사용하기 때문에 기존의 소스에 수정을 가하느라 적절한 위치를 찾는데 오래 걸렸지만 이것을 최대한 간소화 해보니 복잡할것이 없었습니다. 작업 당시에는 a태그 안의 요소들의 크기로만 보이는 밑줄에 여기 저기 속성의 위치를 옮겨보며 허둥댔지만, 카페 24의 불필요한 div들을 간소화하다 보니 확실히 눈에 보이는 것이 있었습니다. 요컨대 복잡하게 div의 위치를 찾을 것이 아니라 밑줄의 가로 크기가 a 태그 안의 요소 크기보다 크거나 작게 정해진 만..