[Codding Apple, js] JAVASCRIPT UI디자인

css에서 UI를 숨기고싶으면 display:none; 주면 되고,

다시 보여주고 싶으면 display:block; 넣으면 보임

이게 싫으면 visibility:hidden;

 

거의 모든 html태그 내에 onclick이라는 속성을 넣을 수 있는데

이걸 넣게되면 해당 html을 클릭시 onclick안의 자바스크립트를 실행

<button id="js" onclick=""> 버튼 </button>

 

예시로 Alert UI 디자인해서 안보이게 만들어보자!

step 1. Alert UI 디자인부터 하기

html파일부터 들여다보면

<div class="alert-box">알림창</div>

css에서는 이것을 먼저 가려야하고 자바스크립트로

버튼누르면 보이게 할것임 그러기 위해서는 css로 먼저 저창을 가려놓아야함

.alert-box {
  background-color: pink;
  padding: 10px;
  color: white;
  border-radius: 5px;
  display: none;
}

 

step 2. 버튼 누르면 Alert UI 보여주기

거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데

이걸 넣게되면 해당 html 을 클릭시 onclick 안의 자바스크립트를 실행

그럼 버튼을 눌렀을 때 자바스크립트를 실행하고 싶으면

아래처럼 코드짜면됨

<button onclick="js"> 버튼 </button>

<button onclick="Alert"> 버튼 </button>

 

 

Alert박스 보이게 하기위한 코드

<button onclick="document.getElementById('js').style.display = 'block';"> 버튼 </button>

• 여기서 id가아닌 class선택하는건 getElementsByClassName(’’)[몇번째]

Alert박스 보이게 하기위한 코드

<div class="alert-box" id="alert">
  알림창
  <button onclick="document.getElementById('alert').style.display = 'none'; ">닫기</button>
</div>