웹프로그램 연구(II) Input.Text 와 Select 요소

input.text와 select의 요소를 검토한다.

경계선의 표시에 대해서

스타일시트

input[type="text"] {border:0}
input[type="text"]:focus {border:1px solid blue}
input[type="text"]:blur {border:0}

해설과 목적

  <Input type="text"> 요소의 경계를 표시하지 않다가 입력 포커스를 받으면 경계를 표시한다. 표 형식에 Input요소의 경계를 다 표시하면 선이 지저분하고 입력 캐릿을 받았을 때 하이라이트 표시로 경계를 표시하는 것이다.

스타일시트의 [type="text"] 부분은 이름하여 속성지정 스타일(attribute selector) 적용에 관한 부분이다. input만 정의하면 모든 input 요소에 정의가 적용되지만 조건[...]을 줌으로써 textBox형태만 스타일정의가 가능하다. 

주의: 이런 유형의 조건부 스타일 정의가 모든 브라우저에 적용되는 것은 아니다. 조건부 스타일정의가 버그처리는 아니면서도 정의의 일부가 무효가 되는 경우가 있다. 예를 들면 IE8등의 마이크로소프트사의 제품군은 조건부 스타일정의 자체는 가능하지만 폭(Width)정의등의 일부 정의는 무효가 되어 버리고 각 요소에 개별 정의해야 유효하다. 각사의 인터넷 브라우저가 어디까지 스타일시트를 적용하고 있는지에 관한 문헌을 찾아보는 것이 이런 경우 도움이 된다.

Advanced Link: http://www.w3schools.com/css/css_attribute_selectors.asp

(동물원:온순한 캥거루지만 시끄럽게하여 심기를 불편하게 하면 강펀치를 맞게 된다. 더우기 이렇게 낮잠을 즐기는 캥거루가 많으니 더욱 조심해야 한다.) 

드롭다운으로의 스위칭

입력포커스가 없을 때는 경계없는 Input.Text로 표시하다가 입력을 받으면 Select요소를 표시하고 Input.Text는 비표시로 하는 것이다.

스타일지정(CSS)

*.hidden {display:none}

자바스크립트

function setCombo(Sender){
    //search parentNode which is <TD>
    //make Select element
    //insertBefore (Combo)
    //Sender.className = "hidden";
}

해설과 목적

  마지막에직접 display:none을 설정하지 않고 클래스명만을 대입함으로 표시제어를 CSS에 전담시킬수 있다. 스타일시트 또는 HTML에서 "*." 시작하는 것은 모든 요소(*의 의미)에서 요소의 급(클래스)이라는 의미다. 즉 "*.hidden"은 "hidden" 급으로 선언되 모든 요소에 해당하는 스타일정의다.  여기서 *는 생략해도 된다. 웹상에서 흔히 볼 수 있는 정의는 "*"를 생략한 형태가 많다. 그럼에도 나는 일부러 "*"를 붙여 놓기를 좋아한다. 명시적으로 모든 요소라는 것을 표시함으로 가독성을 높여 줄수 있다.

<Select>요소를 작성함에 있어서 서버측에서 ASP로 반복계산으로 많은 Select요소를 작성해 두고 비표시설정을 해둘 수도 있으나 불필요한 요소가 많은 것은 성능저하를 가져온다. 그러므로 입력보조용 Select요소는 페이지에 한개만 만들어 두고, 복제하면서 표시위치를 동적으로 변화시켜가면 된다. 소스예로는
    var objCombo = document.getElementById("priority");
    var objTarget = objCombo.cloneNode(true);

참고: HTML문서 상에서 동적으로 요소를 추가하고자 할 때 자바스크립트를 써서 하나씩 요소를 생성하여 추가하는 것도 방법이지만, 추가하고자 하는 요소(예를 들면 Select, tr, table등)를 display:none속성으로 만들어 두고 cloneNode 로 복제하여 추가하고 display:"" 으로 바꾸어 주면 간단히 요소를 추가할 수 있다.