Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

충분히 쌓여가는

2. UI 만드는 법칙, 동적 UI 만들기(Alert 박스) 본문

JavaScript/Level1

2. UI 만드는 법칙, 동적 UI 만들기(Alert 박스)

빌드이너프 2024. 11. 4. 23:27

UI 만드는 법칙

  1. HTML CSS로 미리 UI 디자인을 해놓고 필요하면 평소에 숨긴다
  2. 버튼을 누르거나할 경우 UI를 보여달라고(필요할 때 보여달라고) 자바스크립트 코드 만들기

 

1. Alert UI 디자인

  • 작업 폴더에 main.css 만든 후
  • index.html 태그 안에
    <link rel="stylesheet" href="main.css">
    입력 하면 css 사용 가능
  • html 파일의태그 안 
      <div class="alert-box">알림창</div>
  • main.css 파일 
      .alert-box {
      background-color: skyblue;
      padding: 20px;
      color: white;
      border-radius: 5px;
      display: none;
  }
    • display: none: UI 숨기기
    • display: block: UI 보여주기
    • visibility : hidden: UI 숨기기

 

  1. 버튼 누르면 Alert UI 보여주기
  • 거의 모든 html 태그 안에 onclick이라는 속성 사용 가능
    • 해당 html을 클릭시 onclick 안의 자바스크립트를 실행해 줌 
      <button onclick="자바스크립트 코드">버튼</button>
  • html 코드
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="alert-box" id="alert">알림창
        <button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
    </div>
    <button onclick="document.getElementById('alert').style.display = 'block';">열기</button>
</body>
</html>

'JavaScript > Level1' 카테고리의 다른 글

6. 서브메뉴 만들어보기와 classList 다루기  (1) 2024.11.12
5. 이벤트리스너  (1) 2024.11.07
4. function의 parameter 문법  (0) 2024.11.06
3. function 사용법  (2) 2024.11.06
1. 자바스크립트 근본  (4) 2024.11.04
'JavaScript/Level1' Related Articles more