티스토리 스킨자료

Design/Web 2007. 2. 25. 01:07
Jasu's blog에서 사용한 스킨 자료를 올립니다.

익스플로러와 기타 브라우저(파이어폭스)에서의 호환 문제로 인해서 아직도 정리가 제대로 되지 않았지만 기다리시는 분들이 있으신 듯 싶어서 일단 모자른 자료를 올리도록 하겠습니다.

자료는 모두 5개입니다. 사용 방법은 아래와 같습니다.






사용자 삽입 이미지








-------------------------------------------------------------------------
1. 사용자스킨HTML - 이것은 티스토리 스킨->스킨편집에 들어가시면 상단에 있는 텍스트 자료입니다.

2. 사용자스킨CSS - 이것은 티스토리 스킨->스킨편집에 들어가시면 하단에 있는 텍스트 자료입니다.
-------------------------------------------------------------------------
3. bg.swf - 플래시로 만든 배경 파일입니다.

4. logo.png - 로고가 들어가는 이미지입니다. 배경이 투명한 png 파일로 가로 200px, 세로 200px 사이즈로 만들어서 올리시면됩니다. 파일명은 반드시 logo.png로 하시기 바랍니다.

5. flash.js - 플래시를 임베드 스키기 위한 파일입니다. (수정하실 필요없이 그냥 업로드 하시면 됩니다.)
-------------------------------------------------------------------------
위 3, 4, 5번 파일은 스킨->스킨편집에 들어가시면 하단에 파일업로드를 통해서 업로드 하시면 됩니다.



그리고 여기서 주의할 점은 1단 기본스킨은 아래와 같은 것으로 적용한 후에 위 과정을 진행하시기 바랍니다.

사용자 삽입 이미지

이렇게 파일을 수정, 업로드 하시고 티스토리에서 기본적으로 제공하는 환경설정을 변경하셔서 사용하시면 되겠습니다. 스킨 제공자(Designed by JASU)는 표시해 주시면 고맙겠습니다. 그리고 플래시 배경은 시간이 나는대로 주기적으로 제 블로그의 이 포스트를 통해 업로드 해 놓도록 하겠습니다.

감사합니다.

------------------------------------------------------------------------------------------
태터툴즈에서의 적용 방법
http://jasu.tistory.com/80#comment1462574
스킨을 사용해보신 어떤 분이 올려주셨습니다.
간단한 사용팁인데 저는 태터툴즈를 사용하지 않는지라 이분의 글을 링크겁니다. 태터 사용자분들중 자세한 스킨 적용팁을 올려주시면 업데이트 하겠습니다. 감사합니다.

    

설정

트랙백

댓글

스킨 편집 팁 : 파이어폭스와의 CSS 호환성

Programming/Etc 2007. 2. 21. 11:05
스킨 편집 팁 : 파이어폭스와의 CSS 호환성

이번에 소개해 볼것은 스킨 편집 및 웹페이지 제작 등에 쓰일수 있는 파이어폭스와의 호환성에 관한 간단한 팁입니다.

'파이어폭스와의 호환성' 이라고 예기해 봤습니다만.
사실상 파이어폭스와의 호환성이라 함은 바로 '웹표준' 을 말하는 것입니다.
인터넷 익스플로러(이하 IE)가 대다수인 실정상. 한국에서는 대부분의 웹페이지가 IE에 맞추어져 제작되어 있습니다만.
IE에만 맞추어져 있는 홈페이지는 다른 브라우져에서 그 구조가 깨어지거나 사용이 불가능할 정도까지도 될수 있습니다.
이 문제는 IE가 웹표준을 따르지 않는데서 기인하는 문제인데요.

표준에 맞추었을 경우 IE및 모든 브라우져에서 완벽하게 잘 보이는 것에 반해,
IE에만 맞추었을 경우 다른 모든 브라우져에서는 올바르게 보이지 않는 것에 비추어 보아 이것은 전적으로 IE의 문제라고 볼수 있습니다.

그러나. 웹디자이너가 아닌 이상에야 일반 사용자가,
HTML코드를 짜는데에 있어 표준이고 아니고를 맞추기가 사실 실로 힘든 부분이라 할수 있습니다.
뭐니해도 사실상, 자신이 사용하고 또한 가장 많이 사용하는 IE에서만 잘 보이면 그만이니까요.

하지만. 웹페이지라는 것의 특성상 절대적 대다수만이 아닌 소수들에게도 동일한 서비스를 제공해야 하는 암묵적인 책임이 있을 뿐더러.
IE가 아닌 다른 브라우져 사용자들은 점점 늘어나는 추세라. 비록 일반 사용자임에도 불구하고 이것은 무시하지 못할 정도의 문제라고 생각할수 있습니다.
특히, 스킨 편집을 하고자 하시는 분들은 커스터마이징이나 디자인적 관점에서의 접근을 하게 됩니다만.
다른 브라우져에서 보았을때 그것이 무참하게 깨져 버림으로써 자신의 노력이 물거품이 되는 정신적 충격을 받을수도 있습니다.

이번 기회엔 초보자도 간단히 사용할수 있는 호환성에 관한 간단한 팁을 소개해 보겠습니다.




CSS에서 가장 문제가 되는 것은 다름아닌 '박스모델' 입니다.
특히 이글루스 스킨은 레이아웃을 잡는데에 있어 박스모델이 주로 사용됩니다만.
그 코드를 작성함에 있어 IE위주로 작성한다면 필연적으로 다른 브라우져에서는 깨지게 됩니다.
결론적으로, 이 '박스모델' 만 신경써 준다면 웬만한 브라우져에서는 다 잘 보인다는 것이죠.

