이번 포스트에서는 JavaScript 라이브러리인 jQuery를 활용하여 타임라인과 일정 표시기를 구현하는 방법을 살펴보겠습니다.

1. HTML 구조 설정하기

먼저 HTML 파일의 구조를 설정해야 합니다. 타임라인과 일정을 표시하기 위해 div 요소를 사용하겠습니다. 아래는 예시 HTML 코드입니다.

<div id="timeline">
  <div class="event">
    <div class="date">2022-01-01</div>
    <div class="description">일정 설명</div>
  </div>
  <div class="event">
    <div class="date">2022-01-02</div>
    <div class="description">일정 설명</div>
  </div>
  ...
</div>

2. jQuery를 이용하여 타임라인 구현하기

이제 jQuery를 사용하여 타임라인을 구현해보겠습니다. 아래는 jQuery를 사용하여 타임라인을 생성하는 JavaScript 코드입니다.

$(document).ready(function() {
  // 타임라인 요소들 선택
  var events = $('#timeline .event');

  // 타임라인 요소들을 오름차순으로 정렬
  events.sort(function(a, b) {
    var dateA = new Date($(a).find('.date').text());
    var dateB = new Date($(b).find('.date').text());
    return dateA - dateB;
  });

  // 정렬된 타임라인 요소들을 다시 추가
  $.each(events, function(index, event) {
    $('#timeline').append(event);
  });
});

위의 코드에서는 $(document).ready() 함수를 사용하여 DOM이 준비되면 실행되도록 설정합니다. 그런 다음, sort() 함수를 사용하여 타임라인 요소들을 날짜 기준으로 오름차순 정렬합니다. 이후 $.each() 함수를 사용하여 정렬된 요소들을 다시 추가하여 타임라인이 정렬되도록 합니다.

3. 일정 표시기 추가하기

이제 각 일정에 해당하는 날짜 옆에 표시기를 추가해보겠습니다. 표시기는 CSS를 사용하여 스타일링할 수 있습니다. 아래는 예시 CSS 코드입니다.

.event {
  position: relative;
}

.event::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
}

위의 CSS 코드에서는 .event 클래스를 가진 요소의 앞에 가상 요소를 추가하여 표시기를 만듭니다. 해당 표시기는 원 형태로 스타일링되며 빨간색으로 설정되었습니다.

결론

이제 jQuery를 사용하여 타임라인과 일정 표시기를 구현하는 방법에 대해 알아보았습니다. 위의 코드와 스타일링을 기반으로 필요에 맞게 커스터마이징하여 사용하실 수 있습니다.

출처: CSS-Tricks