SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/06   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

font-weight:700 과 800의 차이

font-weight 비교

유저스토리북 메인 - font-weigt 비교

왼쪽부터 순서대로, Firefox 4.0 beta, IE 9 beta, Chrome 순입니다. 화살표로 표시한 부분(사용자 닉네임)을 보시면 앞의 두 브라우저와 크롬이 font-weight 처리가 다른 것을 보실 수 있습니다. Chrome 에서 보이는 두께가 우리가 일반적으로 지금까지 알아 왔던 bold(두껍게) 표현입니다. 앞의 두 브라우저는 이보다 더 두껍게 표현되어 있구요..

CSS 에서, 위 닉네임 부분에 적용된 font-weight 값은 bold 가 아닌 800 입니다. 지금껏 (물론 제가 아는 한에서) font-weight:800 을 표현해주는 브라우저는 없었습니다. 그런데 FF 4.0과 IE 9 는 앞으로 이 차이를 표시하려나 봅니다. :)

css 명세서에는 각 숫자는 그 전 단계의 숫자보다 두껍거나 같게 대응되기만 하면 된다고 되어 있다. 따라서 100,200,300,400 전부가 약간 얇은 하나의 폰트 변형에 대응될 수 있고, 500과 600 모두 약간 두꺼운 하나의 폰트 변형에 대응될 수도 있으며, 700,800,900이 아주 두꺼운 하나의 폰트 변형을 나타낼 수도 있다. 자신 보다 작은 숫자의 폰트보다 두께가 더 두껍다면 전혀 문제가 없다. 공교롭게도 이 수자들은 특정 폰트 변형의 이름이나 폰트 웨이트의 값에 맞추어져 정의가 되어 있다. 400은 normal 과 동일하도록 정의되고, 700은 bold와 대응되도록 정의되어 있다.

위 내용은 "에릭 마이어(Eric Meyer)의 CSS 완벽 가이드 117p. 폰트웨이트의 원리" 에서 발췌한 내용입니다.

400이 normal 이니까 대개 800을 bold 로 생각하시는 분이 많은 것 같습니다. 저 역시 그랬던 적이 있었으니까요. 아 물론 이것이 잘못 되었다는 것이 아닙니다. 그동안 이 차이를 표현해주는 브라우저가 없었다는 거죠. 어짜피 700이든 800이든 화면에 보이는 글꼴의 두께는 같았으므로, 700을 적든 800을 적든, 별 문제 될 것도 없었어요. 그런데 이젠 800 900 으로 작성할 경우, 본래 의도치 않은 결과를 보이게 될지도 모르겠습니다. 혹은 포토샵으로는 표현하기 힘든 두께의 글꼴을 디자인적으로 사용할 수 있겠다는 의미도 되겠지요? :)

한가지 흥미로운 점은 윈도의 기본 한글 글꼴 굴림,돋움 따위의 특정 크기 이하에서 비트맵으로 표현되는 글꼴(EBDT 정보를 담고 있는 글꼴)에선 역시 아무런 변화가 없다는 겁니다. 위 캡쳐한 그림에서도 영문 글꼴인 Arial 만(영문 닉네임에만) 적용된 것을 보실 수 있습니다. 윈도에서 말하는 클리어타입(안티앨리어싱 처리된 글꼴모양)이 적용되는 글꼴에서만 유효한게 아닐까 싶어요.

나눔고딕, 맑은 고딕 따위의 글꼴에서는 어떻게 처리되는지 아직 확인해 보지 않았습니다만. 아마도 700과 800의 차이가 있겠죠? :)

시간이 나는 대로, 100~900 글꼴 표현에 대한 간단한 테스트를 해 보겠습니다. 뭐 아직 두 브라우저 모두 베타 상태이니... (사실은 더 아는것이 없어서..) 조금은 여유를 가져도 되겠지요. 그러니 오늘은 여기까지만... :)

(유저스토리북 메인은 현재 font-weight: 700 으로 모두 수정된 상태입니다. 그래서 지금은 변화를 보실 수 없어요. 사실 발견한지는 좀 되었거든요...)

 

a:visited pseudo 선택자 스타일 제한?

얼마전 조금 이상한 점을 발견했는데..

크롬(chrome) 브라우저(ver.6.0.472.63)에서, a:visited 에 background-images 와 border 속성이 적용되지 않는 것을 발견했습니다. 관련된 정보를 구글링해 봤더니, stackoverflow 에서 비슷한 현상을 질문한 글이 있었습니다.

http://stackoverflow.com/questions/3788855/google-chrome-avisited-background-image-not-working

Jquery 로도 시도해 봤지만.. jQuery('a:visited').length returns 0 이라는군요.;

답변글 중에 Firefox 도 곧 그렇게 될거라는 이야기가 있습니다. 오늘 FF 4.0 베타를 설치했는데, 정말 Firefox 도 속성이 적용되지 않았습니다..

