이글루스 썸네일형 리스트형 Universal X - css grid 처녀작 7월 초부터 조금씩 개발해오던 스킨이다. 사실 웹 개발에 손을 놓은지가 꽤 되어서 감각을 찾고자 개발을 시작하게 되었다. 최종 목표는 워드프레스 테마. 아마도 루리웹 마이피 > 이글루스 > 티스토리 > 워드프레스 순으로 개발하게 될 것 같다. 각설하고, 이번 스킨의 개발 의의는 오랫동안 우려먹을 수 있는 다용도 스킨의 개발이다. 사실 이 스킨에서 처음으로 css grid를 써보았다. 이전에 css grid에 대한 예제를 수도 없이 많이 읽어 보았지만 실전에서 적용해본 것은 이게 처음이다. 이글루스의 경우 매우 구시대 레이아웃을 사용하고 있어서 사방을 둘러보면 fr / clearfix와 같은 클래스 들이 도배가 되어있다. 무식하게 * 셀렉터로 float를 전부 제거하고 전부 css grid로 교채했다. 사.. 더보기 Plain V2 Plain은 Full bleed 스타일 이글루스 스타일이라고 야심차게 내놓은 이글루스 스킨 이었다. 하지만 문제는 내가 적용한 환경 (지정된 글 스타일, 지정된 배치 순서)를 맞추어야지만 구현이 된다는 것을 알게되었다. 스킨을 적용한 사용자가 약 20명 정도 되는데 이 중에 제대로 적용된 사람이 손에 꼽을 정도이다. 이글루스의 경우 스킨을 완전히 새로 설치하지 않을 경우 이전에 사용하던 스킨의 설정을 따라가는 병크를 저지르게 된다. 첫번째 사이드 바를 위쪽으로 강제 고정 후 네비게이션 처럼 사용하게 만들어 놓았는데, 첫번째 사이드 바에 위젯이 제대로 배치가 되지 않은 경우 엉망이 되는 모습을 볼 수 있었다. (이 문제는 새 버전에서도 여전히 존재한다. 나로서는 해결이 불가능한 문제;) Full bleed.. 더보기 Asterisk V2 나름? 이글루스에서 잘 나가는 스킨인 Asterisk의 옆그레이드 버전. 시대에 발 맞추어 컴패스가 제거 되었고 대대적인 코드 정리가 이루어졌다. 이외에도 이전에 스타일이 적용하지 않았던 달력, 아카이브, 태그 클라우드에 대한 스타일이 추가로 적용 되었다. 폰트 어썸 아이콘 폰트가 추가 되었고 많은 요소에 pseudo element로 추가 되었다. 특히 코멘트 난의 경우 대대적인 수술이 이루어졌는데, 작성자 정보 표시는 물론이고 작성난 까지 전부다 css grid를 사용하여 새로 디자인 되었다. 더보기 Hare 4 Egloos 여태까지 만든 이글루스 스킨중에서 제일 잘나가는 Hare의 최신 버전이다. Hare의 경우 이글루스의 막장 정책때문에 반병신 상태의 버전1이 있었고, 이후에 @import 꼼수로 한계를 극복한 V2가 있었다. 이번 V3에서는 이전 버전의 단점을 모두 뛰어넘는 완전한 오버홀을 단행하였다. 기본 아이콘 폰트로 폰트 어썸이 지정되어있지만 cdn의 속도가 영시원 찮은 곳에서 끌어오는 것이라 속도가 좀 더 빠른 jsdelivr로 교체하였다. 이로써 로딩속도가 소폭 개선되었다. 기존의 스킨의 경우 제목 부분의 css 폰트 설정이 cursive로 지정되어 있는데, 한글로 블로그 명을 적용할 경우 여기에 맞는 폰트가 궁서(…)밖에 없어서 궁서로 뜨게 되는 웃지 못할 상황이 발생 하였다. 이 문제를 해결하기 위해 v3 .. 더보기 [WIP] Meltdown Rev.2 이글루스를 시작으로 티스토리 스킨까지 기존에 있는 스킨들을 최신화, 코드 정리, 구조 / 속도 개선 작업을 할 예정이다. (사실 이거 2016년 7월에 했어야 했는데 1년이나 미루어졌다) 첫빠따(?)는 최초로 만든 이글루스 스킨인 Meltdown. 지금 와서 코드를 까보니 완전 개판오분전이다. 내가 이딴 스파게티 코드를 짜고 있었다니... 라고 자괴감이 드는 순간이다. 2014년에 짰던 코드 수준 지금 짜는 코드 수준 주요 변경 사항은 웹폰트 적용, compass 완전히 제거, 속도 개선, 자동 업데이트 기능 추가 등이다. 웹폰트와 rawgit의 속도 때문에 그다지 빠르진 않은 편이지만 일단 css가 케싱 되고 나면 퍼포먼스 상에 딱히 문제는 없어보인다. 어짜피 이글루스 구조도 개판인데 웹폰트 로딩이 개.. 더보기 새로운 셀프고문 방법 - 이글루스 스킨만들기 이글루스 스킨을 만드는 것은 고문과도 같기 때문에 일종의 가학성(?) 행위에 가깝다고 봐도 될듯. 새로만든 스킨. Full bleed layout과 fixed top menu, dropdown menu를 제공한다. 레이아웃 제한 때문에 fixed top menu는 거의 이글루스로 치면 차세대급 기술. 발단은 이렇다. 요즘 웹디자인 트랜드는 Full bleed layout이다. 즉, 텍스트는 읽기 쉬운 너비인 600~700px을 유지하되, 사진은 최대한 크게 뿌려주는 형태의 디자인이다. 미디움도 이러한 형태를 사용하고 있으며, 많은 미니 블로그 시스템들이 이와 유사한 형태의 스타일을 제공한다. Hassle-free Full Bleed with *:not()Breaking out of container DI.. 더보기 이글루스의 디씨 化 벨리란 일종의 카테고리 개념으로 이와 관련된 주제를 쓰면 한대 모아주는 기능이다. 비록 연간 방문자 수는 형편없지만 이글루스가 악착같이 살아남은 것도 바로 이러한 밸리 기능 이번에 이글루스 밸리에 고켓몬이 추가 되었다고 한다. ㅋㅋㅋ... 야! 이거 완전 디씨 겔러리 아니냐! 예전에 윾식머튽이 '공부 잘하려면 어떻게 하나요' 라는 질문에, '공부 갤러리를 만들어 드릴 테니 거기가서 놀면 된다.' 라는 답변을 한게 문득 떠오른다. 티스토리만해도 2013년 대대적인 개편을 하기 전에 카테고리 수가 턱없이 부족해서 전혀 관련 없는 글이 특정 카테고리에 범람하는 웃지 못 할 상황을 봐야 했다. 지금은 많이 나아진 편이지만 여전히 카테고리 세분화는 아쉬운 편. 지금 카카오 하는 짓이나 티스토리 운영하는 것을 보면.. 더보기 이글루스 코드 제한에 딱 맞춘 CSS3 스킨 - Frosty 매번 스킨 만들때마다 느끼는 것이지만 CSS 글자수 제한 어떻게 안되나? 건의 한지가 언젠데 발전이 없는 것을 보면 이글루스 운영진은 티스토리보다 더 노답인듯. 덕분에 만들어 놓은 스타일도 글자수 제한으로 밀어버리고 새로 만드는 병크를 저질렀다. 글자수 제한 때문에 스킨 옵션에서 배경이미지 또는 헤더 이미지 둘중에 하나만 넣을 수 있다. 둘다 넣을 경우 잘린다. 사실 배경 이미지만 넣어도 일부 코드가 잘리지만 위치 설정용 코드만 잘리기 때문에 별 문제는 없다. (position 코드의 경우 전부 오버라이드됨. 헤더는 해당사항 없음.) 특징 CSS3을 사용하여 만들어진 스킨으로 표준 요소와 비표준 요소가 적절히 섞여있어 브라우저마다 다르게 보이는 스팩타클함을 자랑한다. 아마도 2년이내에는 모든 브라우저에서.. 더보기 CSS3의 새로운 효과와 스케치 목업으로 간단한 스킨 만들기 - 이글루스 스킨 Frosty CSS만 작성하면 스킨이 나오는 이글루스로 간단하게 만들어보았다. 제작시간: 약 하루? 어제 반나절 + 오늘 반나절 스케치로 만든 목업이다. 사용후기는 여기를 참고 그냥 평범한 1140 그리드 스킨이다. 딱 보면 느낌 알겠지만 반응형이 아니다. (애초에 지원할 이유도 없음)대신에 실험삼아 요새 핫한(?) CSS3 태그를 써 보았다. Backdrop filter 조니 아이브의 주도 하에 애플 제품군에는 새로운 디자인 언어가 적용되었다. 플렛 디자인이라고 불리는 이것은 기존의 실물을 흉내내던 스큐어모픽과는 달리 형광톤의 컬러와 블러 레이어를 통해 경계를 나누는 방식이다. 이후 iOS와 macOS의 서리낀 유리효과를 표현하고자 수많은 웹개발자들이 삽질에 삽질을 거듭하였다.물론 현재 쓰고 있는 XP1에도 검색창.. 더보기 이글루스 이전 스킨 재정비 티스토리 블로그에서만 배포하던 이글루스 스킨을 스킨 밸리에 업로드 하였다. 기존의 PSD 기반 로고를 CSS3 형태로 변경. 그외 소소한 코드 수정및, compass 코드 삭제 당분간, 특히 이글루스 스킨은 제작 할 일이 없을듯. 더보기 이전 1 2 3 다음
