본문 바로가기

css3

Meltdown 이글루스 스킨 v2 업데이트 내역 거의 완성되었습니다. 자잘하게 수정해야 될부분은 있는데 크게 문제시 되진 않고요, 일부 이글루스 기본 스타일 요소가 어느정도 남아있긴하지만 더 이상은 손 안댈 생각입니다. 관리페이지에서 보면 사이드바가 옆말고도 본문의 상단과 하단에 추가 되었습니다. 와이드 위젯은 상단이나 하단만 쓸수 잇는 병신력 충만한 이글루스 구조때문에 이렇게 만들었습니다. 우선 변경사항부터 알아보겠습니다. 사이드바에 최상단 로고가 이미지 파일로 바뀌었습니다. 기존의 로고는 CSS3 transform속성인 screw를 사용해서 기울인 글자를 구현했지만 이게 브라우저나 운영체제를 심하게 타서 이미지 파일로 교체하였습니다. 기본이미지 크기는 가로 780px이미지 이며 레티나 디스플레이를 위해서 @2x형식으로 축소시켜서 사용중입니다. 그 .. 더보기
Burarikun - 루리웹 마이피용 CSS3 스타일 제가 이전에 만들었던 마이피용 CSS3 스타일 입니다. 딱히 베포를 고려하고 만든건 아닌데, 막상 마이피 활성화시켜 놓고 보니 쓸일이 거의 없어서 저보다 활발하게 운영하시는 분들이 쓰시는게 더 좋을것 같아 CSS 소스를 공개합니다. 상단배경에 들어오는 부분이 화면 가장 상단에 위치하며 고정되어 있습니다. 기본 루리웹 툴바나 다음 툴바는 아래 위치해서 안 보입니다. 마이피 관리에서 메인 인사말 부분은 전체글 보기시 게시글 맨위에 나타나는 부분입니다. 좌측배경은 이자리에 위치하게 됩니다. 위젯 코드를 넣으면 여기 배치가 되며, 자동으로 왼쪽 정렬이 됩니다. 관리자 뷰에서는 메뉴가 이렇게 뜹니다. 비회원 뷰에서는 메뉴가 아래로 밀리지 않으니 크게 신경안쓰셔도 될 부분입니다. 스타일 시트에서 주의 하셔야 할부분.. 더보기
이글루스 스킨 제작 후기 티스토리 스킨 제작은 너무 번거롭고 힘든작업이라서 매번 하지는 못합니다. 그러나 스킨 변경이 가능한 몇몇 사이트들은 티스토리 스킨 변경하는데 비해서 아주 적은 노력만으로도 스킨을 바꿀수 있습니다. 물론 제약이 티스토리보다 커서 완전히 뜯어고치기는 힘들지만요. 실력 갈고닦는 개념으로 루리웹 마이피 스킨제작에 이어서 이글루스 스킨제작에 도전했습니다. 이전 마이피는 아무 계획없이 순수 CSS만으로 삽질했던데 비해서 이번 것은 PURE 프레임워크를 기반으로 만들어서 금방 만들었습니다. 사실 이번에 티스토리 스킨 바꾸면서 사용하며 되게 만족한 파운데이션이나 스켈레톤, HTML5 보일러플레이트, 그럼비, 그리고 새로나온 부트스트랩3도 고려를 해보았습니다. 제가 방금 말한 5개 프레임웍의 공통점이 뭔지 아시나요? 네.. 더보기
마이피 스타일 적용했습니다. 루리웹에는 마이피라는게 있습니다. 일종에 미니 블로그 같은 기능인데, html 수정은 지원하지 않지만 CSS 수정은 지원합니다. 그래서 없는 CSS 실력을 다 닦아 넣어서 마이피용 CSS를 만들었습니다. 대충이런 모습으로 완성이 되었습니다. - 제 마이피어제 반나절 고생한게 아깝고 왠지 후기라도 남겨야 할것 같아서 글을 씁니다. -아아, 마이피는 테이블로 가득해! -div 쓰게 해주세요! ㅠㅠ 일단 시작부터 멘붕이었습니다. 2000년도 이전에나 통용되던 테이블 기반의 웹사이트 레이아웃을 쓰고 있었으니까요 -_-; 요즘은 전부 div로 합니다. W3C권고 안에도 나와있듯이 테이블은 레이아웃을 짜라고 만들어 놓은게 아닙니다. 테이블은 표를 짜라고 만들어 놓은겁니다. 웹표준 검사기 통과하면 당장 경고먹을 요소.. 더보기
자신의 블로그가 HTML5 기반이라는 것을 대놓고 자랑해보세요! - W3C HTML5 위젯 HTML의 규격을 만들고 표준을 지정하는 기관인 W3C(World Wide Web Consortium)에서 HTML5용 홍보 베너를 제공합니다. HTML5 구조로 만들어진 블로그라면 이 베너를 달아서 자신의 블로그가 (대한민국 포털과는 다르게) 선진 기술과 표준 정착에 앞서고 있다는 것을 알려보세요! W3 벳지 빌더 이 곳에서 자신의 사이트에 적용된 항목을 골라서 로고를 만들 수 있습니다. 로고에 표시되는 항목으로는 HTML5의 주요 기능인 시멘틱스, 오프라인 스토리지, 기기 접근성, 연결성, 멀티미디어, 3D 그래픽스, 성능&연동, CSS3로 구성되어 있습니다. 블로그에 달린 모습 HTML5는 Web Hypertext Application Technology Working Group (WHATWG)가 .. 더보기

티스토리툴바