답변글에 링크된 문서인 (privacy-related changes coming to CSS :visited) 에 따르면 보안 문제로 a:visited의 처리가 바뀔꺼고.. a:visited pseudo 선택자에서 color 를 제외한 다른 속성이 제한될거라고 말하는것....... 같긴한데, 너무 어려운 이야기라 잘 모르겠습니다.ㅎ 위 링크글의 한국어 번역본 (CSS :visited에 대한 프라이버시 정책변화) 을 찾긴 했습니다만.. 역시 어렵긴 마찬가지네요. :)

아무튼, 브라우저별 테스트를 위해 간단한 테스트 페이지를 만들었습니다.

a:visited 테스트 페이지

어떻게 보이시나요? 스타일시트(CSS)에서 링크에 준 속성은 아래와 같습니다.

        a {
            color: blue;
            text-decoration: underline;
            padding: 4px;
            font-size: 18px;
        }
        a:visited {
            color: red;
            background: black;
            border: 5px solid #8da437;
        }
        a:hover {
            color: yellow;
            background: gray;
            border: 5px solid #8da437;
        }

링크를 클릭해서 :visited 상태가 되면 아래와 같이 보이는 것이 의도한 결과입니다. (IE 6 ~ 9beta), (FF 3.x) 에서 아래와 같이 보임을 확인했습니다. IE9도 아래와 같이 보였습니다.

css 의도한 결과

css 의도한 결과

하지만 webkit 기반의 chrome, safari 두개의 브라우저, 그리고 FF 4.0 beta 에서는 아래와 같이 보입니다.

webkit등 새버젼의 브라우저 테스트

Chrome, Safari, FF 4.0

정말 color 만 빨강으로 바뀌고, 다른 부분은 적용 되지 않습니다. background-image, background-color 모두 적용되지 않습니다.

hi8ar_blog_rp

최근글 목록

사실, 지금 보시고 있는 제 블로그 왼편 사이드바 최근글 목록(Recent post)에도 a:visited 일때 background-image(checkmark) 가 적용되도록 되어 있습니다. a:visited 에 배경이미지를 적용해서 사용자가 이미 방문한 글임을 표시하는 트릭(?)... 음 기술(?)은 꽤나 일반적으로 사용하는 방법이 아니었던가요? ^^;; Chrome, Safari, FF 4.0 으로 보고 계시다면 아무리 클릭해서 visited 상태로 만들어도 배경이미지가 나타나지 않는것을 확인하실 수 있습니다....;;;;;;

맥에서도 결과는 같았습니다. :) 웹킷계열은 이미 적용되지 않고 있었습니다. ( 한가지 특이한 점은 아이폰에 들어가 있는 모바일 사파리에서는 아직 그렇지 않았습니다 )

아무튼 뭐... 흥미진진하군요... :p 위 내용과 관련된 정보를 알고 계시거나, 혹시 제가 잘못 알고 있는 사항이 있다면 알려주시면 감사하겠습니다!

역시나 읽지는 않을거지만 링크기록...

 

BookSocial

북소셜(BookSocial) 사이트 보셨나요? ^^

북소셜 메인페이지

북소셜은 유저스토리북트윗믹스가 함께 하는 책 추천 이벤트입니다. :) 좋은 책을 추천하는 프로젝트 북소셜! 북소셜은 트윗믹스 위젯과 트위터를 통해서 책에 대한 이야기를 나누고, 모아 봅니다. 페이스북의 좋아요 버튼으로 페이스북 친구들에게 알려줄수도 있습니다. 마음에 드는 좋은 책을 발견했다면, 유저스토리북 내서재에 추가해 보세요! 물론 온라인 서점에서 바로 구입할 수도 있습니다.

첫 추천 도서 목록은 5throck 님이 추천해 주신 컨설턴트와 MBA 가 읽어야 할 추천도서 150권입니다. 주제가 좀 어려워 보이긴 하지만, 사실 책 목록을 살펴보변.. 누구나 읽으면 좋을만한 교양서적 부터.. 여행기, 자기계발서 까지 다양한 책이 나열되어 있습니다. 책 읽기를 그다지 즐기지는 않는 저도 이 책 목록에서 무려(?) 2권의 책을 구입했습니다. ㅋ

지난 8월 23일 부터 진행된 북소셜 이벤트는 9월 13일까지 진행될 예정입니다. 그간 트위터에서 모아진 트윗의 수가 130여개 정도 되는군요. :)

다음 책 추천 이벤트에 대해서는 아직 확실히 정해진 바는 없습니다만, 다음 추천 책 목록이 있다면.. 좀 더 다듬어진 페이지를 통해 제공할 예정입니다.

아직 북소셜 페이지를 보지 못하셨나요? 지금 만나보세요!

http://booksocial.net

북소셜 메인 페이지

보시고 평소 좋아하던 책이나 보고 싶은 책을 발견하신다면.. 이벤트에도 참여해 보세요! 9월 13일까지 책에 대한 이야기를 남겨주시는 분들 중 20명을 선정하여 준비한 책 선물도 드립니다.. :)

쓰다보니 광고글 처럼 되어 버렸네요.. :p 티 안나게 잘 쓰려고 했는데.. 돌려 말하기가 쉽지가 않아요. 깔깔~

 

kooo - mosaic

kooo_mosaic

