[HTML/CSS] 디지털 시계 클론 코딩하면서 HTML, CSS, Javascript 기본 문법 알아보기

👩🏻‍💻 Dev

[HTML/CSS] 디지털 시계 클론 코딩하면서 HTML, CSS, Javascript 기본 문법 알아보기

jcowwk 2025. 2. 4. 11:36

디지털 시계 클론 코딩하면서 HTML, CSS, Javascript 기본 문법 알아보기

1. HTML

2. CSS

3. Javascript

위와 같은 디지털 시계를 만들어보면서 HTML, CSS, Javascript의 기본 문법을 알아보겠습니다.

1. HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="clock-container">
    <div class="clock">
        <div class="time-segment" id="hours">00
            <div class="segment-label">Hours</div>
        </div>
        <div class="time-segment" id="minutes">00
            <div class="segment-label">Minutes</div>
        </div>
        <div class="time-segment" id="seconds">00
            <div class="segment-label">Seconds</div>
        </div>
    </div>
    <div class="date" id="date">Loading...</div>
</div>

<script src="script.js"></script>

</body>
</html>

- <!DOCTYPE html>

HTML 문서의 문서 유형 선언입니다.

최신 HTML5 문서임을 브라우저에 알려줍니다.

- <html>

HTML 문서의 시작 태그입니다.

1. <html lang="ko">

lang="ko"는 문서의 기본 언어를 한국어로 설정합니다.

- <head>

웹 페이지의 기본 설정과 스타일을 정의하는 태그입니다.

1. <meta charset="UTF-8">

문자의 인코딩 방식을 UTF-8로 설정합니다.

2. <meta name="viewport" content="width=device-width, initial-scale=1.0">

반응형 웹 디자인을 위해 화면 크기를 장치 크기에 맞게 조정합니다.

3. <title>Clock</title>

<title>은 브라우저 탭에 표시될 페이지 제목을 정하는 태그입니다.

4. <link rel="stylesheet" href="style.css">

<link>는 외부 파일(리소스)를 HTML 문서에 연결하는 역할을 합니다.

CSS, 아이콘, 폰트 등을 연결할 때 사용하고 현재는 해당 디렉토리 안에 있는 style.css 파일을 불러와서 스타일을 적용합니다.

- <body>

실제 화면에 보이는 내용입니다.

1. <div class="clock-container">

<div>는 내용을 묶거나 레이아웃을 구성할 때 사용하며, 스타일링 및 스크립트 작성을 위한 컨테이너 역할을 합니다.

2. <div class="time-segment" id="hours">00

class와 id는 고유한 식별자나 스타일 및 동작을 부여하는 데 사용합니다.

class는 여러 HTML 요소에 동일한 스타일을 적용하거나 동작을 부여할 때 사용합니다.

동일한 class 이름을 가진 여러 요소에 같은 스타일을 적용할 수 있습니다.

class를 CSS에서 사용하면 .클래스명 {} 으로 표현합니다.

id는 하나의 HTML 요소를 고유하게 식별하고, 특정 요소에 스타일을 적용하거나 javascript에서 접근할 때 사용합니다.

하나의 id값은 반드시 문서 내에서 유일해야 하며, 하나의 요소만 가질 수 있습니다.

id를 CSS에서 사용하면 #아이디명 {} 으로 표현합니다.

id가 class 보다 우선순위가 더 높습니다.

- <script>

javascript 시작 태그입니다.

1. <script src="script.js"></script>

해당 디렉토리 안에 있는 script.js 파일을 불러와서 동적 기능을 적용합니다.

2. CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&amp;display=swap');

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(45deg, #1a1a2e, #16213e);
            margin: 0;
            font-family: 'Orbitron', sans-serif;
            overflow: hidden;
        }

        .clock-container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            text-align: center;
            transition: all 0.3s ease;
        }

        .clock {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .time-segment {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 15px;
            min-width: 100px;
            color: #00ff9f;
            font-size: 4rem;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease;
        }

        .time-segment:hover {
            transform: scale(1.05);
        }

        .segment-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 100%;
            color: #4eb8dd;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .date {
            margin-top: 20px;
            color: #4eb8dd;
            font-size: 1.2rem;
            letter-spacing: 2px;
        }

        @media (max-width: 600px) {
            .time-segment {
                font-size: 2.5rem;
                padding: 10px;
                min-width: 60px;
            }
            .clock-container {
                padding: 20px;
            }
        }

- @

@는 CSS 규칙에 특수한 지시문을 나타내는 기호입니다. @import, @media, @keyframes, @font-face 등이 있습니다.

1. @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

@import는 외부 스타일시트나 폰트를 가져올 때 사용합니다. 해당 링크에서는 Google Fonts에서 Orbitron 폰트를 불러오고 있습니다.

2. @media

미디어 쿼리(Media Query)를 정의하는 CSS 규칙입니다. 이 규칙은 화면 크기나 해상도, 기기 유형 등을 기준으로 특정 스타일을 적용하는 방법을 제공합니다. 반응형 웹 디자인을 구현할 때 주로 사용됩니다.

HTML은 콘텐츠와 구조를 정의하는 구조적 요소이고, CSS는 콘텐츠가 어떻게 보여지는지에 대한 시각적 요소를 구성하기 때문에 각각의 파일에서 반응형 디자인을 고려한 코드를 작성해야합니다.

3. Javascript

function updateClock() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');

    const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

    document.getElementById('hours').textContent = hours;
    document.getElementById('minutes').textContent = minutes;
    document.getElementById('seconds').textContent = seconds;

    document.getElementById('date').textContent =
        `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
}

// Initial call to display clock immediately
updateClock();

// Update clock every second
setInterval(updateClock, 1000);

- const now = new Data();

현재 시스템의 날짜와 시간을 나타내는 객체입니다.

이 객체는 다양한 메서드를 제공하여 날짜와 시간을 추출하거나 조작할 수 있습니다.

- document.getElementById('hours').textContext = hours;

해당 HTML 요소를 선택하고 해당 요소의 텍스트 내용을 업데이트 합니다.

1. document.getElementById('date').textContent =
`${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;

템플릿 리터럴 ${}는 문자열 내에서 동적으로 값을 삽입할 수 있게 하여 날짜를 쉽게 형식화하고 가독성을 높이며 코드 작성이 간결해지도록 도와줍니다.

참고 사이트

HTML에 대해 어디까지 알고 있나요? (웹 개발 10년차가 전하는 HTML과 HTML5 사용법) I 이랜서 블로그

많은 개발자들이 HTML을 사용하고 있지만, 그 배경과 활용 방법을 깊이 이해하지 못하는 경우가 많은데요. HTML부터 HTML 5란 무엇인지 그리고 주로 사용하는 태그의 사용법까지 모두 정리해서 알려

www.elancer.co.kr

01-1 CSS를 소개합니다

##웹 문서의 스타일을 정의하는 CSS CSS는 캐스케이딩 스타일시트(Cascading Stylesheet)의 줄임말입니다. 여기에서 캐스케이딩(Cascading)이란 ‘폭포같은…

wikidocs.net

https://codewithcurious.com/projects/digital-clock-with-html-css-and-javascript/

문제가 있으면 댓글 남겨주세요 !

피드백은 언제나 환영입니다 <3

저작자표시 (새창열림)