demun(대문블로그)

티스토리/스킨변경제작이력2014. 5. 14. 07:00

요즘 반응형 스킨을 제작하고 있는데 시간이 너무 걸려서 근황을 소개하려고 글을 작성합니다.이번에 제작하는 반응형 스킨은 부트스트랩을 포함하지 않습니다.그래서 ie까지 모두 지원하는 스킨을 만들고 있습니다. 1단,2단3단 레이아웃 모두 만들고, 여러가지 컬러셋을 적용하는 버젼을 모두 만듭니다.거기에다가 각종 플러그인이 장착이 된 버젼까지 전부 따로 따로 만듭니다. 그러다보니 각각의 파일과 레이아웃, 컬러셋마다의 분리가 필요하고 관리가 엄청 납니다.만들다보니 거의 프로젝트 수준입니다. 여기에 Grunt 를 적용해서 좀더 완성적으로 만들려고 익히면서 만들고 있습니다.현재 그런트에 들어가는 플러그인은 7개 정도인데 targethtml, handlebars 정도가 더 들어갈수도 있을거 같네요.이제 세네개 컬러셋을..

퍼블리셔/도구2014. 3. 26. 07:00

반응형으로 검색을 하다가 좋은 프레임웍이 있어 소개합니다. 바로 320 and Up 입니다. 장점은 뭐냐? 1. 미디어쿼리: 480,600,768,992,1382 등에 맞쳐 미디어쿼리를 만들어놓았습니다. 2. 컬러, texture, 타이포그래피 등을 레이아웃과 분리하여 작성하여 두었습니다. 3. 부트스트랩의 버튼, 폼, 테이블 스타일을 사용할 수 있습니다. 4. Modernizr, Selectivizr 과 responsive type tester 그리고 design tester 등을 사용할수 있도록 했습니다. 5. Less 와 Sass 를 사용할 수 있습니다. 다운로드해서 index.html 을 보면 HTML5 Boilerplate 를 사용한것을 볼 수 있습니다. 그리드 시스템은 frameless 를 사..

Design2014. 1. 29. 23:31

AdobeEdgeReflowCC 는 반응형에 최적화된 툴이라고 보시면 됩니다.반응형으로 웹페이지를 제작하는데 있어 AdobeEdgeReflowCC는 마우스로 비교적 간단이 웹페이지를 만들수 있게 해주는 툴입니다. AdobeEdgeReflowCC 의 좋은점중 하나가 포토샵의 전용파일인 psd 파일을 불러올수 있다는 점입니다.여기에는 몇가지 조건이 있는데요. 하나 하나 알아보겠습니다. 먼저 포토샵에서 작업하던 psd 를 열어서 Edge Reflow 프로젝트를 생성합니다.조건 1. 최신버젼인 14.2 여햐 합니다. 포토샵에서 파일 - 생성 - Edge Reflow 프로젝트 생성을 클릭합니다.psd의 이름이 프로젝트의 이름이 됩니다.제가 연 psd 의 이름은 Homepage.psd 입니다. 이제 AdobeEdg..

티스토리/스킨변경제작이력2013. 1. 6. 11:00

이글은 Responsive 스킨을 만든후 하나 하나 업데이트 하는 과정과 수정 사항을 올리기 위한 글입니다.이글은 업데이트 될때마다, 그리고 문제점을 하나 하나 해결해 나갈때마다 목록을 추가합니다. 정말 많은 이슈가 있어 어려움이 많습니다.티스토리 스킨을 반응형으로 제작한다는것은 매우 어려운 일이군요.여기에 예상치못한 어려움은 배경색입니다. 어두운 컬러셋으로 작업을 했는데 티스토리에 추가되는 플러그인들이 전부 흰색 배경을 지원하고, 수정또한 어렵습니다.플러그인 자체가 외부에서 들어오느 자바스크립트라 스타일로 작업이 되는것이 있고, 안되는것은 자바스크립트로 스타일을 지정해줘야 합니다. 1. 사이드바 프로필 레이어.사이드바의 스타일과 비슷하게 작업. 2. 글박스 - 서식중에서 글박스 스타일.글색상을 #333..

티스토리/스킨변경제작이력2012. 12. 13. 09:00

부트스트랩 프레임워크를 활용해서 버젼3까지 제작하고 이번에는 Responsiv 라는 이름으로 반응형 티스토리 스킨을 제작해보았습니다.부트스트랩이 그리드 시스템을 지원하니 어지간하면 따로 미디어쿼리를 제작하지 않아도 반응형으로 작동합니다.허나 티스토리 자체의 요소가 있기에 전혀 손을 안되고는 안되더군요. 현제 제 블로그 스킨은 Responsive 입니다. 2012.12.10 현재. 주요 사항이 배경을 rgba 를 사용해서 보일듯 말듯 스타일을 처리했습니다.그러다보니 RGBA를 지원하지 않는 IE8 이하에서는 조금 스타일이 다릅니다. 뭐 굳이 Ie8이 지원하지 않는 RGBA 라던가 border-radius 등은 따로 처리하지 않았습니다. ie9이상에서는 무리없이 보여집니다. 중요한것은 반응형 responsi..