티스토리 뷰

JavaScript

[JavaScript] 동적 UI 만드는 스텝(Alert box)

helen2ye! 2022. 10. 2. 12:53

 

Alert
알림창임 
<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">
    <title>Alert</title>
    <link rel="stylesheet" href="main.css">
</head>
<style>
    .alert-box{
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none; 
    }
</style>
<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>
* 함수사용

...

<body>

    <div class="alert-box" id="alert">알림창임
        <button onclick="closeAlert()">닫기</button>
    </div>
    <button onclick="openAlert()">버튼</button>

</body>

<script>
    function openAlert(){
        document.getElementById('alert').style.display='block';
    }
    
    function closeAlert(){
        document.getElementById('alert').style.display='none';
    }
</script>

...
* 함수(parameter) 파라미터 사용 - 비슷한 함수를 하나로 작성 가능

...
<body>
    <div class="alert-box" id="alert">알림창임
        <button onclick="alert('none')">닫기</button>
    </div>
    <button onclick="alert('block')">버튼</button>
</body>

<script>
    function alert(parameter){
        document.getElementById('alert').style.display=parameter;
    }
</script>
...

UI 만드는 step

  1. HTML/CSS로 미리 디자인
  2. 필요할 때 보여달라고 코드 짜기(JavaScript로)
  3. display -  none(안보임) or block(보여줌)   //   visibility - hidden or show

함수 만들기 + 소소한 팁

  1. function 사용으로 간단히 한 단어로 표현하기(function 작명은 구체적으로! camelCase!)
    ** 코드 재사용에 용이함
  2. HTML 코드는 위에서부터 한 줄씩 읽어나가므로, <script>는 조작할 HTML 하단에 작성하는 것이 좋음
  3. 오타에 주의해야하며, 에러는 개발자 도구에서 확인하면 빠르게 확인할 수 있음
    e.g. ~ of null : 찾을 수 없음..
  4. JavaScript에서 문자는 ''로 감싸주어야 하고, 숫자는 그냥 씀

 

** 참고강의

https://codingapple.com/ JavaScript 입문과 웹 UI개발

 

'JavaScript' 카테고리의 다른 글

[JavaScript] Bootstrap 활용하기  (0) 2022.10.02
[JavaScript] Bootstrap 시작하기  (0) 2022.10.02
[JavaScript] 버튼에 따라 알림창 내용 다르게 보여주기  (0) 2022.10.02
[JavaScript] 기본  (0) 2022.10.02
댓글