카테고리 보관물: Web Standards

dl element이야기…

남들 만큼은 아니어도 그래도 나름 html좀 만지고 스펙 문서 좀 봤다고 느꼈는데… 난 아는게 별로 없었다.

한때 잘난척 대마왕일때는 모르는게 나와도 “음 뭐 이런건 누구나 다 아는것 아냐?”(속으로는 ‘오!!!이런 신기한게!’)이랬었는데, 모르는거 투성인게 걸리고 나서부터는 뭐 그냥 모르면 모른다고 쿨하게 얘기할 수 있다는거, 그래서 블로그도 쿨하게 써보려고…
특히 기본적인 내용들이 우리말로 되어있는 글들이 별로 없어서 그런걸 좀 써볼라고.
아는거 모르는거 정리도 좀할겸….

사실 제목은 dl element 이야기지만 이 이야기는 block level element와 inline element의 얘기에 가깝다.

꿈많은 넥슨시절 난 “모든 태그가 block element와 inline element두가지로 구분되고 block element는 width, height 값을 가진다. img는 예외.” 라고 알고 살았다. 까놓고 그렇게 알고 있는 사람 많지 않나… 나밖에 없나? 나중에 inline element는 text나 character 관련요소들 즉 inline 요소만 포함할수있다는것을 알게되었지만 말이지.

암튼 오늘 가이드를 검토하다가 회사 동생이 질문을 했다. dt가 inline요소가 맞냐며 block아니냐며..

생각해보니 dt는 width, height를 가질수 있었던것 같아… block 맞는데 왜 inline 이라고 한걸까… 봤더니…

W3C html4.01 spec 에서 보아하니… inline element 가 맞았어…

dt 요소의 경우 용어기 때문에 인라인 요소들만 올 수 있다는것
추가로 block level element 와 inline element의 차이는 줄바꿈이나 width,height를 가질 수 있는지에 대한 유무가 아니라 요소 자체가 가질 수 있는 콘텐츠로 구분하는것을 최우선으로 한다는것을 알게 되었다.

스펙은 보면 볼수록 새롭고도 놀랍다. 이것도 나만몰랐을거야 ㅠㅠ

아 물론 html5에서는 content models이 변경되었기 때문에 의미없다.

HTML, CSS는 어느정도 다 했구요

가끔 보면 XHTML, CSS는 어느정도 다 했는데 이제 뭐할까요. 하는 사람들을 볼 수 있는데…정말 부러워… 그 자신감이… 근데 좀만 얘기하다 보면  아는것보다 모르는게 더 많아… (a 요소의 href가 뭘 말하는지는 아니?)

HTML, CSS좀 해서 약간!!!의 시멘틱한 페이지 좀 만들 수 있고, 브라우저 몇개 맞추면서 웹 접근성 품질마크 한 두번 따보면 HTML, CSS는 대충 다했다고 할 수 있는거 였어?

예전에 내가 좋아했던 카트라이더라는 게임이 있었는데(지금도 좋아해) 그때 통했던 캐쥬얼게임의 정석같은 개념은 “처음에 시작은 쉽게, 하면 할수록 어렵게, 마스터는 정말 어렵게” 였는데 난 HTML, CSS 가 그렇다고 생각해…

한국에 웹 표준 좀 한다고 알려져 있는 사람들 중에 자기는 HTML, CSS 어느정도 했다고 하는 사람 있는지 찾아봐. 그들은 겸손한게 아니라 정말 그 어려움을 알기 때문이라고 생각해(뭐 아닌 사람도 있겠지만)

남들보다 좀더 안다고 생각해서 각종 커뮤니티 활동이나 각종 발표 하는사람들도 너무 겁만주는것도 문제지만 무조건 태그 몇개, CSS 속성만 알면 바로가능 이딴 스레기 같은 얘기 좀 하지 말고(진짜 이런사람은 없지?), 장기적인 관점으로 로드맵을 그려주는것을 목표로 해봐

그리고 HTML,CSS 다하고 javascript하는게 아니라 그냥 다같이 하는거다. 졸라 씨발 단계 생각하지 말고  HTML, CSS 공부하고 있으면 닥치고 좀 봐라. 좀 프로그래밍의 로직도 좀 생각해보고.

p.s1 눈팅하던 하코사는 진짜 탈퇴해야겠다(모르는 사람들이 짜증나는게 아니라, 잘난사람들이 짜증나) CDK도 사람늘어나면 저리 되려나

p.s2 이빨까는 웹표준을 성민님 현석님과 podcast 방식으로 기획했었는데.. 요즘 나꼼수는 재미있더라 근데 우린 찬양할사람이 별로없어서 말이지;;;; 그리고 닥치고 웹표준을 좀 외쳤더니 존경하는 김어준 총수는 닥치고 정치 라는 책을 내었구나. 역시 싱행력이 있어야한다.(까는거 아님 멋진 실행력이 절대 부러운거임 =_=)

p.s3 요즘 맘의 짐을 한 두개 정도 버려 버리고 대충 살기로해서 블로그에서 정제된 언어보다는 내가하고 싶은 말이나 표현을 그냥 여과없이 해보려고

