달력

09

« 2010/09 »

  •  
  •  
  •  
  • 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
  •  
  •  

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

  1. 2008/04/15 Martian Headsets
  2. 2007/12/21 IE 접근금지..? (2)
  3. 2007/02/06 font-size: em을 처음쓰시는 분들을 위한 간단한 팁 (11)
2008/04/15 15:09

Martian Headsets 웹표준/접근2008/04/15 15:09

지금 웹이 개판(?)인것에 대해 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 기다림
2007/12/21 17:49

IE 접근금지..? 웹표준/접근2007/12/21 17:49

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 기다림
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 기다림