[2023 동계 모각코] 2024-01-15(월) 결과

 

education. html 구현

 

1. 이미지 슬라이드 구현

교육 행사를 8개의 섹션으로 구분하여 각 섹션마다 대표 이미지를 삽입하고 싶었다.

부트스트랩의 캐러셀을 사용하면 더 쉽게 구현이 가능했을텐데 이번에는 캐러셀의 존재를 몰라 JS 함수를 정의해서 구현했다. 

 

아래 JS 코드처럼 이미지별로 섹션을 붙이고, 섹션별로 이미지의 수를 length로 받아 구분하는 방식이다.

// Thumbnail image controls
function currentSlide(n, section) {
  if (section === 'education') {
    showSlides(educationSlideIndex = n, 'education');
  } else if (section === 'study') {
    showSlides(studySlideIndex = n, 'study');
  } else if (section === 'seminar') {
    showSlides(seminarSlideIndex = n, 'seminar');
  } else if (section === 'hacking') {
    showSlides(hackingSlideIndex = n, 'hacking');
  } else if (section === 'hackathon') {
    showSlides(hackathonSlideIndex = n, 'hackathon');
  } else if (section === 'aff') {
    showSlides(affSlideIndex = n, 'aff');
  } else if (section === 'jfs') {
    showSlides(jfsSlideIndex = n, 'jfs');
  }
}

function showSlides(n, section) {
    var i;
    var slides = document.getElementsByClassName("mySlides-" + section);
    var dots = document.getElementsByClassName("thumbnail-" + section);
    
    if (n > slides.length) { 
      n = 1;
    }
    if (n < 1) { 
      n = slides.length;
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    
    slides[n - 1].style.display = "block";
    dots[n - 1].className += " active";
 }

 

 

2. 스프레드시트 → html table 변환

eduction의 하위 페이지들이 있는데, 이 중 세미나 페이지에 기존 기록을 표 형식으로 옮기고 싶었다.

스프레스시트에 입력된 390행이 넘는 많은 데이터를 수작업으로 html 테이블로 옮기기는 어려웠는데 유용한 사이트를 발견했다.

 

📎 HTML Table 생성기 : https://www.tablesgenerator.com/html_tables

 

표를 복사해서 제너레이터에 붙여 넣은 후 간단한 서식 수정도 가능하다.

위 사이트를 활용하여 아래 같이 세미나 페이지를 완성했다.

 

3. 최종 작업 결과

맥북에서는 스크롤 캡처를 제공하지 않아 별로 프로그램을 사용하는데, 이번 파일은 JS 때문에 형식이 다 깨져서 보인다 🥹

그래서 일부 화면 캡처로 대체한다