CDK study

2010년 5월말에 웹표준의 날을 했었는데요.  그 당시 웹 표준 경진 대회를 진행하면서 세미나 보다는 좀 더 심도있게 모여서 공부하는것에 관심을 가지게 되었고 하코사의 한 스터디에 들어가게 되었습니다.

그렇게 열심히 스터디에서 공부를 하는데 저는 책 중심의 스터디가 맞지 않는것이었습니다.

보통 스터디는 책을 선정해서 정해진 부분을 정해진 사람이 발표를 준비해서 사람들에게 발표하는 방식이었습니다. 제가 느끼기에는 한사람이 준비를 해와서 그것에 대해서 설명하는것보다는 모두가 공부를 해오고 내용에 대한 설명은 대충 생략하고 토론을 원했거든요. 사실 책을 보는것은 혼자서도 할 수 있으니까요. 책을 보고 의견을 나누는 것이 제가 원했던 것이었는데 그렇질 못했습니다.

또한 자율적으로 스터디를 하다보니 준비도 미흡하고 결석자도 많고 그렇더라구요. 당연히 흐름은 끊기게 되고, 약간은 산만한 느낌이 들었습니다.

주말에 내가 큰시간을 할애해서 공부를 모여서 하는것인데 산만해 지는것은 싫었습니다. 그래서 강력한 규칙을 정하는 스터디를 만들어서 다같이 공부해보자는 마음을 먹게 되었습니다.

그래서 CDK에서 스터디를 모집 하게 되었습니다. 책만 보는것이 아닌, 웹 표준의 깊숙한 부분, 사상(이라고 하기엔 거창하지만), 무엇보다 공부를 하는 자세를 연구하는 스터디를 모집하고 싶었습니다. 그렇게 저를 제외한 8명의 사람들이 모였습니다. 그래도 책을 한권 정해서 같이 공부하는것이 수월했기 때문에 책을 한권 정해서 공부하기로 했습니다. 그 책이 바로 제프리 젤드만의 웹 표준 가이드였습니다. 이 책은 웹 표준이 생길 당시의 이슈들을 주로 얘기하는책이었던 만큼 웹 표준을 심도있게 공부하기에는 딱이었습니다.

물론 발표도 했었습니다.  그러나 누가 준비해 오는것이 아닌 다같이 발표 준비를 해오고 그중에 즉석에서 발표를 정하는 방식이었습니다. 당연히 준비를 안해오는사람은 거의 없었고(없진않았습니다.-_-+) 책은 그렇게 진행을 했습니다.

그리고 또한 자유 주제를 선정하거나 제가 할당해주어 그것에 대해 심도있게 공부하고 내용을 공유하는 방식으로 진행되었습니다. 그 결과물들은 CDK위키에 조금씩 정리 되었습니다:)

제가 목표로 했었던건 스터디를 통해서 그냥 단순히 페이지를 쳐내는 사람이 아니라 어떤 이슈가 생겼을때 ‘왜’ 라는 의문을 가지고, 근본적인 원인과 문제를 파악하여 처리하는것을 목표로 하는 사람을 만드는것이었습니다. 그렇게 1년을 진행했습니다.

스터디를 하는 사람들이 얼마나 발전했는지는 모르겠지만, 오히려 저는 나름 많은걸 배우고 느낄수 있었습니다. 이제 남은분들이 열심히 하셔서 좀 더 좋은 방향으로 스터디를 이끌었으면 좋겠습니다.  또 다른 스터디를 할것이냐는 아직 모르겠네요.

 

자바스크립트로 특정 앨리먼트에 적용된 스타일값 받아오기

웹 페이지에 정의된 모든 앨리먼트의 배경 이미지를 뽑아올 필요성을 느껴서, 언제나 그렇듯 막무가내로 자바스크립트에 손을 대기 시작했는데요..

처음에는 다음과 같이 했습니다.


element.style.backgroundImage

이랬더니 값이 없다고 나오더군요. 그래서 좀 찾아보니… css같이 외부로 스타일을 지정해 준 경우에는 값을 읽어올 수 없다고 합니다.
그래서 이것도 몰랐냐 바보야 이러면서 computedstyle 이라는게 문득 생각나면서  좀 찾아봤더니 역시 우리의 IE는


element.currentStyle.backgroundImage

이렇게 써야한다고 하더라구요…

그래서 어쩔 수 없이 분기해서 함수처럼 만들어 쓰기로 했습니다. jQuery같은 훌륭한 라이브러리쓰는 사람들은 알 필요 없겠지만; 혹시나 해서 ^_^ 남겨봅니다.

그리고 언제나 그렇듯 제 코드는 무식 그자체 입니다. 보고 욕하지마세요. 조언은 환영합니다 ㅠ_ㅠ



function getStyle(obj ,sStyle) {
    var val;
    if (obj.currentStyle) {
        val = eval("obj.currentStyle."+sStyle);
    } else {
        val = eval("window.getComputedStyle(obj,null)."+sStyle);
    }
    return val;
}