얼마전에 공개한 Mosaic 테마 입니다. :) 아쉽게도, 제 맥북 화면은 좀 작아서 2줄로만 보입니다만.. 모니터 해상도가 1920px 라면, 4줄씩 보일겁니다. (이게 좀 변신하는 맛이 있어요! :) css3를 지원하는 브라우저에서 더 잘 보입니다! FF, Chrome, Safari 등에서 말예요. 사진을 모아 보기도 좋고, 저처럼 뮤직비디오 따위의 동영상들을 모아 두실 수도 있어요.

still dusky
luminant

환경 설정 - 쿠 테마 설정하기 를 봐 보세요! 아직은 미흡한 녀석부터 제법 그럴싸한 테마까지..... 이제 제법 많아 졌습니다. gentle, luminant, still dusky, tender basic.. 그리고 민정님이 만드신 tiara 까지~

네, 쿠는 아직 딱히 정해 진게 없어요. 아주 아주 가벼운 글쓰기? 블로깅? 툴 정도랄까? 쿠 메인 페이지에 할 수 있는 것들에 대해서 정말 정말 간단하게 설명?.. 아니 나열.... 훗, 아이콘들이 나열되어 있습니다. :p

http://kooo.net

왠지 시크해 보이려고, 딱 캡쳐한 이미지만 올려두고 말려고 했는데.. 이거야 원... 말이 너무 길어져 버렸습니다... :p

 

nate 블독의 디자인..

http://blogdoc.nate.com/list/

그 기능이니, 검색의 quality니 그런건 일단 차치하고..

그 디자인이 허무하네, 썰렁하네, 휑하네, 성의없네, 장난하네, 쓸데 없이 넓은 공간을 차지하고 있다는 둥, 이러쿵, 저러쿵, 하도 까여서 그 디자인 좀 구경해 봤음..

음... 난 괜찮은데? 얼마나 좋아.. 멋지지 않냐? 큼직큼직하고, 널찍널찍하고, 여유 있고 시원시원해 보이지 않아? 봐도 뭔지 모를 잡다한 거 하나도 없고 말야.. 아무리 봐도 그렇게 보이지 않는 다면, 빈 공간 하나 없이 다닥다닥 붙어 있고.. 있어 봐야 관심도 없을 백화점식 포털 테이블에 네 눈이 길들여저 버린거겠지... 아이고, 언제까지 마우스로 픽셀 구분하면서 클릭질 해야 만족들 할꺼니... :(

이런 디자인에 대한 반응이 이렇게 차가울 줄이야.. 허허..

 

Opera 10 정식 버젼

opera install

오페라 10 정식 버젼이 나왔습니다. 무엇보다 비쥬얼 탭이 눈에 띕니다. :) 9버젼에서도 그랬었는지 기억이 나질 않지만, 탭이 위에 있고, 브라우징 영역이 탭에 종속 된 느낌입니다. FF의 아이콘이 그랬듯, 아이콘도 더 빨갛고 커지고 선명해 졌습니다. Opera Turbo라는 새로운 기능도 있나 봅니다. 세련된 디자인이야 뭐 그네들이 말하는 만큼 그렇고... 모던 브라우저끼리, 속도 경쟁이야 이제 뭐 의미가 있을까요? :)

오페라10 의 비쥬얼탭

비쥬얼탭

좋습니다. 그렇지만, 좀 뭐랄까.. 생뚱맞은 그 느낌... 어쩔 수 없군요. :)

http://hyeonseok.com/soojung/browser/2009/09/01/546.html

 

IE8 자동 업데이트

윈도 자동업데이트 IE8

그저 많은 사람들이 무심코 업데이트를 누르길 바랍니다... :)

 

한장 한장 넘기는 재미에....

꺄르르.. :)

 

텀블의 소스....

를 까 봤더니...

<!--
    
        .                                  .o8       oooo               
      .o8                                 "888       `888               
    .o888oo oooo  oooo  ooo. .oo.  .oo.    888oooo.   888  oooo d8b     
      888   `888  `888  `888P"Y88bP"Y88b   d88' `88b  888  `888""8P     
      888    888   888   888   888   888   888   888  888   888         
      888 .  888   888   888   888   888   888   888  888   888     .o. 
      "888"  `V88V"V8P' o888o o888o o888o  `Y8bod8P' o888o d888b    Y8P

-->

이런 주석이 있더라... :)

Outdated IE6

IE6 으로 접근하면 표정이 일그러진다.. :-(

TAG ,
 

romantic Red

RomanticRed 테마의 프리뷰

RomanticRed

민노씨의 유명세에 빌붙어 보려고, 민노씨에게 반강제로 떠 넘긴 테마.. :) 애초엔 이름도 없고, 빨강도 아니었으나, 어쩌나 보니 농염한 짙은 빨강으로 포인트?.. 썩 로맨틱하진 않지만, 이름이라도 로맨틱이라 달아두면, 로맨틱해 보이지 않을까 하는 단순한 사고에서... (솔직히 이름은 TV광고에서 따왔다..) 깔깔~ 우습지만 내맘대로 Premium 이라고 적어놨다.... :p

http://minoci.net/

http://hi8ar.net/page/service