'웹표준'에 해당되는 글 3건

  1. 2008/04/15 Martian Headsets
  2. 2007/12/21 IE 접근금지..? (2)
  3. 2007/02/06 font-size: em을 처음쓰시는 분들을 위한 간단한 팁 (12)
지금 웹이 개판(?)인것에 대해 Joel on Software 이 나름의 분석을 하고 적나라한 비판을 했습니다.
꼭 읽어보시길 권합니다.

http://www.joelonsoftware.com/items/2008/03/17.html

영어가 부담스러우시다면.
http://enzine.tistory.com/category/%5BIT%5D%20Joel%20on%20Software
완벽한 한국말은 아니지만 저같은 영맹에게는 너무나 큰 도움이 되실 겁니다.
thx 4 행복한고니
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/120 관련글 쓰기

댓글을 달아 주세요

http://www.getipodwizard.com 를 IE로 접근해보면 아래와 같은 말이 뜬다.
FireFox or W3c browser is needed
You are using Internet Explorer
This Browser does not load this page correctly
흠..이런식으로 특정 환경에서만 정보를 제공하는건 옳지 않다.
그래 너 얼마나 표준 잘 지키나 함 보자 ㅡ,.ㅡ

"일단 IE는 꺼져라!" 라는 의미가 있는 메인 페이지에서 가운데 떡 하니 있는 이미지....대체텍스트도 제공 안한다.(장난하냐..?)
뭐냐..W3C를 지키는 브라우져를 쓰라고 알리는 페이지에서 img 의 alt 도 안달려있고..
그냥 간단하게 validate(ie로 접속 후 소스보기 해서 소스들을 복사해서 http://validator.w3.org/ 에서 검사) 해봤더니
장난하냐..? 18 Errors 란다..

여기서 호기심이 생겨서 FF(FireFox)로 들어가서 validate(Web Development에서 Validate HTML, 단축키는 Ctrl + Shift + H)해봤더니..
후덜덜 80Errors 장난쳐..?
Error Report 를 보니깐 대부분 br인데..
대문자를 사용했고(XHTML에서는 element와 attribute name은 소문자를 사용하여야 한다. 물런 value는 상관없다. Element and attribute names must be in lower case)
empty tag 는 꼭 / 를 사용해서 닫아줘야 하는데, 닫아주지 않았다. (For non-empty elements, end tags are required)
(http://www.w3.org/TR/2000/REC-xhtml1-20000126/#diffs 를 참고)

흠 사실 사소한것이긴 하지만 기본적인 부분이다.
이런 기본적인 것도 안지키면서 DTD는 XHTML 1.0 Strict 로 하고 W3C 브라우져로 접속하라고..?
말이 나와서..Firefox가 IE보다 상대적으로 더 표준을 준수할 뿐이다.
FireFox를 정말로 W3C Browser 라고 할 수 있을까?
FF가 W3C Browser가 아니듯 IE도 아닌데

그리고 마지막으로 비아냥 거림의 멘트
Don't want FireFox? Love your Internet Explorer? Continue Here.

과연 이 사이트가 이런말할 자격이 있을까..?

제대로 알아보지도 않고 남들이 옳다고 하니깐 그냥 맹신해버리는 사람들 문제다.
최소한 무엇이 표준인지는 알아봐야 하는거 아닌가..?(validator 한번만 돌리면 되는것을..)
자신이 표준을 지키지도 않으면서 표준 지키라고 호들갑이니..
에휴, 이런 사람들 때문에 웹표준 안티가 생기지..
차리리 모르면 나처럼 가만이라도 있던가..
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/83 관련글 쓰기

댓글을 달아 주세요

font-size정의시 px을 쓰지말고 em을 쓰기를 권고하고 있죠..
근데, 임마가 참으로 성가시게 굴때가 있습니다.

그 이유는, 상대적이기 때문이죠..
px같은 절대적인 값이라면, 솔직히 코더(Coder)들이 코딩(Coding)하기엔 더욱 쉽습니다.(저만 그런걸지도)
하지만, 줌브라우징 기능때문에 em을 권고하죠.
(물런, 이것외에도 여러가지가 있지만 줌브라우징은 그 이유중 하나입니다. http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/)

자, 그럼 무엇이 성가시게, 골때리게 구냐..
이 녀석들은 폰트크기..즉 위에서 선언된 font-size와 모종의 뒷거래(?)가 있다는 것입니다.
예를들어,

<style type="text/css">
body { font-size:1em; }
.Mother {font-size:1em;}
.Child01 {font-size:0.5em;}
.Child02 {font-size:2em;}
.Child03 {font-size:2em;}
.Baby01  {font-size:2em;}
</style>


<div class="Mother">Mother
    <div class="Child01">
        <div class="Baby01">Child01(Baby01)</div>
    </div>
    <div class="Child02">Child02</div>
    <div class="Child03">Child03</div>
</div>


가 있다고 가정을 할경우, Baby01 과 Child02~03은 코드결과적으로 보면 font-size:2em입니다.
하지만, 실제로 돌려보면, 틀리게 나옵니다.

그 이유를 확인하신다면..

body { font-size:5em; }


으로 수정해보세요, 그럼 제가 한말을 바로 이해하실 수 있을 겁니다.

"상대적" 이기 때문이죠.



그리고, 다른부분은..
위의 상황과 연관된 경우인데..만약 같은 class를 폼 컨트롤러(input, textarea.....)와 함께 사용한다고 가정을 할경우..
눈에 보이는것(위의 div)과 같지 않은 출력이 나올 수 있다는 것이지요..

예를들어, Baby01 class를 같이 쓴다고 가정을 하고..
div에서는 대략 13~4px정도의 크기로 출력이 되죠
하지만, 이걸보고 폼 컨트롤러에 적용을 시킬경우, 13~4px정도의 글자크기가 출력되는게 아니라.
순수하게 2em 즉 200% 글자가 출력이 됩니다

<textarea class="Baby01">Baby01</textarea>

이 부분은 상속을 받지 않기때문에, "모종의 뒷거래"가 일어나지 않게 되는 것이지요~
이해하시겠죠..?

그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)

<textarea class="Mother">Mother</textarea><br />
<textarea class="Baby01">Baby01</textarea><br />

<input type="text" class="Mother" value="Mother"><br />
<input type="text" class="Baby01" value="Baby01"><br />
<input type="button" class="Mother" value="Mother"><br />
<input type="button" class="Baby01" value="Baby01"><br />


즉, form control에는 상속이 되지 않는거죠.
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.

왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim hiphapis

TRACKBACK http://hiphapis.net/trackback/16 관련글 쓰기

  1. 웹표준과 폰트 크기 - 접근성  삭제

    2007/02/09 12:00TRACKBACK FROM 일모리와 웹표준

    폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그...

댓글을 달아 주세요

  1. 예제와 함께 좋은 팁을 소개해 주셨네요. 첨언하면, 상대적인 단위는 바로 부모의 값을 1em 또는 100% 으로 인식하게 됩니다. 따라서 body에 75%의 서체크기를 적용하면 body는 75%의 서체크기를 갖지만 p는 body에 적용된 서체크기를 기준으로 다시 75%를 계산하기 때문에 body 보다 75% 더 작아지게 됩니다. 결국 75%의 75%가 되는거죠. 더 헷갈리지 않았나 모르겠네요 ㅜㅜ;

    2007/02/06 19:35 [ ADDR : EDIT/ DEL : REPLY ]
    • 헉, 제가 포스팅한 내용이 찬명님이 적으신 코멘트인데;
      저렇게 긴 문장을, 이렇게 짧게 표현하시다니..
      역시 ㅠ,.ㅠ)=b

      (예~전에 CDK에 올렸던것을 살짝 수정해서 포스팅한거에요 ㅎㅎ)

      2007/02/09 12:30 [ ADDR : EDIT/ DEL ]
    • 빽짱구

      찬명님 그럼 예를들어 body에 0.75em 을 줬을 경우 그안에 있는 h4 클래스에 폰트가 0.75로 보일려면 1em을 줘야 한다는 말씀이신가요? 좀 햇갈리는 부분이 있어서요.

      2007/11/03 22:10 [ ADDR : EDIT/ DEL ]
    • 넵 맞습니다.

      상대적인 단위이기때문에 그대로 상속을 받게되죠..
      그렇게 되다보니..
      상속받은것의 x% 이렇게 됩니다.

      2007/11/05 16:49 [ ADDR : EDIT/ DEL ]
  2. 어쨌거나 WCAG 1.0 > 체크포인트 3.4에서 권장하고 있으며 중요도2[되도록 지켜야 할] 에 해당하는 필수 팁! ^^a

    2007/02/07 13:13 [ ADDR : EDIT/ DEL : REPLY ]
  3. 정찬명님도 좋은 설명곁들여 주시고 좋은 글이네요.

    한가지 더 보태자면 보통 쓰는 9pt, 혹은 12px 이 0.75em 입니다. 여기서 0.75를 인식을 못하는 브라우저가 있으니 0.76em 을 보통 쓰게 됩니다. 0.01 의 비밀이죠 ^^
    물론 현실적으로 과연 얼마나 되는곳에서 em 을 쓰게 될런지 말입니다... 일단 백터폰트가 많이 퍼지면 혹 많아지게 될수 있긴 하겠죠. :)

    2007/02/09 11:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛, 그렇군요..0.01이 세상을 바꾸는군요(?)
      ㅎㅎ

      제 블로그에선 처음 뵙죠~?
      무지 반갑습니다..ㅎㅎ

      2007/02/09 12:29 [ ADDR : EDIT/ DEL ]
    • 아 그러고 보니 인사 남긴다고 하고는 그냥 'save a comment' 를 눌러버렸네요 ^^
      블로그 넘 좋아요 그냥 계속 이렇게 꾸준히 적어주세요 저처럼 들쑥날쑥하면 미움받아요 ^^;;;

      2007/02/09 13:32 [ ADDR : EDIT/ DEL ]
    • 아...저는 일모리님이나 찬명님처럼 인기블로거가 아니라,
      어느 누구 하나 관심가져주지 않는 블로거라..ㅠ,.ㅠ

      미워할 사람도 없어요..

      부럽죠..??
      (그런데 왜 제 마음은 ㅠ,.ㅠ)

      2007/02/09 16:13 [ ADDR : EDIT/ DEL ]
  4. 일모리님, 미움도 곧 인기와 비례해서 그래요 ㅋㅋㅋ
    기다림님, 인기블로거라고 띄워줘서 쑥쓰럽!

    2007/02/10 23:03 [ ADDR : EDIT/ DEL : REPLY ]
  5. Thank you for sharing this information. The information was very helpful and saved a lot of my time.

    2011/10/27 16:40 [ ADDR : EDIT/ DEL : REPLY ]