웹표준 Round input 방법론

항상 코딩하기 편리하게 디자인되는 것은 아닙니다.
어떠한 디자인이라도 완벽하게 표현해낼 줄 알아야 정말 실력있는 사람이라 할 수 있겠죠.

이번에 다룰 내용은 라운드 형태의 텍스트필드(이하 Round input) 입니다.

Round input
유동적인 Round input 모델

사실 웹표준의 측면에서 보자면 위와같은 입력폼은
해당 input 의 상위 엘리먼트에 사이즈를 맞춰서 bg 를 깔아줘야 합니다.
하지만 같은 디자인의 입력폼이 자주 사용된다면 다양한 사이즈의 bg를 준비하는 것이 힘들겠죠.

input 을 span 으로 감싸서 bg로 양쪽 라운드를 표현해주는 방법도 있습니다만..
몇가지 문제가 있더군요.

여러가지 측면에서 고민하여 혼자서 결론을 내려봤습니다.
의미없는 라운드 이미지를 input 의 좌우에 배치하는 것입니다.
단, html 코드의 간결함과 추후 유지보수의 편리함을 위해
자바스크립트로 특정 class 가 지정된 input 의 좌우에 이미지를 삽입합니다.

이 방법을 사용하면 inline 엘리먼트의 특성을 유지하며 가로 사이즈가 유동적입니다.
또한 HTML 코드가 매우 간결해지며 스크립트가 동작하지 않는 환경에서도 사용에 지장이 없습니다.

소스코드는 아래와 같습니다.

[code js]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Round input</title>
<style type=”text/css”>
.roundInput { vertical-align:middle; margin:0; padding:3px 0 0 0; height:18px; border:none; background:url(’round_input_bg.gif’) repeat-x 0 0; }
</style>
<script type=”text/javascript”>
<!–
window.onload = function () {
    var inputClass = “roundInput”; // 적용할 input의 클래스이름
    var leftImg = “round_input_left.gif”; // 왼쪽 이미지 경로
    var rightImg = “round_input_right.gif”; // 오른쪽 이미지 경로
   
    var roundInput = getElementsByClass(inputClass);
    var roundL = new Array();
    var roundR = new Array();
    for(var i=0; i<roundInput.length; ++i) {
        // 생성
        roundL[i] = document.createElement(‘img’);
        roundR[i] = document.createElement(‘img’);
        roundL[i].setAttribute(‘src’,leftImg);
        roundL[i].setAttribute(‘alt’,”);
        roundL[i].style.verticalAlign = ‘middle’;
        roundR[i].setAttribute(‘src’,rightImg);
        roundR[i].setAttribute(‘alt’,”);
        roundR[i].style.verticalAlign = ‘middle’;
        // 삽입
        roundInput[i].parentNode.insertBefore(roundL[i],roundInput[i]);
        insertAfter(roundR[i],roundInput[i]);
    }
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling)
    }
}
function getElementsByClass(searchClass, node, tag) {
    var classElements = new Array();
    if ( node == null ) node = document;
    if ( tag == null ) tag = ‘*’;
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp(“(^|\\s)”+searchClass+”(\\s|$)”);
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
–>
</script>
</head>

<body>
<input name=”textfield” type=”text” class=”roundInput” />
<input name=”textfield” type=”text” class=”roundInput” />
<input name=”textfield” type=”text” class=”roundInput” />
</body>
</html>[/code]
클래스명이 roundInput 인것을 찾아 좌우에 라운드이미지를 삽입해주는 스크립트입니다.
이미지 경로를 수정해서 사용하면 되구요.
위 코드처럼 insertAfter 와 getElementsByClass 함수가 정의된 상태에서 동작합니다.

하루빨리 웹브라우저가 업그레이드 되어 이런 복잡한 방법없이도 편하게 디자인을 구현할 수 있으면 좋겠네요 ^^