html5 로 제작된 Gray Border 스킨을 소개합니다.
- 티스토리/스킨변경제작이력
- 2011. 12. 18. 12:00
저번에 이어 두번째로 html5로 티스토리 스킨을 제작했습니다.
아직 media Queries 는 작성하지 않았지만 차츰하면 된다고 생각하고 먼저 소개합니다.
이번에 제작한 스킨부터는 배포를 해도 되지 않나 생각해봅니다. 현재는 말고 좀더 수정한 후 배포결정을 하겠습니다.
여기서는 간략한 소개만 합니다.
이번에 제작한 스킨의 이름은 Gray Border 로 지었습니다.
그냥 회색바탕에 보더스타일이 가미되서 그렇게 지었습니다.
html 5로 제작을 하다보니 높이가 100% 로 만들기가 너무 힘들었습니다. doc 타입이 그래서인지 웹표준 브라우져에 맞추면 IE가 안맞고, IE에 맞추면 웹표준 브라우져가 안맞고... 결국 현재는 웹표준 브라우져(크롬,사파리,파이어폭스,오페라등등)와 IE 6,7,8 등과 똑같이 높이가 100%가 되는 html5는 없는것 같습니다.
이걸로 상당이 많이 시간을 소진했습니다.
제작초기부터 목표는 IE6을 비롯한 호환성입니다. 그래서 기본 베이스는 IE6과 함께 크롬과 파이어폭스로 작업을 했습니다.
즉 이미지를 대폭 줄이고 그라데이션을 이용하는것입니다.
먼저 빠른로딩...
블로그나 스킨의 대부분이 이미지를 로딩하는데 시간이 많이 걸립니다. 로딩의 가장 많이 리소스를 차지하죠.
그래서 이미지를 대폭 줄였습니다.
위 이미지를 보시면 아시겠지만 이미지는 하단에 로고를 제 로고인 demun_logo.png 딱 하나입니다.
나머지 7개는 아이콘 이미지 입니다. 즉 스킨에 사용되는 이미지가 거의 없다고 해도 과언이 아닙니다.
참고로 IE6 때문에 gif파일이 두개 추가되었습니다.
이도 자바스크립트를 통해 png파일을 투명하게 할까도 했지만 가볍게 하기 위해 스크립트를 사용하지 않았고, 평상시에는 png 파일이 보여지고 핵으로 IE6만 gif 파일이 보여지도록 했습니다.
결과 빠른 로딩으로 보여지게 됐습니다. 체크해보니 1초정도 나오는것 같네요. 이또한 구글광고나 기타 다른 요소도 포함된 결과 입니다.
IE6 이상 브라우져에서 그라디언트나 CSS3의 기능을 이용하는 가장 좋은 방법은 PIE.htc 를 이용하는 것입니다. 근데 이것이 로컬 컴에서는 되는데 꼭 티스토리에서 적용만 하면 안됩니다.
정확히 말하자면 맨처음 제작할때는 되더니 어느순간 적용이 안되는 것이였습니다. 그래서 아주 css3pie.com 의 문서를 아주 독파를 했습니다.
그래서 적용을 했지요.
그러기 때문에 IE6,7,8 모두 box-shadow, gradient, radius 등 정상적으로 보이게 했습니다.
여기서 추가글 씁니다.
초기 제작되었을때는 PIE.htc 가 정상 작동되었으나 곧 안되기 시작했습니다.
그래서 수정한것이 pie.js 입니다. 이것도 정상작동은 되었으나 ie8에서 스크립트를 읽지 못하는 버그가 있었습니다. 물론 IE6,7은 잘 로딩을 했습니다.
그래서 현재는 IE에서는 그라데이션은 되는데 다른것 즉 둥근모서리,그림자등은 안됩니다.
자세한것은 아래에서 다시 쓰겠습니다.
아래 그림을 보시면 본문에 링크에 마우스를 대면 노랑색으로 툴팁이 나옵니다.
툴팁도 몇가지 선별해서 적용했습니다. 이미지없고, css3 를 사용하지 않고, IE 도 잘 적용되는걸로요... 물론 html5에서도 적용이 되는걸로 선택했습니다.
지금 여기를 클릭해보세요. 그럼 상단으로 올라갈겁니다. 그럼 거기에도 버튼이 있을겁니다.
CSS3만 IE가 적용된다면 사용 안할 이유가 없지요. 그래서 저는 이번 스킨에 버튼처럼 사용된 둥그스런 버튼형태를 많이 사용했습니다.
회색버튼과 특징을 나타내는 녹색버튼 두개를 사용했고 IE6에서도 되게 하였습니다.
기본적인 특징은 여기까지 입니다.
IE6 사용자가 아무래도 우리나라에서 있으니 염두를 안할래야 안할수가 없더군요. 그래서 이전에 있던 CSS3 네비게이션도 치워버리고 단순한 네비게이션으로 바꿨지요.
물론 멋진 드롭다운 메뉴들도 많지만 이것도 역시 자바스크립트를 포함하거나 CSS3로 작성되어져야 합니다.
현재 jQuery 를 포함하고 있기 때문에 한단계 정도 드롭다운 되는 메뉴는 적용할 수 있으나 그냥 두었습니다.
jQuery 를 사용하면 여러가지 좋은 점이 많습니다.
참고로 IE7에서 footer 이 중간에 떠 다니는 현상을 해결했습니다.
아직 media Queries 는 작성하지 않았지만 차츰하면 된다고 생각하고 먼저 소개합니다.
이번에 제작한 스킨부터는 배포를 해도 되지 않나 생각해봅니다. 현재는 말고 좀더 수정한 후 배포결정을 하겠습니다.
여기서는 간략한 소개만 합니다.
이번에 제작한 스킨의 이름은 Gray Border 로 지었습니다.
그냥 회색바탕에 보더스타일이 가미되서 그렇게 지었습니다.
html 5로 제작을 하다보니 높이가 100% 로 만들기가 너무 힘들었습니다. doc 타입이 그래서인지 웹표준 브라우져에 맞추면 IE가 안맞고, IE에 맞추면 웹표준 브라우져가 안맞고... 결국 현재는 웹표준 브라우져(크롬,사파리,파이어폭스,오페라등등)와 IE 6,7,8 등과 똑같이 높이가 100%가 되는 html5는 없는것 같습니다.
이걸로 상당이 많이 시간을 소진했습니다.
제작초기부터 목표는 IE6을 비롯한 호환성입니다. 그래서 기본 베이스는 IE6과 함께 크롬과 파이어폭스로 작업을 했습니다.
즉 이미지를 대폭 줄이고 그라데이션을 이용하는것입니다.
1. 빠른 로딩.
제작초기부터 두가지 염두해 두었습니다. 그건 IE6과의 호환성과 빠른 로딩입니다.먼저 빠른로딩...
블로그나 스킨의 대부분이 이미지를 로딩하는데 시간이 많이 걸립니다. 로딩의 가장 많이 리소스를 차지하죠.
그래서 이미지를 대폭 줄였습니다.
위 이미지를 보시면 아시겠지만 이미지는 하단에 로고를 제 로고인 demun_logo.png 딱 하나입니다.
나머지 7개는 아이콘 이미지 입니다. 즉 스킨에 사용되는 이미지가 거의 없다고 해도 과언이 아닙니다.
참고로 IE6 때문에 gif파일이 두개 추가되었습니다.
이도 자바스크립트를 통해 png파일을 투명하게 할까도 했지만 가볍게 하기 위해 스크립트를 사용하지 않았고, 평상시에는 png 파일이 보여지고 핵으로 IE6만 gif 파일이 보여지도록 했습니다.
결과 빠른 로딩으로 보여지게 됐습니다. 체크해보니 1초정도 나오는것 같네요. 이또한 구글광고나 기타 다른 요소도 포함된 결과 입니다.
2. IE 6과의 호환성.
기본적으로 IE 6이상 브라우져에서 보여지게 하기 위해 제작되었습니다. 이미지가 없고 CSS3 의 그라디언트를 사용했습니다. 그래야 밋밋함을 피하고 세련된 효과를 볼 수 있기 때문이죠.IE6 이상 브라우져에서 그라디언트나 CSS3의 기능을 이용하는 가장 좋은 방법은 PIE.htc 를 이용하는 것입니다. 근데 이것이 로컬 컴에서는 되는데 꼭 티스토리에서 적용만 하면 안됩니다.
정확히 말하자면 맨처음 제작할때는 되더니 어느순간 적용이 안되는 것이였습니다. 그래서 아주 css3pie.com 의 문서를 아주 독파를 했습니다.
그래서 적용을 했지요.
그러기 때문에 IE6,7,8 모두 box-shadow, gradient, radius 등 정상적으로 보이게 했습니다.
여기서 추가글 씁니다.
초기 제작되었을때는 PIE.htc 가 정상 작동되었으나 곧 안되기 시작했습니다.
그래서 수정한것이 pie.js 입니다. 이것도 정상작동은 되었으나 ie8에서 스크립트를 읽지 못하는 버그가 있었습니다. 물론 IE6,7은 잘 로딩을 했습니다.
그래서 현재는 IE에서는 그라데이션은 되는데 다른것 즉 둥근모서리,그림자등은 안됩니다.
자세한것은 아래에서 다시 쓰겠습니다.
3. 툴팁.
이전부터 저는 jQuery 를 사용했었습니다. a 링크나 이미지에는 툴팁이 기본적으로 나옵니다. title 나 alt 값으로 나오죠. 근데 좀더 기능을 보완하고자 저는 블로그 본문에 있는 글에만 툴팁이 나오게끔 했습니다.아래 그림을 보시면 본문에 링크에 마우스를 대면 노랑색으로 툴팁이 나옵니다.
툴팁도 몇가지 선별해서 적용했습니다. 이미지없고, css3 를 사용하지 않고, IE 도 잘 적용되는걸로요... 물론 html5에서도 적용이 되는걸로 선택했습니다.
4. 링크 스무스 스크롤링.
이게 뭐냐면 링크를 클릭했을때 원하는 목표점으로 스무스하게 이동하는 것을 말합니다.지금 여기를 클릭해보세요. 그럼 상단으로 올라갈겁니다. 그럼 거기에도 버튼이 있을겁니다.
 |
 |
 |
