달력 편집하기

이동: 둘러보기, 검색

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 아이디(ID)으로 기록되고, 다른 장점도 있습니다.

편집을 되돌릴 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 저장해주세요.
최신판 당신의 편집
3번째 줄: 3번째 줄:
 
'''달력'''(calendar)<!--iCal--> 또는 '''캘린더'''<!--켈린더, 아이캘-->는 인터넷 웹사이트에서 달력을 표시해 주는 프로그램이다. 달력 프로그램을 기반으로 [[일정관리]] 솔루션을 개발한다.
 
'''달력'''(calendar)<!--iCal--> 또는 '''캘린더'''<!--켈린더, 아이캘-->는 인터넷 웹사이트에서 달력을 표시해 주는 프로그램이다. 달력 프로그램을 기반으로 [[일정관리]] 솔루션을 개발한다.
  
== 개요 ==
+
==개요==
 
달력은 웹이나 모바일에서 사용자의 일정을 기록하고, 수정 및 추가, 삭제도 가능하여 다른 사용자의 일정 또한 공유 및 확인할 수 있는 프로그램이다. 달력을 이용함으로써 기존에 수기로 작성하여 중요한 일정을 잊어버리거나, 일정 파악 및 정리의 어려움을 해결할 수 있다. 또한, 달력을 통해 다른 사용자의 일정을 확일할 수 있기 때문에 일정을 세우기 전에 일정이 겹치게 되는 문제를 해결할 수 있다. 달력은 일정을 관리함으로써 프로젝트 등 중요한 일정들의 시간을 효율적으로 분배할 수 있기 때문에 시간단축의 도움을 줄 수도 있다. 일정관리의 중요성은 현재까지 많은 종류의 달력들이 존재하고 생겨나고 있다는 점을 보면 알 수 있다. 많은 달력이 있기 때문에, 해당 프로그램들의 주요 특징들을 파악하고, 자신이 필요한 기능에 맞는 프로그램을 선정하여 사용하는 것을 권장한다.
 
달력은 웹이나 모바일에서 사용자의 일정을 기록하고, 수정 및 추가, 삭제도 가능하여 다른 사용자의 일정 또한 공유 및 확인할 수 있는 프로그램이다. 달력을 이용함으로써 기존에 수기로 작성하여 중요한 일정을 잊어버리거나, 일정 파악 및 정리의 어려움을 해결할 수 있다. 또한, 달력을 통해 다른 사용자의 일정을 확일할 수 있기 때문에 일정을 세우기 전에 일정이 겹치게 되는 문제를 해결할 수 있다. 달력은 일정을 관리함으로써 프로젝트 등 중요한 일정들의 시간을 효율적으로 분배할 수 있기 때문에 시간단축의 도움을 줄 수도 있다. 일정관리의 중요성은 현재까지 많은 종류의 달력들이 존재하고 생겨나고 있다는 점을 보면 알 수 있다. 많은 달력이 있기 때문에, 해당 프로그램들의 주요 특징들을 파악하고, 자신이 필요한 기능에 맞는 프로그램을 선정하여 사용하는 것을 권장한다.
  
== 특징 ==
+
==특징==
 
달력은 사용자에게 있어서 중요하기 때문에 이와 관련된 많은 달력이 존재하고, 계속 만들어지고 있다. 이 많은 달력에서 공통된 특징들은 첫 번째로, 일정관리가 편리하다. 달력이 만들어지기 전에, 활성화되기 전엔 모든 일정은 수기로 작성되어 관리되었으며, 이는 여러 문제점을 일으켰다. 일정이 밀리게 되면 밀린 부분부터 끝까지 재작성해야 하며, 중간에 몇몇 일정을 빠트리게 되어 전체 일정에 차질이 생기는 등의 작은 실수가 큰 문제로 돌아오게 되었다. 달력을 사용함으로써 주간, 월간 등 긴 기간의 일정들도 한눈에 보기 쉬워졌으며 빠진 일정이나 잘못 등록된 일정들도 빠르게 파악이 가능해졌다. 또한, 사용자가 잊어버린 일정에 대해 해당 프로그램이 미리 알려줌으로써 잊어버리는 일이 감소하게 되었다. 두  번째로, 다른 사용자와 일정 공유가 가능하다. 회사나 기관 등 여러 사람의 일정을 통합하여 진행하는 업무를 하는 곳은 한사람이 아닌 여러 사람들의 일정의 공유가 이뤄져야지만 업무나 프로젝트를 진행할 수 있다. 같은 프로그램을 사용함으로써 자신만이 아닌 다른 사용자들의 일정을 파악할 수 있으며, 공유를 통해 자신 또는 통합 일정을 쉽게 그에 맞춰 변경할 수 있다. 세  번째로, 디자인 변경이 가능하다. 각 달력에서 제공하는 스티커나 디자인 등으로 사용자의 취향에 맞게 달력의 모양과 전체적인 디자인을 변경할 수 있다.<ref>PHP 해피씨쥐아이 - http://www.happycgi.com/program/category.php?category=595</ref>
 
