본문 바로가기

Works/Blog Skin

이글루스 코드 제한에 딱 맞춘 CSS3 스킨 - Frosty

매번 스킨 만들때마다 느끼는 것이지만 CSS 글자수 제한 어떻게 안되나? 건의 한지가 언젠데 발전이 없는 것을 보면 이글루스 운영진은 티스토리보다 더 노답인듯.


덕분에 만들어 놓은 스타일도 글자수 제한으로 밀어버리고 새로 만드는 병크를 저질렀다. 글자수 제한 때문에 스킨 옵션에서 배경이미지 또는 헤더 이미지 둘중에 하나만 넣을 수 있다. 둘다 넣을 경우 잘린다.



사실 배경 이미지만 넣어도 일부 코드가 잘리지만 위치 설정용 코드만 잘리기 때문에 별 문제는 없다. (position 코드의 경우 전부 오버라이드됨. 헤더는 해당사항 없음.)


특징


CSS3을 사용하여 만들어진 스킨으로 표준 요소와 비표준 요소가 적절히 섞여있어 브라우저마다 다르게 보이는 스팩타클함을 자랑한다. 아마도 2년이내에는 모든 브라우저에서 동일하게 표시될 것으로 예상.



macOS 10.12 Sierra에 기본으로 탑재되어있는 사파리 10에 최적화 되어있다. 그 이외의 브라우저에서는 IE빼고는 모두 큰 문제 없이 쓸 수 있으나 사파리만큼 이쁘게 랜더링 되진 않는다. (블러 효과, sticky 메뉴 미구현)



사파리에서 구동했을때 모습.  그러므로 사파리에서 사용을 권장하며, 맥이없다면 이 기회에 맥을 사든지 해킨토시를 조립하자.


기본폰트는 나눔 바른 고딕을 사용. 굵기별로 지원한다.



사이드바 이미지의 경우 호버링시에 컬러로 변경된다.



포토로그 역시 마찬가지



사이드바 요소의 경우 위치가 정해져 있으므로, 이동하게 되면 이상하게 뜰 것이다. 모든 방향에 놓을 수 있도록 지원을 하고 싶지만 이글루스의 빌어먹을 코드 제한 때문에 포기.


다음은 각 요소별 최적 위치 이다. 왼쪽 사이드바 - 프로필, 카테고리, 메뉴릿, 이전글 목록 오른쪽 사이드바 - 블로그롤, 최근 트랙백, 최근덧글, 포토로그, 하단 사이드바 - 검색, 최근핑백, 최근 포토로그 덧글, 태그, 달력 여기에 포함되어있지 않은 요소의 경우 커스텀 스타일을 지원 하지 않는다. 더불어 위치 이동시에 일어나는 참사는 책임지지 않음.


댓글란의 경우 비밀글 버튼과 작성버튼 모두 커스텀 스타일이 적용되어 있다. 더불어 간지나는 반투명 하단 사이드바는 덤.



메뉴릿의 경우 상단의 블로그 제목 밑에 자동으로 뜬다. 블로그 설정에서 메뉴릿에 아이템 추가를 하면 추가 작업 없이 스타일이 적용된다.


설치방법

1.이글루스 스킨 벨리에서 설치하거나, 2.첨부파일로 다운로드 받아서 직접 설치하는 방법이 있다.


Frosty_skin.zip


첨부 파일에서 html 파일은 메모장으로 열어서 내용물을 스킨에디터 > 전문가용 편집 > html에 붙여넣으면 되고, css 파일도 마찬가지로 css 란에 붙여넣으면 된다.


상기했듯, 코드 수 제한 덕분에 블로그 템플릿에서 일부 요소만 지원하고 있다.


포스트 영역 7 



포스트 덧글 2 



프로필 1 



카테고리 3 



이전글 목록 3 



포토로그 2 



블로그롤 1


배경이미지 변경 방법

전문가용 편집에서 이미지 첨부 후 적용하면 된다. 코드가 약간 잘리지만 스킨 렌더링에는 아무런 문제가 없다.


배경이미지는 unsplash / 폰트는 나눔바른고딕 (OFL), 호스팅은 jsdelivr / MIT 라이센스