스킨에 기본적을로 포함이 되어 있고 본문이 길 경우 써먹을려고 포함해서 적용습니다.
5. 나눔고딕.
이도 몇가지 글꼴을 적용하려 했으나 로딩속도 때문에 나눔고딕을 기본으로하고 웹폰트로 적용을 했습니다. 이 또한 크로스브라우징으로 IE6까지 전부 나눔고딕으로 보여집니다.6. 버튼 코드 재사용.
버튼을 사용함으로써 코드수를 줄이고 재사용하는것이 가능해집니다.CSS3만 IE가 적용된다면 사용 안할 이유가 없지요. 그래서 저는 이번 스킨에 버튼처럼 사용된 둥그스런 버튼형태를 많이 사용했습니다.
회색버튼과 특징을 나타내는 녹색버튼 두개를 사용했고 IE6에서도 되게 하였습니다.
기본적인 특징은 여기까지 입니다.
IE6 사용자가 아무래도 우리나라에서 있으니 염두를 안할래야 안할수가 없더군요. 그래서 이전에 있던 CSS3 네비게이션도 치워버리고 단순한 네비게이션으로 바꿨지요.
물론 멋진 드롭다운 메뉴들도 많지만 이것도 역시 자바스크립트를 포함하거나 CSS3로 작성되어져야 합니다.
현재 jQuery 를 포함하고 있기 때문에 한단계 정도 드롭다운 되는 메뉴는 적용할 수 있으나 그냥 두었습니다.
jQuery 를 사용하면 여러가지 좋은 점이 많습니다.
Gray Border 스킨에서 CSS3 이용시의 문제점 IE에만 적용
이 문제점은 doctype 이 html5이기 때문인것으로 판단됩니다.
기존의 모든것이 안되더군요.
먼저 pie.htc, pie.js 를 모두 사용해보았으나 로컬컴에서는 문제가 없었습니다. 한두가지만 적용을 하면 될겁니다. 하지만 여러가지를 사용하면 안되더군요.
호환성이 좋은것은 pie.js 입니다. 이것은 잘 되는데 ie8과의 충돌때문에 그냥 지웠습니다.
pie 를 사용하면 IE에서 그림자,둥근코너,그라데이션 등이 가능합니다. 결국 충돌때문에 삭제.
복잡하고 호환성이 적어서 결국 포기하고 적용을 하지 않았습니다.
위와 같은 모든 문제는 html5가 아니면 가능하다고 생각됩니다. PIE.htc까지도 모두 가능합니다.
기존의 모든것이 안되더군요.
먼저 pie.htc, pie.js 를 모두 사용해보았으나 로컬컴에서는 문제가 없었습니다. 한두가지만 적용을 하면 될겁니다. 하지만 여러가지를 사용하면 안되더군요.
호환성이 좋은것은 pie.js 입니다. 이것은 잘 되는데 ie8과의 충돌때문에 그냥 지웠습니다.
pie 를 사용하면 IE에서 그림자,둥근코너,그라데이션 등이 가능합니다. 결국 충돌때문에 삭제.
둥근코너
둥근코너를 만드는 방법에는 여러가지가 있습니다.이또한 doctype 때문으로 판단됩니다. 가장 호환성이 좋은것은 그중에서 jquery.corner 입니다.이것은 js에서 코너의 크기를 결정짓습니다.즉 CSS에서 border-radius하면 되는것이 아니라 js에서 설정을 합니다.복잡하고 호환성이 적어서 결국 포기하고 적용을 하지 않았습니다.
위와 같은 모든 문제는 html5가 아니면 가능하다고 생각됩니다. PIE.htc까지도 모두 가능합니다.
참고로 IE7에서 footer 이 중간에 떠 다니는 현상을 해결했습니다.