레이아웃 썸네일형 리스트형 티스토리 배포용 스킨 티저 - EP1 티스토리에서 지원하는 모든 기능과 호환되는 나름 최초?의 스킨 - 툴바 지원- 플러그인 지원- 티에디션 지원- 테터데스크 지원- CSS Grid 베이스- 골-든시불장™ 레이아웃 엔진 더보기 티스토리 카테고리별 스킨 - 풀 스크린 레이아웃 car 카테고리에 적용되는 스킨이며, 사진과 슬라이더, 유투브 영상이 화면에 100% 꽉차게 표시 됩니다. 사진의 크기가 1920보다 작을 경우에는 원래 크기대로 뜹니다. 비디오는 flex-video 옵션을 적용했을시에만 적용 됩니다. 기본적으로 저화질 영상에는 flex-video가 적용이 되지 않습니다. 특정 게시글에는 상단 베너이미지도 바뀝니다. 더보기 Life is a Journey 스킨 제작 후기 + 디자인 사설 요즘 대세는 플랫 제가 만든 1번째 스킨인 Congnocenti가 플랫도 아니고 그런지도 아니고 어정쩡했었고, 2번째 스킨인 TA는 부트스트랩2 기반으로 세미 플랫한 스타일을 가졌었습니다. 3번째 스킨인 프로토타입은 파운데이션 기반으로 스큐어모픽 틱한 디자인을 구현했었죠. 다중 레이어와 그림자 사용으로 거의 3D 가까운 모습을 보여줬었습니다. 11월에 만든 스킨인데 계속 쓰려고 했지만 막상 안 쓰는 기능을 좀 빼고 코드를 정리하려고하니 너무 마크업이 개판이라서 그냥 새로 만드는 방향으로 가게 되었습니다. 스킨을 새로 만들면서 계획했던것은 요즘 유행하는 완전 ‘플랫 스타일을 구현하자’ 였습니다. 그래서 주요 디자인 키워드는 flat&simple 이었습니다. 하지만 중간 중간에 그림자 요소를 넣어서 너무 지.. 더보기 블로그 메인에 Masonry 레이아웃을 도입했습니다. 블로그 메인화면 속도향상을 위해서 작은 이미지로 대체하는 대신에 한번에 더 많은 글을 불러오게 만들었습니다. 티에디션에 스타일 설정하는 방법이 워낙 까다로워서 애를 먹긴 했지만 그런데로 볼만한것 같네요. 레이아웃 기반은 Masonry(http://masonry.desandro.com/)이며, 제이쿼리를 쓰지 않고 순수 css와 data-attribute만으로 구현 했습니다. 이미지를 원본이 아니라 압축되고 작은 이미지를 불러오니 메인 로딩속도는 오히려 줄었습니다. ㅎㅎ 더보기 스킨 업데이트 Ver.2.7 Ver.1이 7월말이었는데 벌써 Ver.2.7 까지 왔습니다. 주요 업데이트 사항을 살펴보도록 하겠습니다. 검색페이지를 완전히 바꿨습니다. 기존의 9칼럼, 3칼럼 조합 대신에 2+2칼럼, 8칼럼 구조로 바꾸었습니다. 게시글 같은 경우, 제가 올리는 모든 게시글이 미리 보기 사진이 있다는 점에 착안하여 masonry 방식의 겔러리를 도입했습니다. 일반 포스팅에서는 3단형 카테고리로 제가 직접 코드를 짜서 만든 것을 사용하고 있지만 검색페이지에서는 티스토리 일반 카테고리를 사용하실수 있습니다. 카테고리 위쪽에는 AddThis에서 제공하는 인기글 뷰어를 설치했습니다. 갤러리 뷰 위쪽에는 티스토리 검색창이 있지만 현재 알 수 없는 이유로 검색이 제대로 작동하지 않고 있습니다. 빠른시일내에 수정할 계획입니다.하단.. 더보기 스킨 업데이트 v2.5 - 반응형 레이아웃을 도입했습니다. 반응형(Responsive) 레이아웃.... 제가 처음 티스토리로 이주하면서 가장해보고 싶던 것중 하나였죠. 반응형 레이아웃이란? N스크린 시대가 도래하면서 각 기기에 맞게 모바일 사이트 PC용 사이트등을 만들 필요없이 사이트 하나만으로 모든 기기를 커버하는 개념이 반응형 레이아웃 입니다. 반응형 스킨의 장점은 모바일과 PC간의 웹페이지를 공유함으로서 운용에 편리함과 디자인의 일관성을 가질 수 있습니다. 게다가 해상도가 천차만별인 PC도 해상도에 맞는 화면을 제공하여 특정부분이 잘린다던가 하는 문제를 해소할 수 있죠. 요즘 대부분의 유명 "해외" 웹사이트들은 모두 반응형 웹을 지원합니다. 국내야 워낙 웹표준 준수도 느리고 하여 실생활에서는 별로 찾아볼 곳이 없긴합니다. 블로그는 초창기에는 html5기반이.. 더보기 이전 1 다음
