본문 바로가기

부트스트랩

내가 부트스트랩을 쓰지 않는 이유 여태 까지 여러 종류의 블로그 스킨을 만들어 왔지만 부트스트랩은 단 한번 밖에 쓰지 않았다. 사실 처음에 부트스트랩을 접하게 된것은 거의 모든 해외 웹 디자인 사이트에서 연일 부트스트랩 타령을 하고 있었기 때문이다. 뭐가 그리 대단 한것인지 궁금해서 한번 써보았더니 미리 만들어놓은 요소를 사용한다는게 꽤 편했던 기억이 있다. 그러나 그 이후에 스킨을 만들면서 12개 정도 부트스트랩 이외의 프레임 웍을 써보았다. 그랬더니 가장 만족도가 낮았던 프레임 웍은 부트스트랩이었다. 첫번째. 沒개성 부트스트랩은 GitHub를 통해서 거의 유행처럼 번져나가게 되었다. 디자인 능력이 떨어지는 웹개발자들이 디자인 고민 필요 없이도 쉽게 프로토타입을 제작할 수 있다는 점에 있어 부트스트랩은 상당히 편한 도구이다. 그러나 부.. 더보기
트위터 인터페이스가 싹 바뀌었습니다. 요즘 대세인 플랫에 맞추어서 싹 새로 개편을 했군요!이전에 미국 계정으로 접속시 플랫 인터페이스를 간간히 만나 볼수 있었지만 갑자기 그것도 안되더니 이제는 한국 계정에서도 문제 없이 플랫으로 나오네요 ㅎㅎ이거 전부다 플랫 ~ 플랫~ 하니까 저도 다시 스큐어모픽에서 플랫으로 가고 싶은 욕구가...잉여 잉여 하신분들은 저 팔로우 하셔도 됩니다. 하하 → @Est0que 더보기
TechAesthetic - 반응형 티스토리 스킨 13년 08.07~ 11/12까지 사용하였던 티스토리 스킨을 다른 티스토리 블로그에도 적용이 가능하게 바꿔서 공개합니다. 초기버전을 올릴까... 라는 생각도 해보았지만 코드도 지저분하고, 반응형도 아니라서 가장 마지막 버전이었던 2.8을 개정해 3으로 업그레이드 하였습니다. 작년 7월 하반기에 작업에 들어가서 약 일주일만에 만들어낸 스킨입니다. 물론 그 이후로 오랜시간동안 수 많은 개선작업을 거쳐와서 현재의 완성도를 가지게 되었습니다. 초창기에는 배경색도 존재하고 그림자도 여러군대 쓰인 모습이었지만 버전업을 거치면서 점점 플랫한 스타일로 바꾸어 나갔습니다. -> 스킨업데이트 내역 기본 바탕이 된 프레임웍은 부트스트랩 2.3.2이며 부트스트랩 2.x버전을 사용했기 때문에 IE7이상의 브라우저에 모두 호환이.. 더보기
Prototype 스킨 제작 후기 초기에 블로그를 오픈할때 사용하였던 Cognoscenti 스킨은 제가 직접 하드 코딩을 하긴 했지만 여러가지 삐걱거림과 알 수없는 문제들에 시달렸습니다. 속도면에서는 일반 티스토리 스킨에 비해서 이미지를 거의 쓰지 않았기 떄문에 빨랐지만 코딩능력의 부족으로 꽤 볼품 없는 스킨 인것은 부정할수 없습니다. 스킨 제작을 위해서 열심히 구글링과 공부를 하다보니 프레임웍이라는 것을 알게 되었습니다. 기본적으로 사이트에서 사용되는 요소들을 미리 만들어 놓고 이를 활용하여 편하게 웹페이지를 제작할수 있게 하는 도구 입니다. 그래서 무슨 프레임 웍을 쓸까 알아보던중 선택한 것이 부트스트랩 이었습니다. 물론 여러가지 프레임 웍이 웹상에 있지만 부트스트랩으로 만들어진 트위터와 GitHub를 보면서 "그래도 많이 쓰는게 좋.. 더보기
스킨 마이너 업데이트 V 2.8 요소간의 간격을 줄여서 스크롤바의 길이를 축소하고 한화면에서 되도록이면 많은 내용이 보일수 있도록 수정했습니다. 평균적으로 모든 요소의 margin을 10이상 덜어 냈습니다. 세부적으로 변경사항을 살펴보자면...카테고리 다른글의 테두리를 없애고, 다음뷰와 믹시 위젯의 길이차를 보완하고 카테고리 다른글과 더 자연스럽게 보일수 있도록 했습니다. 아래 다음뷰 최신글과 인기글 위젯의 색상을 변경, 눈에 잘띄게 바꾸었습니다. 작자 소개 부분도 크기를 줄이고 쓸데없는 플립 애니메이션 삭제, 크기 감소 타이포 수정을 가했습니다. 아래에 있던 소셜도구와 작자 소개를 통합시켰습니다. 태그 부분도 대폭수정했습니다. 1줄을 넘어가지 않으면 옆으로 밀려나가는 현상을 없앴습니다. 거대한 말풍선형태의 공유버튼을 알약형태로 변경했.. 더보기
Bootstrap CDN 코드 딜리버리 네트워크 (CDN) 이란 구글과 같은 거대 서버에 저장을 하여서 페이지 요소를 빨리 불러들일수 있게 하는 것입니다. 찾아보니 부트스트랩 3.0.1부터 CDN지원을 하는군요. 3.0.1로 갈아타고 싶은 마음이 굴뚝같지만 IE7 지원이 끊어졌고 (아직 대한민국 점유율은 어마어마 합니다. 는 핑계고 CSS3로 도배해서 IE 지원은 갖다버린 막장블로그) 코드를 바꿔야 할게 많아서 계속 미루고 있습니다. (네, 맞아요 사실 귀찮아서 그래요) cdn은 이 사이트에서 설치 할수 있습니다.http://www.bootstrapcdn.com/ 더보기
스킨 업데이트 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기반이.. 더보기
스킨 제작 스타트 야매스킨 설계도.jpg 포스팅 할거리는 많이 생각 해두었지만 실제로 생산해 낼 여력이 안되어 허덕이고 있습니다. ㅠㅠ 이런거라도 올려야 글 올릴 명분이 생길 것 같아서 올린다고 생각하시면 됩니다. 스킨 제작 과정은 체계없는 100% 야매이며 제가 올리고 싶을때 올라옵니다. 제작 사유는 블로그가 느려터져서 수리 좀 해보려다가 워낙 발로 코딩을 해놓아서 건드리다 더 심각해질거 같아서 깨끗하게 포기하고 새 스킨 작업 들어갑니다. 요번에는 부트 스트랩을 사용하여 반응형 웹사이트를 구현할 예정인데 (티스토리의 엿같은 모바일 패이지는 날려버릴 계획) 부트스트랩은 처음 사용하다보니 머리가 슬슬 아파오네요 -_-) 이번 목표는 최대한 가볍게 입니다. 그리고 급진적인 레이아웃을 포기하고 평범하게 2단 구조로 갑니다. 너.. 더보기

티스토리툴바