항상 코딩하기 편리하게 디자인되는 것은 아닙니다.
어떠한 디자인이라도 완벽하게 표현해낼 줄 알아야 정말 실력있는 사람이라 할 수 있겠죠.
이번에 다룰 내용은 라운드 형태의 텍스트필드(이하 Round input) 입니다.
사실 웹표준의 측면에서 보자면 위와같은 입력폼은
해당 input 의 상위 엘리먼트에 사이즈를 맞춰서 bg 를 깔아줘야 합니다.
하지만 같은 디자인의 입력폼이 자주 사용된다면 다양한 사이즈의 bg를 준비하는 것이 힘들겠죠.
input 을 span 으로 감싸서 bg로 양쪽 라운드를 표현해주는 방법도 있습니다만..
몇가지 문제가 있더군요.
여러가지 측면에서 고민하여 혼자서 결론을 내려봤습니다.
의미없는 라운드 이미지를 input 의 좌우에 배치하는 것입니다.
단, html 코드의 간결함과 추후 유지보수의 편리함을 위해
자바스크립트로 특정 class 가 지정된 input 의 좌우에 이미지를 삽입합니다.
이 방법을 사용하면 inline 엘리먼트의 특성을 유지하며 가로 사이즈가 유동적입니다.
또한 HTML 코드가 매우 간결해지며 스크립트가 동작하지 않는 환경에서도 사용에 지장이 없습니다.
소스코드는 아래와 같습니다.
클래스명이 roundInput 인것을 찾아 좌우에 라운드이미지를 삽입해주는 스크립트입니다.
이미지 경로를 수정해서 사용하면 되구요.
위 코드처럼 insertAfter 와 getElementsByClass 함수가 정의된 상태에서 동작합니다.
어떠한 디자인이라도 완벽하게 표현해낼 줄 알아야 정말 실력있는 사람이라 할 수 있겠죠.
이번에 다룰 내용은 라운드 형태의 텍스트필드(이하 Round input) 입니다.
해당 input 의 상위 엘리먼트에 사이즈를 맞춰서 bg 를 깔아줘야 합니다.
하지만 같은 디자인의 입력폼이 자주 사용된다면 다양한 사이즈의 bg를 준비하는 것이 힘들겠죠.
input 을 span 으로 감싸서 bg로 양쪽 라운드를 표현해주는 방법도 있습니다만..
몇가지 문제가 있더군요.
여러가지 측면에서 고민하여 혼자서 결론을 내려봤습니다.
의미없는 라운드 이미지를 input 의 좌우에 배치하는 것입니다.
단, html 코드의 간결함과 추후 유지보수의 편리함을 위해
자바스크립트로 특정 class 가 지정된 input 의 좌우에 이미지를 삽입합니다.
이 방법을 사용하면 inline 엘리먼트의 특성을 유지하며 가로 사이즈가 유동적입니다.
또한 HTML 코드가 매우 간결해지며 스크립트가 동작하지 않는 환경에서도 사용에 지장이 없습니다.
소스코드는 아래와 같습니다.
<!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>
<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>
클래스명이 roundInput 인것을 찾아 좌우에 라운드이미지를 삽입해주는 스크립트입니다.
이미지 경로를 수정해서 사용하면 되구요.
위 코드처럼 insertAfter 와 getElementsByClass 함수가 정의된 상태에서 동작합니다.
'IT트랜드 & 정보 > Web(웹) 2.0' 카테고리의 다른 글
| UI DevDev 2008 발표자료 공개... 비록 참석은 못 했지만... (0) | 2008.06.17 |
|---|---|
| 웹 표준 개발 프로세스 (0) | 2008.06.10 |
| 트랙백(trackback, 먼댓글), 트랙백 핑(ping) (1) | 2008.05.15 |
| RSS와 XML 아이콘, 피드(feed), RSS 구독기(reader program) (0) | 2008.05.15 |
| CardSpace와 XRI/XDI 연계 방안 (0) | 2008.05.02 |