MS에서 IE8 부터 적용이 가능한 css extension을 제공한다고 한다.
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
기존 속성에 -ms- 를 붙여서 사용하면 되며 내용과 적용되는 예시속성이 있는데…
내용을 살펴보면 세가지 사항에 대해 -ms-를 붙여 사용할 수 있다고 한다.
- CSS 스팩에 정의되어 있지 않은 MS 확장 속성일 경우
- CSS 스팩에 정의되어 있지만 W3C에서 아직 권고후보 상태인 경우
- CSS 스팩에 정의되어 있는 속성
대략 이런 속성에는 적용해서 사용 할 수 있다는데 쉽게 말하면 IE전용 속성이나 css속성중에 IE가 인식하는 css 범위에서는 모두 사용이 가능하다는 이야기 아닌가? 이걸 보면 사실상 IE8 전용 css hack 이라고 말하는 편이 나을것 같다..
아무튼 filter 속성의 opacity값 문제로 찬명님과 블로그댓글 채팅(?)ㅋ 중에 몇 가지 안 사실은 -ms-로 설정할 경우 속성값은 따옴표(”") 로 감싸줘야 한다는 것이다.
예를들면..
opacity속성을 사용해서 투명도를 조절할 경우 크로스브라우저를 위한 코드여야 한다면 앞으로는 이런 코드가 되어야 한다.
#selector {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
또는
#selector {
-ms-filter:”alpha(Opacity=50)”;
filter:alpha(Opacity=50);
opacity: .5;
}
이렇게 해야 한다.
좀 의문인건 filter 속성경우 -ms-를 붙여서 사용해야만 IE8에서 실행되는데
IE전용 속성인 scrollbar- 속성 경우는 -ms-를 붙이지 않아도 된다.
아직 beta단계라서 그런건지.. ie속성을 ie에게 배신당한 기분은 나만 느끼는건가.. -_-;
Posted in a daily, News, css, hack | 4 Comments »
happy naked day! 
Well, we’re back from last year, and Naked Day ‘07 is taking the web to full nudity on April 5th.
Dustin Diaz가 웹표준을 알리기 위한 재미있는 이벤트를 한다. 이 행사는 4월 5일 하루동안만은 XHTML로 제작된 사이트의 구조적 내용이 CSS를 적용하지 않아도 의미에 맞는 마크업만을 이용해도 컨텐츠 이해에 무리가 없다는 것을 보여주는 이벤트 이다.
css와 불필요한 자바스크립트도 살짝 벗어놓으니 블로그가 조금은 가벼워진듯해서 기분이 좋구만.
비록 내 블로그가 워드프레스로 제작되어 아직 최적화튜닝 작업을 하진 못했지만 웹표준을 알리기위한 한명에 지원자로써 참여를 했다. 디자인도 없고 온통 텍스트에 모양도 안이쁘지만 눈에 보이는것이 전부가 아니라는걸 다시한번 생각해봐야 하지 않을까..?
Posted in a daily, web standard, News | 4 Comments »
이직을 한지 어느덧 2주가 훌쩍 흘러버렸다.
회사를 옮기자마자 바로 일에 투입되어서 진행은 하고있지만 도통 내가 지금 뭘 하고있는건지..;;
전에도 사이트를 웹표준사이트로 개편한답시고 진행했었지만 내가 본 그 사이트는 새옷만 입었을뿐 알맹이는 썩어들어가는 사이트고, 지금 진행중인 사이트는 그야말로 판타지 소설을 쓰고있는중이다…
처음 사이트를 훑어 봤을땐 “아..퍼블리셔(코더)들이 좀 협업할때 뭔가 안맞았나? 스타일가이드는 완전 무시됐네?” 라고 생각했었지만 지금은 이해가 갈만하다. 난 이 프로젝트에 그리 큰 비중을 차지하지않고 관여가 덜 되어있어서 다행이지만 내가 표준코딩+css 개발 작업자였다면 현업 담당자들 한 이틀 잠도 안재우고 공부부터 시켰을지도..
자세한 전후사정은 모르지만 우선적으로 내가 본 이 프로젝트의 현헙담당자들의 표면자세는 대략 이렇다…
담당자는 웹표준에 전혀 알지도 모르고 그저 레이어코딩이라고만 알뿐이고, 스타일 가이드가 있었음에도 불구하고 이미 거의 8~90%가 진행된 프로젝트에서 디자인적 수정사항을 전혀 규칙에 맞지않게 그때그때 기분에따라 혹은 보이는 화면에 분위기에 따라 그렇게 바꿔달라고 요구하는 실정이니.. 구조와 표현의 분리에서 효율성을 전혀 생각하지않는 그저 이런식의 코딩만 머리에 떠올린 수정사항이라고 밖에 생각이 안되는것이다.
내가 예전 작업한 사이트는 공공기관사이트라서 공공기관웹접근성지침이라던지 위에서 내려오는 지침을 그대로 따라야만 했기때문에 억지로라도 지키기위해 했다고 본다면 적어도 그에 맞게 만들고나서 유지관리를 할 수 있는 자세는 되어야하지 않겠나.. 생각되고,
지금 하고 있는 프로젝트도 마찬가지다 로그인자체가 IE밖에 할 수 없도록 Active-x 로 동작하게 해놓고선 웹표준으로 작업해달라고 했다던 이유도 모르겠거니와 프로젝트가 끝났을때 유지관리할 사람도 마련되지 않은상태에서 전혀 이해가 가지않는 수정요구만 해대는 이상황에서 왜? 끝까지 css와 마크업을 분리해달라고 하는건지.. 사이트 용도가 사내인트라넷임에도 불구하고 왜 html 과 css 를 분리해달라고 하는건지..(분리를 했는데 왜 css 파일마다 100kb 가 넘어가는게 많은지..-_-;; css파일이 50가지가 넘는건 또 뭔지..)
이러다 올해 블로그 글들은 죄다 울화통 터져서 올린 글 밖에 없는거 아닌지 모르겠다..ㅠㅠ
까칠하고 답답하고 답답해서 일이 손에 잡히지 않고 한숨밖에 안나온다..
그냥 나도 현실에 적당히 마춰주며 살까나..? ㅋㅋ;
요즘은 이런 코메디같은 나날인데 의외로 지루하다..
Posted in a daily, web standard, web developer | Comments Off
이 문제로 대략 작업중 3시간을 졸리움과 지겨움을 이겨내며 소스를 이리저리 고쳐봤지만 해결되지않아
정찬명 님에게 조언을 구해 문제에 대한 원인이라도 구할수 있어서..
그리고 대략 처음으로 작업중에 문제를 발견해서 이렇게 글을 올릴수 있어서 우선 굉장히 기쁨을 말로는 다 표현할수가 없습니다^^;
작업중이였던 소스는 올리기가 민망해 정찬명 님이 적절한 예제로 표현해준 소스를 올립니다 ㅎ;;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
* { font: small "돋움", Dotum, AppleGothic, Sans-serif; margin: 0px; padding: 0px;}
ol { display:block; overflow:auto; padding-left:30px}
ol li { float:left; clear:both; display:list-item;}
</style>
</head>
<body>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
<li>넷</li>
<li>다섯</li>
<li>여섯</li>
<li>일곱</li>
<li>여덟</li>
<li>아홉</li>
<li>열 </li>
</ol>
</body>
</html>
지금까지 list 태그를 쓰면서 블릿은 거의 이미지를 background 를 이용해서 표현했지만
number 를 표현하기위해 ol 태그에 list-style:decimal 코딩하던차에 발견했습니다.
1. 일
2. 이
3. 삼
4. 사
5. 오
6. 육
7. 칠
8. 팔
9. 구
10. 십
물론 처음엔 이런 결과가 나오리라 생각했지만
FF에서 확인후 IE에서 봤지만 결과는….-_-;;
<li> 를 float 시키면 list-style 속성이 제거됩니다. 이것은 IE, NN, OP 공통적인 렌더링 결과로 표준 렌더링 방식임에 틀림없습니다. 그러나, <li> 에 대하여 display:list-item 속성을 추가해 주면 float 된 <li> 라 할지라도 list-style 이 적용됩니다. 그러나, 여기서 또 한번의 반전이 있습니다. IE 는 <li> 가 float 되면 display:list-item 속성을 주더라도 list-style 이 렌더링 되지 않는다는 겁니다.
FF와 IE에서 비교해보시길..
Posted in web standard | Comments Off