달력은 사용자에게 있어서 중요하기 때문에 이와 관련된 많은 달력이 존재하고, 계속 만들어지고 있다. 이 많은 달력에서 공통된 특징들은 첫 번째로, 일정관리가 편리하다. 달력이 만들어지기 전에, 활성화되기 전엔 모든 일정은 수기로 작성되어 관리되었으며, 이는 여러 문제점을 일으켰다. 일정이 밀리게 되면 밀린 부분부터 끝까지 재작성해야 하며, 중간에 몇몇 일정을 빠트리게 되어 전체 일정에 차질이 생기는 등의 작은 실수가 큰 문제로 돌아오게 되었다. 달력을 사용함으로써 주간, 월간 등 긴 기간의 일정들도 한눈에 보기 쉬워졌으며 빠진 일정이나 잘못 등록된 일정들도 빠르게 파악이 가능해졌다. 또한, 사용자가 잊어버린 일정에 대해 해당 프로그램이 미리 알려줌으로써 잊어버리는 일이 감소하게 되었다. 두  번째로, 다른 사용자와 일정 공유가 가능하다. 회사나 기관 등 여러 사람의 일정을 통합하여 진행하는 업무를 하는 곳은 한사람이 아닌 여러 사람들의 일정의 공유가 이뤄져야지만 업무나 프로젝트를 진행할 수 있다. 같은 프로그램을 사용함으로써 자신만이 아닌 다른 사용자들의 일정을 파악할 수 있으며, 공유를 통해 자신 또는 통합 일정을 쉽게 그에 맞춰 변경할 수 있다. 세  번째로, 디자인 변경이 가능하다. 각 달력에서 제공하는 스티커나 디자인 등으로 사용자의 취향에 맞게 달력의 모양과 전체적인 디자인을 변경할 수 있다.<ref>PHP 해피씨쥐아이 - http://www.happycgi.com/program/category.php?category=595</ref>
  
== 비교 ==
+
==비교==
 
===윈도우 달력===
 
===윈도우 달력===
 
[[파일:윈도우 글자.png|썸네일|300픽셀|'''[[윈도우]]'''(Windows)]]
 
[[파일:윈도우 글자.png|썸네일|300픽셀|'''[[윈도우]]'''(Windows)]]
33번째 줄: 33번째 줄:
  
 
구글 달력과 같이 네이버 달력의 사용자 인터페이스는 기념일과 휴일등을 달력에 표시한다. 상하가 분할되는 사용자 인터페이스를 가지고 있어서 달력만 보는 것도 가능하다. 또한, 네이버 달력의 위젯은 11개이며, 일정 목록이나 디데이(D-Day)와 월별 달력 및 학생들이 많이 사용하는 시간표까지 다양한 위젯을 사용할 수 있어 구글 달력보다 앞서고 있다. 한국에서 서비스하는 네이버 달력은 음력을 지원한다는 장점이 있지만, 아이캘 형식의 주소를 지원하지 않아 다른 서비스에 연동하기가 어렵고 기타 에버노트와 다양한 서비스에서 일정을 불러올 때 대부분 구글 달력을 사용하여 외부 공유 부문에 있어서는 불리하다.<ref name="구네"></ref>{{자세히|네이버㈜}}
 
구글 달력과 같이 네이버 달력의 사용자 인터페이스는 기념일과 휴일등을 달력에 표시한다. 상하가 분할되는 사용자 인터페이스를 가지고 있어서 달력만 보는 것도 가능하다. 또한, 네이버 달력의 위젯은 11개이며, 일정 목록이나 디데이(D-Day)와 월별 달력 및 학생들이 많이 사용하는 시간표까지 다양한 위젯을 사용할 수 있어 구글 달력보다 앞서고 있다. 한국에서 서비스하는 네이버 달력은 음력을 지원한다는 장점이 있지만, 아이캘 형식의 주소를 지원하지 않아 다른 서비스에 연동하기가 어렵고 기타 에버노트와 다양한 서비스에서 일정을 불러올 때 대부분 구글 달력을 사용하여 외부 공유 부문에 있어서는 불리하다.<ref name="구네"></ref>{{자세히|네이버㈜}}
 
== 코드 ==
 
