본문 바로가기

Works/Blog Skin

Meltdown 이글루스 스킨 v2 업데이트 내역 거의 완성되었습니다. 자잘하게 수정해야 될부분은 있는데 크게 문제시 되진 않고요, 일부 이글루스 기본 스타일 요소가 어느정도 남아있긴하지만 더 이상은 손 안댈 생각입니다. 관리페이지에서 보면 사이드바가 옆말고도 본문의 상단과 하단에 추가 되었습니다. 와이드 위젯은 상단이나 하단만 쓸수 잇는 병신력 충만한 이글루스 구조때문에 이렇게 만들었습니다. 우선 변경사항부터 알아보겠습니다. 사이드바에 최상단 로고가 이미지 파일로 바뀌었습니다. 기존의 로고는 CSS3 transform속성인 screw를 사용해서 기울인 글자를 구현했지만 이게 브라우저나 운영체제를 심하게 타서 이미지 파일로 교체하였습니다. 기본이미지 크기는 가로 780px이미지 이며 레티나 디스플레이를 위해서 @2x형식으로 축소시켜서 사용중입니다. 그 .. 더보기
Burarikun - 루리웹 마이피용 CSS3 스타일 제가 이전에 만들었던 마이피용 CSS3 스타일 입니다. 딱히 베포를 고려하고 만든건 아닌데, 막상 마이피 활성화시켜 놓고 보니 쓸일이 거의 없어서 저보다 활발하게 운영하시는 분들이 쓰시는게 더 좋을것 같아 CSS 소스를 공개합니다. 상단배경에 들어오는 부분이 화면 가장 상단에 위치하며 고정되어 있습니다. 기본 루리웹 툴바나 다음 툴바는 아래 위치해서 안 보입니다. 마이피 관리에서 메인 인사말 부분은 전체글 보기시 게시글 맨위에 나타나는 부분입니다. 좌측배경은 이자리에 위치하게 됩니다. 위젯 코드를 넣으면 여기 배치가 되며, 자동으로 왼쪽 정렬이 됩니다. 관리자 뷰에서는 메뉴가 이렇게 뜹니다. 비회원 뷰에서는 메뉴가 아래로 밀리지 않으니 크게 신경안쓰셔도 될 부분입니다. 스타일 시트에서 주의 하셔야 할부분.. 더보기
마이피 스타일 적용했습니다. 루리웹에는 마이피라는게 있습니다. 일종에 미니 블로그 같은 기능인데, html 수정은 지원하지 않지만 CSS 수정은 지원합니다. 그래서 없는 CSS 실력을 다 닦아 넣어서 마이피용 CSS를 만들었습니다. 대충이런 모습으로 완성이 되었습니다. - 제 마이피어제 반나절 고생한게 아깝고 왠지 후기라도 남겨야 할것 같아서 글을 씁니다. -아아, 마이피는 테이블로 가득해! -div 쓰게 해주세요! ㅠㅠ 일단 시작부터 멘붕이었습니다. 2000년도 이전에나 통용되던 테이블 기반의 웹사이트 레이아웃을 쓰고 있었으니까요 -_-; 요즘은 전부 div로 합니다. W3C권고 안에도 나와있듯이 테이블은 레이아웃을 짜라고 만들어 놓은게 아닙니다. 테이블은 표를 짜라고 만들어 놓은겁니다. 웹표준 검사기 통과하면 당장 경고먹을 요소.. 더보기
Introducing Prototype 제 3번째 자작스킨인 Prototype을 공개합니다. 지금 부터 새 스킨의 주요 기능을 설명드리겠습니다. HTML5 시멘틱 구조 도입 시멘틱 구조를 통해서 SEO에 최적화 되어있습니다. 이전스킨도 HTML5 기반이었지만 소심하게 쓴것에 비해서 이번에는 Section, Article 시멘틱 태그를 적극활용했습니다. HTML5, CSS3 웹 표준 검사 통과 본 스킨의 HTML마크업과 CSS스타일링은 W3C 웹표준을 엄격히 준수합니다. Mobile-First 티스토리 최초의 모바일 퍼스트 스킨입니다. 구성요소를 크기만 줄여서 재활용하는 대신 각 스크린 사이즈에 맞는 요소들을 따로 만들어 더 쾌적한 사용환경을 제공합니다. *모바일퍼스트: 웹페이지를 제작할때 PC버전의 크기를 줄이는 기존 방식 대신 반대로 모바일.. 더보기
프로토타입 블로그 스킨 디자인 완료 이제 지옥의 마크업만이 남았네요 ㅋㅋ 요번에는 Sass로 작업을 해볼까합니다. 믹신이나 코드 네스팅도 참신하고 여러모로 작업량도 줄어들기 때문에 상당히 매력적이더군요 하지만 작성시 바로 압축해주는 프로그램이 없기 때문에 에디터에서 압축용 프로그램을 한번 거쳐야 한다는게 좀 까다롭긴 하네요... 아마 대중화가 되면 한방에 되는 프로그램도 나올것 같습니다. ^^ 더보기
자신의 블로그가 HTML5 기반이라는 것을 대놓고 자랑해보세요! - W3C HTML5 위젯 HTML의 규격을 만들고 표준을 지정하는 기관인 W3C(World Wide Web Consortium)에서 HTML5용 홍보 베너를 제공합니다. HTML5 구조로 만들어진 블로그라면 이 베너를 달아서 자신의 블로그가 (대한민국 포털과는 다르게) 선진 기술과 표준 정착에 앞서고 있다는 것을 알려보세요! W3 벳지 빌더 이 곳에서 자신의 사이트에 적용된 항목을 골라서 로고를 만들 수 있습니다. 로고에 표시되는 항목으로는 HTML5의 주요 기능인 시멘틱스, 오프라인 스토리지, 기기 접근성, 연결성, 멀티미디어, 3D 그래픽스, 성능&연동, CSS3로 구성되어 있습니다. 블로그에 달린 모습 HTML5는 Web Hypertext Application Technology Working Group (WHATWG)가 .. 더보기
드디어!! 티스토리가 모바일 페이지 끄기 기능을 지원합니다. 제 블로그는 BOOTSTRAP을 이용해서 만들어져 있고 처음부터 블로그를 만들때 반응형 웹을 염두해 두었기 때문에 총 12개의 컬럼으로 구성되어있습니다. (포스팅은 9컬럼, 사이드바는 3컬럼입니다. ) 그래서 결론은 미디어 쿼리만 설정하면 반응형 웹 사이트로 만들 수 있습니다. 아직까지는 1000px의 데스크탑을 위해서만 미디어 쿼리를 작성한 상태고 사이드바가 아래로 내려가면서 옆으로 펼쳐져야 하는데 아직 까지 그 부분은 손대지 못하고 있습니다. (언젠간 구현 할겁니다... 언제인지는 묘연하지만요...) 그리고 테블릿까지도 구현을 염두해두고 있었지만 핸드폰을 위한 모바일 페이지는 여전히 고민이었습니다. 왜냐면 티스토리가 모바일 페이지를 강제하고 있고 그것을 없애기 위해서는 우회하는 자바스크립트를 사용해야.. 더보기
블로그 스킨 제작기 #2 PSD 디자인 끝냈습니다. 이제 PSD 슬라이싱, 이니셜 마크업을 할 차례군요 하아... 아참! 코드를 작성하기 전에 미리 사진으로 만들어 본것으로 저 사진대로 스킨이 만들어질 확률은 약 10%도 안됩니다. -ㅅ- 더보기
스킨 제작 스타트 야매스킨 설계도.jpg 포스팅 할거리는 많이 생각 해두었지만 실제로 생산해 낼 여력이 안되어 허덕이고 있습니다. ㅠㅠ 이런거라도 올려야 글 올릴 명분이 생길 것 같아서 올린다고 생각하시면 됩니다. 스킨 제작 과정은 체계없는 100% 야매이며 제가 올리고 싶을때 올라옵니다. 제작 사유는 블로그가 느려터져서 수리 좀 해보려다가 워낙 발로 코딩을 해놓아서 건드리다 더 심각해질거 같아서 깨끗하게 포기하고 새 스킨 작업 들어갑니다. 요번에는 부트 스트랩을 사용하여 반응형 웹사이트를 구현할 예정인데 (티스토리의 엿같은 모바일 패이지는 날려버릴 계획) 부트스트랩은 처음 사용하다보니 머리가 슬슬 아파오네요 -_-) 이번 목표는 최대한 가볍게 입니다. 그리고 급진적인 레이아웃을 포기하고 평범하게 2단 구조로 갑니다. 너.. 더보기