IE에서 박스모델이 표준이 아닌 이유는 바로 padding, margin, border 사이즈에 있습니다.
예를들어 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 준다고 생각해 봅시다.
간단히 생각해 보자면 다음과 같은 코드를 사용하면 되겠지요.

예제1-IE전용

DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
PADDING: 10PX;
MARGIN: 10PX;
BORDER: 1PX SOLID #000000;
}


사실, 솔직히 말해 직관적입니다. 그냥 생각한 대로 가로세로 100픽셀에 그냥 padding, margin, border 만 주면 됩니다.
그런데. 이런 식으로 코드를 작성하면 반드시 이것은 다른 브라우져에서 문제가 생깁니다.
왜냐하면, IE의 경우 가로세로 수치가 눈으로 보이는 박스 사이즈에 기준한것에 반해,
다른 브라우져가 사용하는 가로세로 수치는 눈으로 보이는 사이즈가 아닌 내용이 표시되는 부분을 기준으로 하고 있기 때문이죠.

그러니까. 눈으로 보이는 박스 사이즈가 100px라고 하면, IE에서는 그냥 100px을 적어주면 끝납니다만.
표준 브라우져에서는 그 사이즈에서 padding과 border 사이즈를 뺀 사이즈, 위의 경우에서는 78px를 적어줘야 하는 것입니다.


자. 그렇다면 코드를 작성할때 일일히 이것을 계산해서 조심스레 적어야 할까요.
...솔직히 매우 머리아프고 귀찮은 짓임에 분명합니다.
또한 이렇게 적으면 되려 IE에서 잘 보이지 않는 결과가 생길수도 있습니다. (첨부 이미지 참조)

결국 생각해볼수 있는 방법은. 바로 표준과 IE를 따로 적어주는 방법인 것이죠.
위에서 초보자라도 쉽게 할수 있다고 언급했습니다만. 이 방법이야말로 가장 간단한 방법이라고 생각합니다.
왜. 이미 모든 코드를 작성한 상태에서도 각 박스모델에 몇줄씩 추가/수정만 해주는 것으로도 호환성 상승을 노릴수 있기 때문이죠.
자. 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 준다면,
표준으로는 이렇게 적어야 다른 브라우져에서 IE와 같은 모델이 보입니다.

예제2-표준

DIV.TEST {
WIDTH: 78PX;
HEIGHT: 78PX;
PADDING: 10PX;
MARGIN: 10px;
BORDER: 1PX SOLID #000000;
}


그러나. 이 박스모델 코드를 해석하는 방식이. IE가 표준이 아니기 때문에 오히려 IE에서 깨지는 현상이 생겨버리는 것입니다.
IE 쪽을 쓰기 위해서는 그냥 가로세로 사이즈를 100px를 적으면 됩니다만 그러자니 다른 브라우져에서 깨지고....
해서, 위의 코드를 적은 뒤 아래에 IE에서만 인식하는 다음의 코드를 추가해 주는 방법으로 해결할수 있습니다.

* html DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
}



* html ~~ 은 IE에서만 인식되는 특수한 selector라고 합니다. 저도 이유는 잘 모르겠습니다-_-
중요한 사실은 오로지, "* html ~~ 를 적어줌으로써 표준인 코드를 비표준인 IE에도 맞출수 있다" 는 것일 뿐이겠죠.

결론적으로, 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 주고 싶을때.
표준과 IE에서 전부 잘 작동하는 코드를 만들고 싶다면 다음과 같이 작성하면 간단하게 해결할수 있습니다.

예제3-절충안

DIV.TEST{
WIDTH: 78PX;
HEIGHT: 78PX;
PADDING: 10PX;
MARGIN: 10px;
BORDER: 1PX SOLID #000000;
}

* html DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
}



●중요!
이미 써져있는 코드를 수정할 경우, * html ~~ 을 각 박스 아래쪽 라인에 추가한 뒤,
원래의 수치는 * html ~~ 쪽으로 옮기고, 이미 써져 있던 수치는 margin은 제외하고 padding, border 사이즈를 빼서 적어주면 됩니다.
ex) 가로, 세로 100px에 padding 10px, border 1px라면. 100px - (20+2)= 78px 입니다.



<참고 이미지>
사용자 삽입 이미지

왼쪽은 파이어폭스, 오른쪽은 인터넷 익스플로러입니다.
IE전용이 파이어폭스에서는 크게 나오는 반면, 표준은 IE에서 작게 나옵니다.
절충안을 사용하면 두개의 브라우져에서 완전히 같은 박스모델이 구현 가능합니다.




이쪽에 대해서는 사실 크게 깊은 지식이 없기에 다소의 오류를 포함하고 있을수도 있습니다.
하지만. 위에 언급한 방법은 실제 사용해 본 결과, IE및 다른 브라우져에서도 완전히 같이 동작한다는 것을 확인하였기에 이렇게 소개해 봅니다.

이글루스에서 스킨을 직접 만드시는 분들.
특히 기존 스킨의 수정이 아닌 완전히 새로 만들 경우에 한해 호환성이 문제가 될 경우가 가끔 있습니다.
(물론, 이글루스 자체는 다른 브라우져에서 잘 보이는 편이고, 공개 스킨 또한 잘 보입니다만 가끔씩 과격한 모딩이 되어있는 스킨은 깨질때가 있습니다)

실로 간단한 방법입니다만.
이 팁으로 인해 리퍼러에 약 몇%만을 차지하는 소수의 타 브라우져 사용자들에게도 떳떳하게 블로그를 보일수 있었으면 하는 바램입니다.

참고 링크: 한국 모질라 포럼

덧붙임:
이 글은 한국 모질라 포럼의 웹 표준화 프로젝트 계시판에서 CSS 박스 모델 문서를 참조하였습니다.

출처 : 안티에고이스트
    

설정

트랙백

댓글