동적 사용자 인터페이스를 만드는 방법

by

동적 사용자 인터페이스를 만드는 방법을 살펴보겠습니다.

웹 페이지에서 탭, 모달 창, 하위 메뉴 및 도구와 같은 수백 개의 동적 사용자 인터페이스를 만들 수 있습니다.

하지만 동적 UI를 만드는 방법을 알면 모든 UI를 개별적으로 암기하는 대신 모두 적용하여 만들 수 있습니다.

동적 사용자 인터페이스를 만드는 방법

1. HTML CSS를 사용하여 UI를 미리 디자인합니다.

(필요하지 않으면 숨김)

2. 버튼을 클릭할 때 사용자 인터페이스를 표시하는 JavaScript 코드 작성

1. HTML CSS로 미리 디자인하기

<body>
  <div class="alert-box">알림창임</div>
</body>
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none; 
}

여기에서 HTML CSS로 미리 디자인되었고 display: none 속성으로 숨겨져 있음을 알 수 있습니다.

2. 버튼을 클릭할 때 사용자 인터페이스를 표시하는 JavaScript 코드 작성

<body>
    <div class="alert-box">
      알림창임
      <button
        onclick="document.querySelector('.alert-box').style.display = 'none'"
      >
        닫기
      </button>
    </div>
    <button
      onclick="document.querySelector('.alert-box').style.display = 'block'"
    >
      열기
    </button>
</body>

거의 모든 HTML 태그에 onclick이라는 속성을 넣을 수 있으며, 이 속성을 넣으면 HTML을 클릭할 때 onclick의 JavaScript가 실행됩니다.

열기 버튼을 눌렀을 때 표시 속성을 차단으로 변경하면 알림창이 나타납니다.

닫기 버튼도 구현되었습니다.

결과 화면