겨미♡웹 » DOM http://miya.pe.kr 웹 클라이언트 사이드 - UI 그리고 마크업. Mon, 05 Mar 2012 08:23:57 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 새로운 웹 표준 테스트, Acid3 http://miya.pe.kr/2008/01/11/%ec%83%88%eb%a1%9c%ec%9a%b4-%ec%9b%b9-%ed%91%9c%ec%a4%80-%ed%85%8c%ec%8a%a4%ed%8a%b8-acid3/ http://miya.pe.kr/2008/01/11/%ec%83%88%eb%a1%9c%ec%9a%b4-%ec%9b%b9-%ed%91%9c%ec%a4%80-%ed%85%8c%ec%8a%a4%ed%8a%b8-acid3/#comments Fri, 11 Jan 2008 01:21:29 +0000 김군우 http://miya.pe.kr/archives/68 Acid3을 100% 통과한 웹 브라우저의 화면 스크린샷 Ian Hickson has been working hard on the acid3 test. The new test will focus [...]]]> 최근 IE8이 Acid2 테스트를 통과했다고 해서 웹 표준 진영이 크게 고무된 바 있다. 그런데 HTML5의 리더인 이안 힉슨(Ian Hickson)이 또 웹 브라우저 제작자에게 또 시련을 주려나 보다. 바로 Acid3 테스트이다.

<

p class=”attach-image”> Acid3을 100% 통과한 웹 브라우저의 화면 스크린샷

Ian Hickson has been working hard on the acid3 test. The new test will focus mostly on ECMAScript and Dom through Selectors Level3, Media queries and data URIs. The new acid3 test isn’t quite ready yet but it should become ready within the coming months.

dustin brewer의 Developers are working on ACID3 test이라는 글에 따르면 새로운 Acid3 테스트는 ECMAScript와 DOM3, CSS3의 Media Queries, data URIs에 초점을 둔 것이라고 한다. Acid2 테스트가 나온지 3년 가까이 지난만큼 그 동안 나온 새로운 웹 표준 기술들에 대한 검증의 필요성이 대두되어 Acid3 테스트가 작성중인 듯 하다.

글을 쓰며 IE8의 Acid2 테스트 통과에 환호하는 현실이 조금 씁쓸한 기분이 든다. 하지만 IE 역시 웹 표준을 적극 수용하려는 자세를 보이고 있는 만큼 Acid3 테스트는 Acid2의 그것보다 훨씬 빠르게 웹 브라우저에 반영될 것으로 기대한다.

아래는 재미로 최신 웹 브라우저들의 Acid3 테스트를 해본 결과이다. IE8의 점수가 궁금해진다. Acid3 테스트는 아직 완료된 테스트가 아니므로 참고만 하자.

웹 브라우저 테스트 점수
Internet Explorer 6 0%
Internet Explorer 7 0%
Firefox 2.0.0.11 60%
Firefox 3.0b2 63%
Safari 3.0.4 50%
Opera 9.25 56%
]]> http://miya.pe.kr/2008/01/11/%ec%83%88%eb%a1%9c%ec%9a%b4-%ec%9b%b9-%ed%91%9c%ec%a4%80-%ed%85%8c%ec%8a%a4%ed%8a%b8-acid3/feed/ 23 겸손한 자바스크립트의 기본 http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/ http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/#comments Sun, 25 Nov 2007 14:23:49 +0000 김군우 http://www.miya.pe.kr/archives/21 겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다.

웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. 어플리케이션 레벨이 아닌 마크업이 잘 되어 정상적인 기능을 하는 HTML 문서에 부가적인 사용자 편의성의 증대를 목적으로 사용하는 자바스크립트라면 <script> 태그가 동작하지 않을 경우 자바스크립트가 없는 HTML 문서와 같이 작동하게 되므로 굳이 <noscript> 태그가 필요하지 않을 것이다.

다음의 두 코드를 보자. 직업을 입력하지 않았을 때 오류메시지를 표시하는 스크립트를 삽입한 폼이다.

