레이블이 css인 게시물을 표시합니다. 모든 게시물 표시
레이블이 css인 게시물을 표시합니다. 모든 게시물 표시

2010년 8월 23일 월요일

트위터 MonkeyFly용 스킨 결정!

egoing 님께서 개발하신 Monkeyfly는 웹기반 트위터의 기능을 극대화시키는 확장이다.
Monkeyfly에서는 css를 활용한 스킨 기능을 지원하는데, 많은 능력자분들께서 css를 공개해주셨다.

그 중 내가 주력으로 사용해온 것은 희주(@jugug) 님의 CSS였다.

한동안 사용하면서 느낀 단점은 지정된 배경색이 원래의 배경을 다 덮어버린다는 거.
(물론, 개발자가 의도한 것임. 내가 느끼기에 단점이라는 것 뿐임)

그래서, 글꼴은 그대로 두고, 배경 및 색깔 부분만 제거해서 쓰기로 했다.
아래는 그렇게 수정된 CSS다.

body #header #logo img
{
    padding-left: 0 !important;
}
#content,.wrapper
{
    border-radius: 5px !important;
}
ul.top-navigation
{
    padding: 0.5em 0;
}
ul.top-navigation a
{
    border-left: 1px solid #cde;
    font: bold 11px tahoma !important;
    margin-right: 1px;
    padding: 0 0 0 5px;
}
ul.top-navigation li:first-child a
{
    border-left: 0;
}
ul.top-navigation a:hover
{
    text-decoration: none;
}
#update_notifications
{
    height: 46px !important;
}
#globalTab
{
    margin-top: 17px;
}
.status-content,.entry-content
{
    font: 13px 나눔고딕 !important;
}
.status-body strong a
{
    font: bold 11px Meiryo !important;
}
td.tdnest:nth-child(even)
{
    background-color: #f5f5f8;
}
#side_base
{
    border-left: 0;
}
#side
{
    width: 198px !important;
}
#side a
{
    font-family: tahoma !important;
    font-size: 11px;
    font-weight: bold;
}
.list-header,.list-header-inner
{
    border-radius: 5px 5px 0 0;
}
#footer-container
{
    min-height: 0 !important;
}
.read-mark
{
    border-bottom: 0 !important;
}
#expand_sidebar
{
    position: fixed;
    top: 82px !important;
}
#pb-side-box
{
    left: 0;
    top: 150px !important;
}
#pb-side-content li
{
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#pb-side-content li a
{
    font: 11px tahoma !important;
    padding: 1px !important;
}
#pb-side-content #primary_nav
{
    float: left;
    padding-right: 5px;
}
#pb-side-content #side_lists
{
    border-left: 1px solid #ddd;
    float: left;
    padding-left: 5px;
}
#pb-side-content .lock-icon
{
    width: 8px !important;
}
#pb-side
{
    border-style: solid;
    border-width: 1px 0 1px 1px !important;
}
#pb-side-top,#pb-side-bottom
{
    left: 0;
}

이렇게 수정된 CSS가 좀 길어보여서 압축해서 사용하기로 했다.
(사실, 이 CSS는 로컬에 저장되기 때문에 전혀 빨라지는 일은 없음 ㅎㅎ)

body #header #logo img{padding-left:0 !important;}#content,.wrapper{border-radius:5px !important;}ul.top-navigation{padding:0.5em 0;}ul.top-navigation a{font:bold 11px tahoma !important;margin-right:1px;padding:0 0 0 5px;border-left:1px solid #cde;}ul.top-navigation li:first-child a{border-left:0;}ul.top-navigation a:hover{text-decoration:none;}#update_notifications{height:46px !important;}#globalTab{margin-top:17px;}.status-content,.entry-content{font:13px 나눔고딕 !important; }.status-body strong a{font:bold 11px Meiryo !important;}td.tdnest:nth-child(even){background-color:#f5f5f8;}#side_base{border-left:0;}#side{width:198px !important;}#side a{font-weight:bold;font-family:tahoma !important;font-size:11px;}.list-header,.list-header-inner{border-radius:5px 5px 0 0;}#footer-container{min-height:0 !important;}.read-mark{border-bottom:0 !important;}#expand_sidebar{top:82px !important;position:fixed;}#pb-side-box{top:150px !important;left:0;}#pb-side-content li{padding:0 !important;border:0 !important;margin:0 !important;}#pb-side-content li a{padding:1px !important;font:11px tahoma !important;}#pb-side-content #primary_nav{padding-right:5px; float:left;}#pb-side-content #side_lists{border-left:1px solid #ddd;padding-left:5px; float:left;}#pb-side-content .lock-icon{width:8px !important;}#pb-side{border-width:1px 0 1px 1px !important;border-style:solid;}#pb-side-top,#pb-side-bottom{left:0;}

수정 및 배포를 허락해주신 희주(@jugug) 님께 다시 한번 고맙다는 말씀을 드립니다.

2008년 3월 9일 일요일

IE8 : ACID2만 통과하면 표준을 잘 준수하는 것인가?

제 블로그의 헤더는 원래 복잡한 <table> 태그로 구성되어 있었습니다.
<div><table>이나 아무거나로 만들기만 하면 된다는 매너리즘으로 중무장해서 만든 결과물이었습니다.
(다들 아시다시피, 현재의 웹은 <table>으로  레이아웃을 잡지 않는 것을 권고하고 있습니다)

물론, IE6/7이나 Firefox은 물론, Opera나 Safari까지의 모든 브라우저들에서 정상적으로 출력되었습니다.

그러다가, 이번에 Internet Explorer 8 beta 1이 나온 것을 보고 돌려봤더니… 제 블로그 헤더가 무참하게 깨져서 나오더군요.


아직 베타버전인 브라우저이기는 하지만, 언젠가는 <table><div>로 바꿀 생각을 했기 때문에 좋은 기회라고 생각하고, 몽땅 바꿨습니다.
덕분에 복잡하게 구성되어 일부 브라우저에서는 늦게 떴던 헤더가 깔끔하게 빨리 뜨도록 바뀌었습니다.

각 브라우저들에서 일일이 띄워본 결과 아무런 문제 없이 뜨는 것을 확인했습니다. IE8만 빼고 말이죠…



이렇게 깨지는 것이 왜 문제가 되냐면…

  1. 제가 사용한 태그는 아주 평범한 <div> 태그입니다.
    <table> 태그를 사용하지 않고, <div>를 사용하는 것이 현재 웹 표준과 IE8의 권고사항인데, 정작 <div>를 제대로 해석하지 못하고 있습니다.
    저는 헤더 전체를 <div position:relative;>로 지정하고, 세부적인 구성을 <div position:absolute;>로 지정해서 배치했습니다.
    #header { position: relative; float: left; width: 938px; height: 154px;}
    #hdrimgban { position: absolute; left:4px; top:22px; width:176px; height:120px;}
    #hdrimgm1 { position: absolute; left:188px; top:98px; width:64px; height:12px;}
    이런 식으로 말이죠. 이걸 제대로 출력하지 못한다니요…

  2. MS는 IE8이 ACID2 테스트를 통과했다고 대대적으로 광고했습니다.
    ACID2 테스트의 중요한 요소 중 하나는 복잡한 <div> 태그를 잘 해석하는가 하는 점입니다.

즉, 그렇게도 <div>를 잘 지원한다고 광고하는 브라우저가 기본적인 <div>를 제대로 렌더링하지 못한다는 것이 말이 안 되는 것입니다.

하지만 여전히 ACID2 테스트는 잘 통과하고 있습니다.
(뭐, 다른 ACID2 테스트를 통과하지 못한다는 문제가 있지만 말이죠…)

얼마전 nVidia에서, 또 예전에는 ATi에서 특정 프로그램에서만 빠르게 동작하는 척하는 드라이버를 출시한 것이 문제가 된 적이 있었습니다. ATi는 심지어 실행파일명을 바꾸면 느리게 동작하는 촌극도 보였더랬죠.

지금 IE8의 행보가 꼭 그 때의 비디오 카드/드라이버 벤더들의 행보와 비슷해보입니다.

계속 브라우저 점유율을 빼앗기고 있고, 표준에 대해서는 항상 말이 많은 MS가 이번에 뭔가 대형 사기극을 펼치고 있는 것이 아닌가하는 우려가 듭니다.

또 아래와 같은 엉터리 HTML의 세상을 만들기 위해 뭔가 음모를 꾸미는 것은 아닐까요?
<html
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:myns="http://internet.com/namespaces/smarttags">
<o:SmartTagType
name="customer"
namespaceuri="urn:schemas-fourth-coffee:contact"
downloadurl="http://www.fourthcoffee.com/download.asp">
</o:SmartTagType>
제발 정식버전에서는 이런 황당한 일이 없기를 빌어봅니다



2008년 2월 22일 금요일

투명 PNG를 IE6에서 보이게 하는 방법 소개 #2 : 쉬운 방법 - ie7-js 활용

사용자 삽입 이미지

투명 PNG를 IE6에서 보이게 하는 어려운 방법에서 적은 내용은 이 글을 적기 위한 서문이었습니다.

google code에서 배포하는 코드들은 여러모로 쓸만하면서도 간결한 것들이 많습니다.
Code Highlighter도 google code에서 배포하는 것을 티스토리에서 활용한 것입니다.

이 중 ie7-js/ie8-js는 css 표준을 IE가 잘 지원하도록 도와주는 유용한 스크립트입니다.

아니, 도와준다기 보다는 css 표준을 잘 준수한다고 최면을 건다는 편이 더 맞습니다. 레드-썬!

간단하게 몇 줄의 코드만 스킨(skin.html)에 추가하면 동작하며 IE 계열의 약점인 표준 미준수 문제를 많이 해결해줍니다.

ie7-js와 ie8-js의 주요 기능은 아래와 같습니다.

  • ie7-js(IE7.js) : MSIE 5,6을 IE7과 같이 동작하도록 최면을 검

  • ie8-js(IE8.js) : MSIE 5-7에서 지원하지 못하는 CSS 기능들을 구현하게 최면을 검
    ※ IE8.js에는 IE7의 기능이 모두 포함되어 있음

이 js 중 하나만 사용하면 투명 PNG 문제를 포함한 CSS와 관련된 여러가지 문제를 해결해줍니다.

사용법은 간단합니다. 아래의 코드를 스킨파일(skin.html)의 헤더에 삽입하면 됩니다.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
  type="text/javascript"></script>
<![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
 type="text/javascript"></script>
<![endif]-->
※ 앞에도 설명했듯이, IE8.js를 사용할 때는 IE7.js를 사용할 필요가 없습니다.

단, 투명 PNG 파일을 저장할 때 png 파일은 파일명이 반드시 -trans.png로 끝나도록 지정해야 합니다.
스크립트 내에서 -trans.png 파일인 경우만 별도의 렌더러를 호출하도록 해주기 때문입니다.

투명 PNG 외에도 이 스크립트들이 해결해주는 호환성 문제가 꽤 많습니다.
상세한 기능들은 IE7/IE8 시험페이지를 보시면 볼 수 있습니다.

덧, 티스토리에 글을 포스팅할 때는 파일명 문제때문에 정상적으로 투명 PNG를 활용할 수 없습니다.




2007년 12월 18일 화요일

css - 링크 밑줄을 점선으로 표시하기

웹 페이지나 블로그에서 링크를 표시할 때 밑줄이 없으면 링크인지 알기 어렵고,
밑줄이 있으면 약간 촌스럽습니다. (지극히 주관적인 느낌입니다)

일반적으로 css를 이용해서 밑줄을 표시하거나,
링크의 밑줄을 아예 없애는 것(text-decoration:none),이 일반적입니다.

그런데, 약간 다른 방식으로 밑줄을 점선으로 표시할 수 있습니다.
이렇게 하면 링크의 표시가 명확해지면서도 깔끔해집니다.



일반적으로 css 파일에서 link에 대한 style은 아래와 같이 표시됩니다.

    a:link { color:#666; text-decoration:none;}
    a:visited { color:#666; text-decoration:none;}
    a:hover { color:#666; text-decoration:underline;}
    a:active { color:#666; text-decoration:none;}

이 부분을 아래와 같이 바꿔주면 링크가 점선으로 바뀝니다.
두껍게 칠한 부분이 바뀐 부분입니다.

    a:link { color:#508; border-bottom: 1px dotted; text-decoration:none;}
    a:visited { color:#208; border-bottom: 1px dotted; text-decoration:none;}
    a:hover { color:#666; text-decoration:none;}
    a:active { color:#666; text-decoration:none;}

이렇게 하면 쪼금 더 맛깔스러운 화면을 만들 수 있습니다.
이렇게 적용한 샘플은 아래와 같습니다.

사용자 삽입 이미지

그리고, 점선의 색을 글자와 다르게 지정할 수도 있습니다.
아래와 같이 하면 점선이 분홍색으로 표시되고, 커서가 올라가면 빨간색 선으로 바뀌게 됩니다.

    .article a:link { color:#508;  border-bottom: #ffc0c0 1px dotted; text-decoration:none;}
    .article a:visited { color:#208;  border-bottom: #ffc0c0 1px dotted;  text-decoration:none;}
    .article A:hover {border-bottom-width: 1px; BORDER-BOTTOM-COLOR: red; border-bottom-style: solid;}
    .article a:active { color:#666;  text-decoration:none;}


적용한 샘플은요? 바로 위의 샘플 아래에 희미한 분홍색 점선줄 보이시죠.
그게 샘플입니다. ^^;;;