HTML, CSS 및 JavaScript를 사용하는 사용자 지정 캘린더

4313 단어 webdevprogrammingbeginnersjavascript
안녕하세요 여러분! Coding Torque에 오신 것을 환영합니다. 이 블로그에서는 HTML, CSS 및 JavaScript를 사용하여 사용자 지정 캘린더를 만드는 방법을 설명합니다. 이것은 HTML과 CSS를 포함한 단계별 가이드가 될 것입니다. 시작합시다 🚀.

HTML 부분을 다루겠습니다.



우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.

이제 HTML<head> 태그에서 멋진 글꼴 CDN을 가져오겠습니다. fontawesome은 웹사이트의 아이콘에 사용되는 라이브러리입니다.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />


이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는 Poppins 글꼴에 대한 코드입니다. <head> 태그에 아래 코드를 붙여넣습니다.

<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=Poppins&display=swap" rel="stylesheet">




<div class="container">
    <div class="calendar">
        <div class="month">
            <i class="fas fa-angle-left prev"></i>
            <div class="date">
                <h1></h1>
                <p></p>
            </div>
            <i class="fas fa-angle-right next"></i>
        </div>
        <div class="weekdays">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>
        <div class="days"></div>
    </div>
</div>


continue reading
Go의 뮤텍스
Tailwind CSS 및 Alpine JS로 아코디언 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage