웹 사이트에서 응용 프로그램 스타일의 경험 만들기
DHTML ( Dynamic HTML )을 사용하면 웹 사이트에서 응용 프로그램 스타일의 경험을 만들어 전체 페이지를 완전히로드해야하는 빈도를 줄일 수 있습니다. 응용 프로그램에서 무언가를 클릭하면 응용 프로그램이 즉시 변경되어 해당 내용을 표시하거나 답변을 제공합니다.
대조적으로 웹 페이지는 일반적으로 다시로드해야하거나 전체 페이지를 새로로드해야합니다. 이렇게하면 사용자 경험이 더 분열 될 수 있습니다. 고객은 첫 번째 페이지가로드 될 때까지 기다린 다음 두 번째 페이지가로드 될 때까지 다시 기다려야합니다.
& lt; div & gt; 경험을 향상시키는 방법
DHTML을 사용하면이 경험을 향상시키는 가장 쉬운 방법 중 하나는 div 요소를 켜고 끄고 요청할 때 내용을 표시하는 것입니다. div 요소는 웹 페이지에서 논리적 구분을 정의합니다. div는 단락, 제목, 링크, 이미지 및 기타 div가 포함될 수있는 상자로 생각하십시오.
필요한 것
켜기 / 끄기를 전환 할 수있는 div를 만들려면 다음이 필요합니다.
- 클릭 할 때 div를 켜고 끄는 방법으로 div를 제어하는 링크
- 표시하고 숨길 div
- div 숨겨진 또는 보이는 스타일을 CSS
- 조치를 수행하는 JavaScript
제어 링크
제어 링크가 가장 쉬운 부분입니다. 다른 페이지처럼 링크를 만드십시오. 지금은 href 속성을 비워 두십시오.
HTML 배우기이 위치를 웹 페이지의 아무 곳에 나 배치하십시오.
보기 및 숨기기 사업부
표시하고 숨기려는 div 요소를 만듭니다. div에 고유 한 ID가 있는지 확인하십시오. 이 예에서 고유 ID는 HTML을 학습 합니다 .
내용 열입니다. 이 설명 텍스트를 제외하고는 공백으로 시작합니다. 왼쪽의 탐색 열에서 배우고 싶은 것을 선택하십시오. 텍스트는 아래에 표시됩니다. CSS에 대해 두 개의 클래스를 만듭니다. 하나는 div를 숨기고 다른 하나는 div를 표시합니다. 이를 위해 두 가지 옵션이 있습니다 : 표시 및 가시성. 디스플레이가 페이지 플로우에서 div를 제거하고 가시성이 어떻게 변경되는지 보여줍니다. 일부 코더는 디스플레이를 선호하지만 때로는 가시성이 좋습니다. 예 : 가시성을 사용하려면 다음 클래스를 다음과 같이 변경하십시오. div에 숨겨진 클래스를 추가하여 페이지에서 숨겨진 클래스를 시작합니다. 이 스크립트는 div에 설정된 현재 클래스를보고 숨겨진 것으로 표시되거나 숨겨진 것으로 표시되면 숨김으로 토글합니다. 이것은 몇 줄의 자바 스크립트입니다. HTML 배우기
Div를 보여주고 숨기기위한 CSS
효과를 내기위한 JavaScript