Programming/JavaScript

[JavaScript기초] 2. 동적 UI 만들기 with 함수란?

midnightcoder 2023. 2. 5. 17:15

UI 만드는 스텝

1. HTML/CSS로 미리 디자인

2. 필요할 때 보여질수 있도록, 자바스크립트로 구현

 

먼저, 스타일링을 위해서 따로 main.css 라는 파일을 만들어주고, css파일을 아래와 같이 <head> tag에 첨부해준다.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css"> // head에 이런식으로 작성
</head>

 

UI 만드는 스텝에 따라서 먼저,

스텝1. <div> tag를 이용해서, alert 박스를 하나 만들고 styling시 display를 'none'으로 안보이도록 설정한다.

코드 : index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="alert-box" id="alert">alert1</div>
    <button>button</button>  // 이 부분에 동작을 위한 자바스크립트 코드 추가 예정

    <script>

    </script>
</body>
</html>

코드 for styling : main.css

.alert-box {
    background-color : skyblue;
    padding : 20px;
    color : white;
    border-radius: 5px;
    /* 해당 tag를 숨기기위해 none */
    display: none;
}

미리보기 창

div 박스가 숨겨져 있다

스텝2. 버튼을 누르면 UI를 보여달라고, 자바스크립트 코드를 <button> tag에 추가한다.

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

 

미리보기창

버튼 클릭시 위와같이 alert창이 보여지게 된다.

 

 

위 내용을 바탕으로, 아래와 같이 닫기버튼을 만든 후 버튼 클릭시 alert box가 없어지도록 구현해보자

 

여기에서는, 함수를 사용해서 tag 안에 코드를 조금 간단하게 만들어본다.

 

함수?

 

1. 긴 코드를 축약하고 싶을 때 사용

2. 재사용 하기 좋음 (여러곳에 동일한 코드가 필요할경우 함수명만 가져다 쓰면 됨)

 

<script> tag안에 아래와 같이 함수를 만들어보자 (함수명은 closeAlert이라고 작명함 → 함수에 맞게 작명하면됨)

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

 

그리고 새로 추가해준 <button> tag안에 해당 함수를 아래와 같이 onclick 안에 넣어준다. 끝

<button onclick="closeAlert()">X</button>

 

** 함수명 영어 작명 암묵적인 룰 (자바스크립트)

1. 소문자로 시작

2. camelCase (closeAlert 처럼)

 

 

 

- 출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'