HTML 폼 요소 덮어 쓰기 스타일 요소 문제 및 보완 방법

HTML 페이지 를 디자인 하 는 과정 에서 폼 요소 가 스타일 요 소 를 덮어 쓰 는 문제 가 자주 발생 하 는데 그림 은 전형 적 인 예 이다.'저급'으로 보 이 는 이 문 제 를 얕 보지 마라.규모 가 큰 사이트 에서 도 비슷 한 문 제 는 드 물 지 않다.본 고 는 이 문 제 를 일 으 킨 근본 적 인 원인 을 탐구 하고 보완 방법 을 제시 했다.일 로 영일 의 해결 방법 이 아니 라 마이크로소프트 와 넷 스 케 이 프 라 는 두 거두 도 아직 대책 이 없 기 때문이다.
1.HTML 요소 의 디 스 플레이 우선 순위 HTML 에서 자주 사용 하 는 폼 요 소 는 텍스트 영역(TEXTAREA),목록 상자(SELECT),텍스트 입력 상자(INPUT type=text),암호 입력 상자(INPUT type=password),단일 입력 상자(INPUT type=radio),체크 입력 상자(INPUT type=checkbox)등 을 포함한다.흔히 볼 수 있 는 비 폼 요 소 는 링크 태그(A),DIV 태그,SPAN 태그,TABLE 태그 등 을 포함한다.폼 요소 가 스타일 요 소 를 덮어 쓰 는 근본 적 인 원인 은 HTML 요소 의 기본 디 스 플레이 우선 순위 규칙 에 있 습 니 다.예 를 들 어 프레임 요 소 는 항상 다른 HTML 요소 보다 우선 하기 때문에 항상 맨 앞 에 표 시 됩 니 다.폼 요 소 는 항상 모든 비 폼 요소 보다 우선 합 니 다.이 모든 HTML 요 소 는 표시 요구 에 따라 두 가지 로 나 눌 수 있 습 니 다.즉,창 이 있 는 HTML 요소(Windowed Element),창 이 없 는 HTML 요소(Windowless Element)입 니 다.창 요 소 는 SELECT 요소,OBJECT 요소,플러그 인,IE 5.01 및 이전 버 전의 IFRAME 요 소 를 포함 합 니 다.창 이 없 는 요 소 는 링크 와 TABLE 태그,SELECT 요 소 를 제외 한 대부분의 폼 요소,NS6+/IE 5.5 및 더 높 은 버 전의 IFRAME 요 소 를 포함 합 니 다.본 논문 에서 토론 한 문 제 는 주로 창 이 있 는 HTML 요소 와 관련 이 있 는데 문제 의 문제점 은 운영 체제 가 기본적으로 창 이 있 는 요 소 를 창 이 없 는 요소 앞 에 표시 하 는 것 이다.2.브 라 우 저 유형 과 디 스 플레이 우선 순 위 는 브 라 우 저 유형 에 따라 HTML 요소 의 디 스 플레이 순서 도 다르다.요약 하면 다음 과 같다.(1)넷 스 케 이 프/모 질 라 는 NS 브 라 우 저 6.0 이전 버 전에 서 폼 요 소 는 항상 다른 HTML 요소 보다 높 은 우선 순 위 를 가진다.단,NS 6+브 라 우 저 에 서 는 IFRAME 요소 와 모든 폼 요소 의 표시 순서 나 CSS 의 z-index 속성 값 으로 확인 되 거나 HTML 페이지 에 나타 나 는 순서 로 확인 되 지만 SELECT 요 소 는 제외 합 니 다.(2)인터넷 익스플로러 는 최신 IE 브 라 우 저(6.0)에서 IFRAME 요소 와 모든 폼 요 소 는 z-index 속성 값 이나 HTML 페이지 에 나타 난 순서에 따라 우선 순 위 를 확인 하지만 SELECT 요 소 는 제외한다.⑶ Opera 는 최신 Opera(7.10*)브 라 우 저 에서 SELECT 를 포함 한 모든 폼 요 소 는 z-index 속성 이나 HTML 페이지 에 나타 나 는 순서 에 따라 우선 순 위 를 확인한다.그러나 최신 Opera 브 라 우 저 는 IFRAME 를 창 없 는 요소 로 표시 하지 않 습 니 다.IFRAME 는 창 요소 가 있 는 것 으로 간주 되 며 표시 순서 에서 모든 창 없 는 요소 보다 우선 합 니 다.3.CSS 의 z-index 속성 은 CSS 의 z-index 속성 이 임의의 HTML 요소 가 표 시 될 때의 오 버 레이 순 서 를 제어 할 수 있다 는 것 을 알 고 있 습 니 다.여러 HTML 요소 가 같은 공간 에 겹 칠 때 z-index 값 이 큰 요 소 는 z-index 값 이 작은 요 소 를 덮어 씁 니 다.하지만 z-index 속성 치 는 만능 이 아 닙 니 다.앞에서 말 한 바 와 같이 창 이 있 는 요 소 는 항상 창 요소 가 없 는 앞 에 표 시 됩 니 다.z-index 속성 값 은 같은 요소 사이 에서 만 결정 합 니 다.이미지 적 으로 말 하면 창 요소 와 창 요소 가 없 는 것 은 같은 브 라 우 저 창 에 그 려 진 두 개의 서로 다른 캔버스 에 그 려 진 것 과 같 습 니 다.두 가지 요 소 는 각각 자체 적 으로 시스템 이 되 고 그들의 z-index 속성 도 같은 캔버스 에 있 는 다른 요소 에 만 작용 합 니 다.4.보완 의 길 은 현재 브 라 우 저 에 있어 비교적 효과 적 인 보완 방법 은 창 요소 가 없 을 때 창 요 소 를 덮어 써 야 할 때 스 크 립 트 프로그램 으로 창 요 소 를 동적 으로 숨 기 는 것 입 니 다.다음은 완전한 예 입 니 다.var isActive = false;function showMenu(){isActive = true;//document.getElementById("lb_1").style.visibility="hidden";document.getElementById("subMenus").style.visibility="visible";}function hideMenu(){isActive = false;setTimeout('hide()',100);}function hide(){if(!isActive){document.getElementById("subMenus").style.visibility = "hidden";document.getElementById("lb_1").style.visibility="visible";}}function setStyle(menuItem){isActive = true;menuItem.style.backgroundColor = "Gray";menuItem.style.color = "#FFFFFF"}function setDefault(menuItem){isActive = false;menuItem.style.backgroundColor = "";menuItem.style.color = ""hideMenu();}페이지 의