JavaScript - DOM 색상변경과 실시간 시계화면 구성

songmin jeon·2024년 1월 25일

클라우드기반 인공지능서비스 엔지니어링과정

목록 보기

88/138

0. 알아두면 좋은 css 효과 문법

// .transition 문법
// : style 변화가 일어났을때 애니메이션 효과처럼 보일 수 있도록
//   해주는 CSS 속성

// "proper 시간함수 duration delay"
// - proper : 속성 명칭(all -> 모든 속성변경)
// - 시간함수 : ease >> 진행속도를 정해주는 것
// - duration : 지속 시간
// - delay : 딜레이 시간
div.style.transition = "all ease 0.5s 0s"

동그라미에서 네모 변화가 지정한 초만큼 애니매이션 효과가 추가되어 변함

1. 태그에 접근하여 색상 변경해보기

객체.style.속성명 = '적용할 내용';

1.1. 글자색 바꿔보기

<body>
    <h1 id="h1Tag">글자색 바꿔보기</h1>
    <button id="btn">클릭</button>
    
    <script>
        // 1. 필요한 요소(태그) 가져오기
        let h1Tag = document.getElementById('h1Tag');
        let btn = document.getElementById('btn');
        console.log(h1Tag);
        console.log(btn);
        // 2. 버튼을 클릭했을때
        btn.onclick = change;

        // 3. h1 태그의 글자색을 빨간색으로 바꾸기
        function change(){
            console.log("클릭반응!");

            // 스타일 변경하는 방법!
            // 객체.style.속성명 = '값';
            // => 해당 객체의 css 속성을 변경하는 방법
            h1Tag.style.color = 'red';

            // tip!! 
            // 속성명에 - 기호는 빼기 연산자로 보기 때문에
            // 카멜식 기법으로 변경해서 작성하자 !
            h1Tag.style.fontSize = '50px';
        }
    </script>
</body>

1.2. 영역(도형) 색상 바꿔보기

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(82, 192, 82);
        }

    </style>
</head>
<body>
    <div></div>
    <button id="btn1">원</button>
    <button id="btn2">직사각형</button>

    <script>
        // 원 버튼을 클릭했을 때 테두리는 둥글게 만들고, 색상은 오렌지 변경
        // 직사각형 버튼 을 클릭했을 때 너비를 400px, 색상은 토마토 변경
        // 원 -> 직사각형 / 직사각형 -> 원
        let div = document.querySelector('div');
        let btn1 = document.getElementById('btn1');
        let btn2 = document.querySelector('#btn2');

        btn1.onclick = butten1;

        function butten1() {
            console.log("버튼 클릭 : 원 !");
            div.style.width = '200px';
            div.style.borderRadius = '50%';
            div.style.backgroundColor = 'orange';
           
            // .transition 문법
            // : style 변화가 일어났을때 애니메이션 효과처럼 보일 수 있도록
            //   해주는 CSS 속성

            // "proper 시간함수 duration delay"
            // - proper : 속성 명칭(all -> 모든 속성변경)
            // - 시간함수 : ease >> 진행속도를 정해주는 것
            // - duration : 지속 시간
            // - delay : 딜레이 시간
            div.style.transition = "all ease 0.5s 0s"
        }

        btn2.addEventListener('click', () => {
            console.log("버튼 클릭 : 직사각형 !");
            div.style.width = '400px';
            div.style.borderRadius = '0%';
            div.style.backgroundColor = 'tomato';
            div.style.transition = "all ease 2s 0s"
        })
    </script>
</body>

2. 시계 화면 구현해보기

( 주의 ) 영역에 따라 불러오는 기능이 다름
- 시계 화면을 적용할 .css 파일을 불러온다. (노랑색 네모)
- 시계 기능을 구현할 .js 파일을 불러온다. (빨강색 네모)

2.0. 실행 결과

2.1. js 파일 살펴보기

2.1.1. 초단위를 동적으로 보여줄 함수들 !

1초에 한번씩 다시 해당 함수를 실행
setInterval( 반복시킬 코드 블록 ()괄호제외 , 실행단위(초단위:1000) )
setTimeout( 반복시킬 코드 블록 ()괄호제외 , 실행단위(초단위:1000) )

function show() {
    // 1. 현재 시간을 가져오는 방법
    // 1-1) 시간 객체 생성하기
    let date = new Date();
    let amPm;
    
    // 1-2) 현재 시각 가져오기
    // data.get(H, M, S)
    let ho = date.getHours();
    let mi = date.getMinutes();
    let se = date.getSeconds();
    
    // 테스트 시간 데이터
    // let ho = 7;
    // let mi = 5;
    // let se = 2;
    
    console.log(date);
    console.log(ho);
    console.log(mi);
    console.log(se);

    // 2. 시간 바꿔보기
    // 2-1. 현재 24시로 표현되고 있는 시간을 12시로 표현
    //      오전 AM, 오후 PM 붙여주기

    // 2-2. 한자리수 일대 앞에 0붙여주기
    // ex) 15:37:3 --> 03:37:03 PM
    
    if (ho > 12) {
        ho = '0'+(ho - 12);
        amPm = 'PM';
    } else {
        ho = '0'+ho;
        amPm = 'AM';
    }
    if (mi < 10 ) mi = '0'+mi;
    if (se < 10 ) se = '0'+se;
    
    // 3. div태그에 있느 글자를 가지고 온 현재 시간으로 변경
    let div = document.getElementById('clock');
    div.innerText = `${ho}:${mi}:${se} ${amPm}`;

    // 4. 1초에 한번씩 다시 해당 함수를 실행
    // - setInterval( 반복시킬 코드 블록 ()괄호제외 , 실행단위(초단위:1000) )
    // - setTimeout( 반복시킬 코드 블록 ()괄호제외 , 실행단위(초단위:1000) )
    setTimeout(show, 1000);
}

show();

2.2. HTML 파일 살펴보기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/clock.css">
    <title>Digital Clock</title>
</head>

<body>
    <div id="clock"></div>
    <!-- script 태그 사용해서 JS 코드를 호출 : 내부 방식 -->

    <!-- script 태그의 src 속성을 사용해서 JS 파일을 로딩하는 것 : 외부방식 -->
    <script src="./js/clock.js"></script>
</body>

</html>

2.3. CSS 파일 살펴보기

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #282c34;
    color: #ebc3db;
}

#clock {
    font-family: "Black Han Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
}