본문 바로가기

CSS

티스토리 기본 요소 스타일 적용 스타일 적용하기 정말 까다로운 주석 말풍선 부분도 스타일을 적용했습니다. 티스토리에서 기본 제공하는 사진 2개, 3개 베치는 무려 테이블(-_-)이 적용되서 반응형 만들기가 상당히 까다롭지만, 이 역시 삽질로 해결했습니다. 다음지도도 스타일 적용했습니다. 웹킷 브라우저에서만 보이는데, 지도가 흑백으로 뜹니다. 그냥 심심해서 한번 해봤어요 슬라이더 스타일을 개선했습니다. 이전에는 슬라이더 컨트롤이 화면을 완전 가리는 구조였지만, 이제는 양옆으로 밀어 버리고, 전체적인 요소 크기를 줄였습니다. 각종 외부 정보 표시도 스타일을 적용했습니다. 테이블과 dl이 섞여서 상당히 스타일 적용하기가 까다 롭더군요 -_-;;;; 이것보다 더 이쁘게 만들고 싶었지만, 능력한계 입니다. 마이피플 스티커도 gif 아이콘 처럼 .. 더보기
스킨 압축 완료 했습니다. 기나긴 개발 기간 끝에 드디어 압축한 버전의 스킨을 적용하였습니다. css 파일을 하나로 합치고, 스크립트도 하나로 압축, html 파일도 압축했습니다. 평균 페이지 로드시간은 연결상황에 따라 다르지만 약 4초 정도 소요 됩니다. 압축이 스킨 제작에서 제일 마지막 과정인데, 더 이상 손댈게 없다(면 좋겠지만)라는 것을 가정하에 하는 작업입니다. 나름 열심히 계획을 짜서 만들어서, 더 이상은 손댈 일이 많이 없으면 좋겠내요 ㅎㅎ 패이지 스피드는 94점이 나옵니다. 이전 스킨이 91점대였는데 3점올랐네요 킥킥 더보기
최신 웹디자인 트랜드가 궁금할때 - CSS Design Awards, CSS winner 현재 웹 디자인은 단순히 사이트의 컨텐츠를 보여주는 단계를 넘어서, 미(美)의 단계까지 접어들고 있습니다. 이 모든 것들은 브라우저의 기술발전과, 언어의 고도화 덕분으로, 이전에는 상상조차 할 수 없었던 것을 만들어 낼 수 있게 되었습니다. 그래서 요즘은 웹 사이트의 디자인만으로 투표를 하고 상을 주는 사이트도 생겨나고 있습니다. 오늘 소개할 사이트는 CSS Design Awards와 CSS winner입니다. 이 외에도 여러곳이 있지만 제일 볼만한 사이트는 이 두곳이라고 생각합니다. http://www.cssdesignawards.com/ http://www.csswinner.com/ 상기 사이트를 들어가보시면 요즘 유행하는 트랜드나 참신한 웹사이트들을 많이 만나 보실수 있습니다. P.S. 요즘 저런데.. 더보기
티스토리 기본 슬라이더 마개조 아시다 시피 티스토리 기본 슬라이더는 이렇게 생겼습니다. 컨트롤부 디자인도 90년대 풍이며, 무엇보다 가장 문제는 사진이 쥐꼬리만하게 뜬다는 것이죠. 기능부족이야 말할것도 없지만 이를 극복하기 위해서 외부 슬라이더를 설치 해서 쓸 수 있습니다. 그러나 이렇게 하게되면 아주 귀찮은 상황이 발생합니다. 슬라이더를 쓰고 싶을때마다 사진 한장한장을 슬라이더에 넣어줘야 되는 것이죠. 한 두장이면 모를까 10장 넘어가면 사람 돌아버립니다. 게다가 스킨이라도 한번 바꾸면서 슬라이더 스크립트를 꺼버리면 아주 개판이 됩니다. 그래서 이를 어떻게 처리할까 고민을 하다가 그냥 기본 슬라이더를 뜯어고치는 방향으로 했습니다. 기본슬라이더는 스킨을 바꾸더라도 티스토리 기본 스크립트가 적용 되어서 멀쩡하게 있을 테니까요 스타일이 .. 더보기
Burarikun - 루리웹 마이피용 CSS3 스타일 제가 이전에 만들었던 마이피용 CSS3 스타일 입니다. 딱히 베포를 고려하고 만든건 아닌데, 막상 마이피 활성화시켜 놓고 보니 쓸일이 거의 없어서 저보다 활발하게 운영하시는 분들이 쓰시는게 더 좋을것 같아 CSS 소스를 공개합니다. 상단배경에 들어오는 부분이 화면 가장 상단에 위치하며 고정되어 있습니다. 기본 루리웹 툴바나 다음 툴바는 아래 위치해서 안 보입니다. 마이피 관리에서 메인 인사말 부분은 전체글 보기시 게시글 맨위에 나타나는 부분입니다. 좌측배경은 이자리에 위치하게 됩니다. 위젯 코드를 넣으면 여기 배치가 되며, 자동으로 왼쪽 정렬이 됩니다. 관리자 뷰에서는 메뉴가 이렇게 뜹니다. 비회원 뷰에서는 메뉴가 아래로 밀리지 않으니 크게 신경안쓰셔도 될 부분입니다. 스타일 시트에서 주의 하셔야 할부분.. 더보기
마이피 스타일 적용했습니다. 루리웹에는 마이피라는게 있습니다. 일종에 미니 블로그 같은 기능인데, html 수정은 지원하지 않지만 CSS 수정은 지원합니다. 그래서 없는 CSS 실력을 다 닦아 넣어서 마이피용 CSS를 만들었습니다. 대충이런 모습으로 완성이 되었습니다. - 제 마이피어제 반나절 고생한게 아깝고 왠지 후기라도 남겨야 할것 같아서 글을 씁니다. -아아, 마이피는 테이블로 가득해! -div 쓰게 해주세요! ㅠㅠ 일단 시작부터 멘붕이었습니다. 2000년도 이전에나 통용되던 테이블 기반의 웹사이트 레이아웃을 쓰고 있었으니까요 -_-; 요즘은 전부 div로 합니다. W3C권고 안에도 나와있듯이 테이블은 레이아웃을 짜라고 만들어 놓은게 아닙니다. 테이블은 표를 짜라고 만들어 놓은겁니다. 웹표준 검사기 통과하면 당장 경고먹을 요소.. 더보기
반응형 스킨제작시 스프라이트 이미지 때문에 발생하는 애로사항들... 현재 로딩속도 비약적 향상을 목표로 삼고 베경 이미지를 제외한 모든 이미지 요소를 스프라이트로 대체 했습니다. 하지만 이에 따른 예상치 못한 문제들이 속속들이 드러나고 있습니다. (오른쪽 플로팅 메뉴 주목) 하지만 옆에 플로팅 요소를 보면 아시듯이 스프라이트를 사용하면 img 요소로 바로 심는 것이 아니라 div나 span을 놓고 거기에 background-img를 사용해서 스프라이트를 CSS로 넣는 방식으로 가야합니다. 사실 이미지 파일 주소를 일일히 쳐넣는 것보다 단일 이미지 파일에 스프라이트 위치만 불러오면 되어 스타일링이 상당히 빠르고 편하지만 요소자체의 크기는 변하되 배경 이미지의 크기는 변하지 않아 반응형 이미지의 구현이 쉽지 않다는 단점이 있습니다. 다음도 현재 개편을 하여 큼직큼직한 스프라.. 더보기

티스토리툴바