<form action="insert" id="f">
    <fieldset>
        <label for="yourjob">당신의 직업</label>
        <input type="text" name="job" id="yourjob" />
        <a href="javascript:checkForm();">전송</a>
    </fieldset>
</form>

<script type="text/javascript">
// <![CDATA[
function checkForm() {
    var form = document.getElementById("f");
    if (form.elements["job"].value == "") {
        alert("직업을 입력해주세요.&quot);
    } else {
        form.submit();
    };
};
// ]]>
</script>
<form action="insert" id="f">
    <fieldset>
        <label for="yourjob">당신의 직업</label>
        <input type="text" name="job" id="yourjob" />
        <input type="submit" value="전송" />
    </fieldset>
</form>

<script type="text/javascript">
// <![CDATA[
if (document.getElementById && document.getElementById("f")) {
    var form = document.getElementById("f");
    form.onsubmit = function() {
        if (this.elements["job"].value == "") {
            alert("직업을 입력해주세요.&quot);
            return false;
        };
    };
};
// ]]>
</script>

전자는 자바스크립트를 제거하였을 때 아무런 동작을 하지 않는 예제이고 후자는 HTML에 선언된 링크로 이동할 수 있는 예제이다. 어떤 코드를 작성하던 비슷한 시간이 소요되겠지만 – 학습에 필요한 시간은 제외한다. - 전자의 경우 문서의 가치가 훨씬 떨어진다.

모든 사용자가 당신의 자바스크립트 코드를 실행할 수 있을 것이라고 기대하지 말아야 한다. 또, 어떤 사용자는 당신의 자바스크립트 코드 중 어떤 부분을 제대로 해석하지 못한다는 것을 알아야 한다.

자바스크립트는 플래시, ActiveX와 같은 외부 플러그인과 개념 상 다르지 않다. 오히려 언급한 것처럼 사용자에 따라 불완전하게 실행될 가능성이 있기 때문에 더 다루기 어려운 기술임을 인식하여야 한다.

참고 링크

마지막 업데이트: 2008년 4월 25일 04시 30분

]]> http://miya.pe.kr/2007/11/25/%ea%b2%b8%ec%86%90%ed%95%9c-%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ec%9d%98-%ea%b8%b0%eb%b3%b8/feed/ 1 1k DHTML API http://miya.pe.kr/2005/02/28/1k-dhtml-api/ http://miya.pe.kr/2005/02/28/1k-dhtml-api/#comments Mon, 28 Feb 2005 01:51:05 +0000 김군우 http://www.miya.pe.kr/archives/55 1k DHTML API – document를 handling하는 여러가지 경우에 수에 대한 API를 제공한다.

종류로는…

  • element 얻기 – gE
  • element 보이고 숨기기(table 기반 레이아웃에는 적합하지 않다..) – sE, hE
  • z-index style 지정 – sZ
  • element의 left position set – sX
  • element의 top position set – sY
  • element의 가로길이 set – sW
  • element의 세로길이position set – sH
  • clip set – sC
  • write HTML – wH

등이 있다.

제목처럼 1k로 용량도 작은데다가, 개발자가 element handling에 있어 시간을 들여 cross browsing을 크게 신경쓰지 않아도 되니 여러모로 좋을 것 같다. :)

]]> http://miya.pe.kr/2005/02/28/1k-dhtml-api/feed/ 0 JavaScript/DOM 사용의 비기!..2 http://miya.pe.kr/2005/02/25/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b02/ http://miya.pe.kr/2005/02/25/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b02/#comments Fri, 25 Feb 2005 02:41:22 +0000 김군우 http://www.miya.pe.kr/archives/54 우리는 흔히 <script type="text/javascript"> 안의 내용을 다 자바스크립트(이하 JS)라고 생각한다. Document Object Model(이하 DOM)이라는 말 자체가 생소하게 느껴진다는 것이다.

어떤게 JS고 DOM인게 무슨 소용인가? 아니다. 활성화된 커뮤니티에서 문제를 해결할 수도 있겠지만, 그렇지 못할 때에는 매뉴얼을 보아야한다. 에러가 난 부분이 JS인지 DOM인지 알아야 매뉴얼을 찾아볼 수 있지 않겠는가?