miname 님의 조언으로 코드가 좋아졌습니다!!! 감사합니다!!! ㅎㅎ
무식하면 삼대가 고생해요 ㅠ_ㅠ 아래 코멘트는 miname님의 언급이십니다*_*

아시겠지만, 보안상으로보나 성능면에서 eval is evil이잖아요.^^
property 값을 얻을 때 bracket notation([])을 쓰면 eval 사용을 피할 수 있습니다.
아래처럼요.


function getStyle(el, sStyle) {
  var computedStyle;
  if (el.currentStyle) {
  computedStyle = el.currentStyle;
  } else {
  computedStyle = window.getComputedStyle(el, null);
  }
  return computedStyle[sStyle];
 }

만약에 위 function이 여러번 반복적으로 실행되는 상황이라면 아래처럼 바꿔서 두 번째부턴 더 빠르게 실행될 수 있도록 할 수 있을 겁니다.


function getStyle(el, sStyle) {
  if (el.currentStyle) {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = el.currentStyle;
     return computedStyle[sStyle];
   };
  } else {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = window.getComputedStyle(el, null);
     return computedStyle[sStyle];
   };
  }
  getStyle(el, sStyle);
 }

p.s 파젯을 KWCAG2.0 버전으로 조금 바꾸고 있습니다 ㅎㅎ 그중에 하나만들다가 이게 나온것이에요.
아시는분들만 안다는 파젯 사용방법을 아시는 분은 새로운 파젯 개발버전인 http://mydeute.com/was/pajet.js 으로 변경해서 확인 가능합니다 ㅋㅋㅋㅋ

웹 퍼블리셔의 업무 범위

좀 오래전 얘기이나 한번쯤은 제 생각을 써놓는게 좋을듯 싶어 풀어 보려합니다.

항상 많이 나오는 질문중에 하나는 웹 퍼블리셔가 자바스크립트를 해야하나요 라는 질문입니다. 우리나라에 웹 퍼블리셔 라는 용어를 만든 현석님은

지금은 웹에 어플리케이션의 개념이 많이 들어오고 있지만 웹은 기본적으로 문서다. 그래서 문서나 책을 출판하는 퍼블리시(publish)라는 단어를 생각하게 되었고, 실제로 이 단어는 이미 여러곳에서 사용되고 있었다. 플래시에서 HTML 코드를 만드는 기능도 퍼블리시고 MS 프론트페이지(FrontPage)에서도 퍼블리싱이라는 용어를 썼다. 그리고 어도비(Adobe)에서도 웹페이지를 만드는 작업을 웹 퍼블리싱(Web publishing)이라고 지칭하고 있었다. 이 외에도 많은 툴에서 웹페이지를 실제로 제작하거나 배포하는 단계를 지칭해서 퍼블리시라는 단어를 많이 쓰고 있었다. 웹을 출판하는 사람이라는 의미가 기존의 시각에만 집중한 웹 저작과는 반대되는 의미를 가지고 있다는 느낌도 이 용어를 선택하게 된 이유중의 하나였다. – 웹 퍼블리셔라는 말을 만든 이유 – (hyeonseok.com)

무슨 말인지 쉽게 이해하기는 힘들지만 내가 이해 하기로는 실제로 사용자가 보고 사용하는 웹 페이지를 만드는 사람을 뜻한다고 생각했습니다. 암튼 제가 생각하는 웹 퍼블리셔(요즘은 이 용어에 대한 의문도 많이 생기긴 하지만)는 실제로 사용자가 실제로 사용하는 기술이라면(예를들어 자바스크립트, 플래시, 실버라이트 같은) 다 할 수 있어야 한다고 생각 했습니다.

그러나 무슨 웹 퍼블리셔가 만능 슈퍼맨도 아니고, 그 많은 기술들을 어찌다 마스터해요… 그리고 HTML, CSS만 잘하기도 얼마나 힘든데 말이죠. ㅠ_ㅠ 그래서 저는 웹 퍼블리셔라고 해서 꼭 자바스크립트나 플래시 등을 모두 잘할 필요는 없다고 생각합니다. 자바스크립트를 업무로 한다고 더 실력이 좋은 웹 퍼블리셔라고 생각지도 않고요.

그러나 이전의 포스팅에서도 언급했듯이 웹 페이지를 만드는데 이용되는 기술을 이해하는것은 정말 중요합니다. 사실 내가하지않더라도 다른사람의 작업에 대한 이해도가 있어야 커뮤니케이션에도 문제가 없고 작업의 효율도 올라갈것이기 떄문입니다.

더구나 사용자가 직접적으로 사용하는 기술인 Front-end단의 기술등은 좀더 높은 이해도를 가져야 한다고 생각합니다. 내가 직접적으로 해야하는 작업들만 신경쓰고 타인의 작업을 신경쓰지 않는다면 만들어진 결과물은 결코 좋다고 볼수 없을것같습니다.

다 잘할 수 있으면 더욱 좋구요.

어디까지만 공부해야하는지 고민하지 말고 할 수 있는 만큼은 다 노력해서 최대한 많이 내 자신의 지식으로 만들었으면 좋겠습니다.