아래 코드를 복사한 후 메모장이나 편집기에 붙이고, 파일명을 "calendar.html"로 정한 후, 웹브라우저에서 띄우면, 달력 프로그램이 작동한다.
 
 
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>달력 프로그램</title>
 
    <style>
 
        body {
 
            font-family: Arial, sans-serif;
 
            display: flex;
 
            flex-direction: column;
 
            align-items: center;
 
            justify-content: center;
 
            height: 100vh;
 
            margin: 0;
 
        }
 
        .calendar {
 
            width: 300px;
 
            text-align: center;
 
        }
 
        .calendar-header {
 
            display: flex;
 
            justify-content: space-between;
 
            align-items: center;
 
        }
 
        .calendar-header button {
 
            padding: 10px;
 
        }
 
        .calendar-header div {
 
            flex: 1;
 
            text-align: center;
 
        }
 
        .calendar-days {
 
            display: grid;
 
            grid-template-columns: repeat(7, 1fr);
 
            gap: 5px;
 
        }
 
        .calendar-days div {
 
            padding: 10px;
 
            border: 1px solid #ddd;
 
        }
 
        .calendar-days .sunday {
 
            color: red;
 
        }
 
        .calendar-days .saturday {
 
            color: blue;
 
        }
 
    </style>
 
</head>
 
<body>
 
    <div class="calendar">
 
        <div class="calendar-header">
 
            <button onclick="prevMonth()">이전</button>
 
            <div id="year"></div>
 
            <div id="month"></div>
 
            <button onclick="nextMonth()">다음</button>
 
        </div>
 
        <div class="calendar-days" id="calendar-days"></div>
 
    </div>
 
    <script>
 
        const monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
 
        const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
 
        let currentDate = new Date();
 
        function generateCalendar(date) {
 
            const calendarDays = document.getElementById('calendar-days');
 
            const yearElement = document.getElementById('year');
 
            const monthElement = document.getElementById('month');
 
            calendarDays.innerHTML = '';
 
            const year = date.getFullYear();
 
            const month = date.getMonth();
 
            yearElement.innerText = `${year}년`;
 
            monthElement.innerText = monthNames[month];
 
            dayNames.forEach((day, index) => {
 
                const dayElement = document.createElement('div');
 
                dayElement.innerText = day;
 
                if (index === 0) {
 
                    dayElement.classList.add('sunday');
 
                } else if (index === 6) {
 
                    dayElement.classList.add('saturday');
 
                }
 
                calendarDays.appendChild(dayElement);
 
            });
 
            const firstDay = new Date(year, month, 1).getDay();
 
            const lastDate = new Date(year, month + 1, 0).getDate();
 
            for (let i = 0; i < firstDay; i++) {
 
                const emptyCell = document.createElement('div');
 
                calendarDays.appendChild(emptyCell);
 
            }
 
            for (let i = 1; i <= lastDate; i++) {
 
                const dayElement = document.createElement('div');
 
                dayElement.innerText = i;
 
                const dayOfWeek = new Date(year, month, i).getDay();
 
                if (dayOfWeek === 0) {
 
                    dayElement.classList.add('sunday');
 
                } else if (dayOfWeek === 6) {
 
                    dayElement.classList.add('saturday');
 
                }
 
                calendarDays.appendChild(dayElement);
 
            }
 
        }
 
        function prevMonth() {
 
            currentDate.setMonth(currentDate.getMonth() - 1);
 
            generateCalendar(currentDate);
 
        }
 
        function nextMonth() {
 
            currentDate.setMonth(currentDate.getMonth() + 1);
 
            generateCalendar(currentDate);
 
        }
 
        window.onload = () => {
 
            generateCalendar(currentDate);
 
        };
 
    </script>
 
</body>
 
</html>
 
  
 
{{각주}}
 
{{각주}}
  
== 참고자료 ==
+
==참고자료==
 
* 윈도우 달력 위키백과 - https://ko.wikipedia.org/wiki/%EC%9D%BC%EC%A0%95_(%EC%9C%88%EB%8F%84%EC%9A%B0)
 
* 윈도우 달력 위키백과 - https://ko.wikipedia.org/wiki/%EC%9D%BC%EC%A0%95_(%EC%9C%88%EB%8F%84%EC%9A%B0)
 
* 캘린더 (응용 소프트웨어) 위키백과 - https://ko.wikipedia.org/wiki/%EC%BA%98%EB%A6%B0%EB%8D%94_(%EC%9D%91%EC%9A%A9_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)
 
* 캘린더 (응용 소프트웨어) 위키백과 - https://ko.wikipedia.org/wiki/%EC%BA%98%EB%A6%B0%EB%8D%94_(%EC%9D%91%EC%9A%A9_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)

위키원에서의 모든 기여는 다른 기여자가 편집, 수정, 삭제할 수 있다는 점을 유의해 주세요. 만약 여기에 동의하지 않는다면, 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다 (자세한 사항은 위키원:저작권 문서를 보세요). 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 | 편집 도움말 (새 창에서 열림)