분류는 쉽다! html element를 가리키면 DOM이고 아니면 JS다. frame등을 가리키는 것도 DOM이다.

이제 DOM인지 JS인지 알았다면, 매뉴얼을 잘 찾아보는 일만 남았다.

DOM은 W3C DOM Technical Reports (HTML 접근 부분은 DOM Level2 HTML)에서 볼 수 있다.

JS는 Syncro.net의 Core JavaScript Reference (devedge.netscape.com이 좋은 reference 사이트였으나 없어졌다. ㅠㅠ)를 보면 되겠다.

]]> http://miya.pe.kr/2005/02/25/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b02/feed/ 0 JavaScript/DOM 사용의 비기!..1 http://miya.pe.kr/2005/02/24/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b01/ http://miya.pe.kr/2005/02/24/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b01/#comments Thu, 24 Feb 2005 05:41:38 +0000 김군우 http://www.miya.pe.kr/archives/53 JavaScript/DOM은 웹이라는 녀석에 기본적으로 포함되는 것이 아니다. 이 말인즉슨, 포함이 안될 경우도 있다는 것이다. 따라서, JavaScript/DOM 사용에 있어서, 포함이 안될 경우에는 어떻게 될것인가에 대한 고찰이 필요하다. 이렇게 얘기해서는 너무 복잡하게 생각될 수도 있겠다. 예를 한번 들어보자. 버튼을 누르면 폼을 서브밋하고 싶다.. 는 예를 들어보겠다. 편의상 일부 필수 태그는 누락시킨 점.. 이해해주시길.. :)

<html>
<head>
<script type="text/javascript">
function checkForm(form) {
    if (form.elements["title"].value == "") {
        alert("제목을 입력해주세요");
        return;
    }
    form.submit();
};
</script>
</head>
<body>
<form action="someaction">
    <p>
        제목 <input type="text" name="title" />
        <input type="submit" value="전송" />
        <a href="javascript:checkForm(document.forms['someaction'])">전송</a>
    </p>
</form>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function checkForm(form) {
    if (form.elements["title"].value == "") {
        alert("제목을 입력해주세요");
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form action="someaction" onsubmit="return checkForm(this)">
    <p>
        제목 <input type="text" name="title" />
        <input type="submit" value="전송" />
    </p>
</form>
</body>
</html>

위는 나쁜 녀석이고, 아래는 좋은 녀석이다. -_-;;

위의 코드가 무엇이 나쁜고 하니.. JavaScript가 인식되지 않는 브라우저에서는 "javascript:checkForm()" 식의 링크가 어떤 지시를 내리는지 알 수가 없다. "checkForm()" 자체가 JavaScript니까… 따라서 폼 체크를 할 수 없고 서브밋은 꿈도 못꾸게 된다.

반대로 아래의 코드는 기본적으로 HTML에서 폼 서브밋에 사용되는 submit button이 있어 서브밋에 지장이 없다. 폼 체크의 경우에는 JavaScript엔진이 있으면 onsubmit 메소드가 호출되어 checkForm function을 탈 것이고 없다면 onsubmit 메소드가 무시되어 아무런 에러없이 서브밋이 될 것이다.

form 값을 받은 action page에서 해당 값들을 체크하는 센스는 당연히 가지고 있을 것으로 생각한다. :)

아! 근데 이런식이라면 text로 폼 전송을 못하지 않는가? 그렇다. -_-; 안타깝게도 HTML만으로는 단순한 text가 폼 전송의 역할을 할 수 없다.

우리나라 웹시장의 웹디자인 마인드로는 심각한 일이지만, 웹이라는 녀석의 기본 목적 상 큰 문제가 될 것이 없다는 것으로 결론을 내린다! 무책임하다고 하신다면 죄송할 따름.. ㅠㅠ

다음 시간에 계속 쓰겠습니다.. :)

]]> http://miya.pe.kr/2005/02/24/javascriptdom-%ec%82%ac%ec%9a%a9%ec%9d%98-%eb%b9%84%ea%b8%b01/feed/ 0