이번 me2day flickr 연동 문제와 관련해서 flickr의 web2.0이란건 어쩌면 달면 삼키고 쓰면 뱉는게 아닐까 싶은 생각이 든다.
flickr라는 서비스는 웹을 통해 사진을 업로드 하는 온라인 디지털 앨범이라는 서비스로 전세계의 사용자와 다양한 사진을 업로드하고 공유하자는 취지가 담긴 서비스라고 생각된다.
미투데이 서비스는 이런 flickr을 통해 사진업로드를 제공받고 등록된 사진데이터는 미투데이 서비스를 거치지 않더라도 flickr 서비스에서 다른 사용자들이 구경할 수 있고 의견도 달수 있는 장점이 있어 그로 인해 다른 네트워크가 형성되고 관심사가 추가되면서 발전되는 형태로 나아갔고, flickr서비스가 추구하는 방향 역시 flickr웹사이트를 통해서만 사진 데이터를 이용할 수 있는 것이 아니라 공개된 API를 통해 다양한 방법으로 활용이 가능하도록 제공했고 지금도 달라진 것은 없다고 생각된다.
이런 서비스에 집단지성이라는 개념을 적용하면서 사진이라는 하나의 주제(데이터)에 대해 여러 종류의 태그가 붙게 되고 이 데이터에 여러 사람들이 연관된 태그를 연결시켜 다른 사람들과 데이터를 공유하는 방식을 적용하고 있으며, 이런 점이 Flickr가 생각하는 web2.0 이라고 생각 되지만 Web2.0 서비스의 참여, 공유를 바탕으로 생각해본다면 자발적인 참여와 활발한 활동을 추구하는 flickr에서 미투데이 계정 차단 이라는 결론을 보고있자면…
매우 유감이라고 표현하고 싶네..
Flickr의 황당한 대응에 모든 상황에 확신이 없어진다..내가 뭘 잘 못 알고 있는걸까..
난 그저 몇일전 flickr 프로 계정 결제가 아까울 뿐이다…에라이..
오늘을 기억해야지..
Posted in a daily, News | 3 Comments »
미투데이 서비스는 글쓰기를 개편하면서 처음 글을 쓰려는 사용자의 사용성을 더 편하게 하고, 접근성을 높이기 위해 노력중이다.
개선사항 중 입력폼의 비쥬얼 적이면서도 실용도를 높일 수 있는 기능들을 탑제하다 보니 작게 만들어 놓거나 기능이 사용되고 실체는 드러나지 않게 배경색 위에 위장해 놓은 부분이 Webkit 계열(safari, chrome)브라우저 에서는 포커스가 위치하면서 실체가 들어나 버리게 된다…
(이런 테두리의 압박이…)
그래서 뭔가 저런 시스템 적인 기본기능처럼 보이지만 없앨 방법이 있지 않나해서 찾아보니 이런 경우엔 css2 스팩에도 있지만 IE에서는 지원하고 있지 않는 속성인 outline 속성으로 간단히 없앨 수 있었다.
코드는 아래와 같다.
textarea, input {
outline-color:-moz-use-text-color; outline-style:none; outline-width:medium;
}
참고로 위 속성을 사용하면 outline 속성이 firefox 에서도 적용되기 때문에 outline-color:-moz-use-text-color; 속성으로 색상을 지정해 줘야 한다.
그리고 추가로 사파리나 크롬에서 textarea 의 사이즈를 사용자가 마음대로 조절할 수 있는데 만약 이 기능을 막으려면 아래 코드를 넣어 간단히 제어할 수 있다.
textarea {
resize:none;
}
입력 폼 컨트롤러에 대한 제어는 일부 사용자의 입장에서는 다소 민감한 부분일 수 있다. 어떤 곳에서는 오히려 좋은 기능이 될 수 있으니 서비스에 맞게 사용하면 좋을 것 같다.
Posted in css, hack, browser | 3 Comments »
2006년 12월 즈음 IE7이 출시되고 있던 것으로 기억된다.
(아마도 beta기간이 아니었나 싶다..)
당시 내가 속한 회사에서 제작 중이던 웹 사이트는 링크의 url을 기본적인 사이트 주소를 넣거나 #에 name을 붙여서 이동 하게 하거나 javascript로 이동하는 링크를 사용 했었다. 아마 대부분의 사이트에서 페이지 이동이나 컨텐츠 이동을 이렇게 하지 않았을까?
Link의 Pseudo Class :visited
IE가 아닌 브라우저를 이용해 웹 페이지를 제작해 본 사람이라면 링크의 url 경로가 스크립트로 구성 되어 있으면 :visited style이 적용 되지 않는다는 것은 잘 알 고 있을 것이다.
link의 pseudo-class중 :visited란? user agents에서 한번이라도 방문을 했는지 안 했는지를 구분하여 방문 하지 않은 페이지라면 :link로 인식 할 것이고 방문했다면 :visited로 인식하는 것을 말한다.(방문여부는 IE6 이하에서는 javascript 로 넘기는 링크라도 :visited를 인식하는 것을 보면 브라우저마다 기준이 다르지 않을까..?)
그렇다면 방문기록이 남을 수 없는 javascript로 이동한 경로는 그렇다 치더라도 #name으로 이동한 페이지는 방문 기록이 남게 된다.
정상적이라면 방문기록과 href 의 url값을 비교하여 같다면 :visited로 인식이 되어야겠지만 IE7은 그렇게 되지가 않는다. 왜 그럴까?
그 당시 CDK에 글도 올려 보고 여러 사람들과 논의도 해 봤지만 그다지 중요하다는 생각이 들지 않는지 소리소문 없이 사라져 버렸는데 최근에 다시 듣게 되어서 정리하게 됐다.
CDK의 글을 보면 MS고객문의 답변 내용이 있는데 그 당시에는 답변에 대해 정확하게 정리가 되지 못하다 보니 고객문의 글을 100% 이해하기가 힘들었다. 특히 design이라는 단어가 뭘 뜻하는지 전혀 몰랐던 지라.. 그대로 묻혀 버렸는데 IE8에서도 동일하게 발생하고 있다 기에 다시 문의를 해본 결과 조금은 더 상세하게 답변을 들을 수 있었다.
답변 내용은…
[제목]
IE7: script에서 css visited 속성 사용할 수 없음.
[요약]
IE 7.0에서 CSS a:visited 속성을 기술해 주어도 href 에 # 이 들어가거나 javascript:xxx 형식으로 기술되면 기술된 속성이 반영되지 않아 색깔 구분이 안됨
샘플예제
<style> a:visited { color:blue } </style> <a href=”a.htm”> <– 정상동작
<a href=”javascript:showDetail(’b.htm’)”> <– a:visited CSS 반영안됨
<a href=”#b” onclick=”javascript:showDetail(’b.htm’)”> <– a:visited CSS 반영안됨
[원인]
Internet Explorer 7 의 강화된 보안 디자인으로 인한 현상으로, IE7 에서는 script 내에서 url history 정보를 보지 못하도록 디자인 변경되었습니다.
이로 인해 script 에서 CSS style 의 visited 속성이 적용되지 않는 것입니다.
[해결 방법]
고객사에서 관련 코드 수정하여 문제 해결.
제목이 script 사용으로 :visited가 안된 다고 되어 있지만 #이 들어도 마찬가지다.
좀 더 내용을 추가하자면 스크립트를 이용하여 이전 history 정보를 악용한 악성 사례들이 있어서 IE7 부터는 의도적으로 막았다고 한다.
자주 일어나는 일이 아니라서 잊혀져 있었던 일인데 원인을 확실히 알게 되어서 좋지만 이런 이유로 #name으로 이동하거나 링크 이동 후 자동으로 위치로 이동하기 위해 사용했던 링크 주소 방식은 방문기록에는 남지만 :visited로 인식하지 않는다니 아쉬움 생긴다.
해결방법?
IE에서는 보안정책이 강화되어 바꿀 수 없다고 하니 코드방식을 바꿔야 하지만 원천적으로 경로#name 을 인식하지 않게 되었으니 :visited를 인식할 수 있는 방법은 없을 것 같다
MS에서 제공해준 해결 방법이 있지만 사용하고 싶지 않은 건 나 뿐일까….;;
Posted in a daily, web standard, web accessbility, css, browser | 11 Comments »
이 문제로 대략 작업중 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
