전주시청

• 사이트명 : 전주시청
• 사용언어 : HTML, CSS, JS
• 사용플러그인 : Swiper
• 분류 : 적응형 PC, 클론코딩

---

1. Sub NAV 높이

• 네비게이션 hover시 각 메뉴의 sub메뉴의 높이가 다르게 구현
  

/* css */
#header {
  position: relative;
  --height: 0;
}
#header::before {
  display: block;
  position: absolute;
  left: 0px;
  top: calc(100% - 110px);
  z-index: 9;
  width: 100%;
  height: calc(var(--height) * 1px);
  box-shadow: 0 20px 20px rgba(0,0,0,0.13);
  background: #fff;
  transition: .3s;
  content: "";
}

🍀 #header에게 가상요소::before로 공간을 만들어줘서 .nav-item의 background를 만들어주는 방식을 사용했다.

• #header { --height:0; } 변수(--height)를 생성한다.
• #header::before { height: calc(var(--height) * 1px); }

➡️ 변수가 0이 아닌 다른 숫자가 된다면 그 숫자에 맞춰 높이를 설정이 되도록 했다.

// js
$('#header .nav .nav-item').hover(function(){
  subH = $(this).find('.depth2-list').height();
  $('#header').css('--height', `calc(${subH} + 40)`);
  $(this).find('.depth2-list').addClass('show');
}, function(){
  $('#header').css('--height',0);
  $(this).find('.depth2-list').removeClass('show');
});

• .depth2-list의 높이 값을 구한다.
• #header --height 변수에.depth2-list의 높이 값을 준다.
• 숨겨져 있었던 .depth2-list에게 .show를 추가해서 나타나게 한다.

🌟 이때 transition을 사용할때 딜레이 값을 넣어줘서 .depth2-list가 #header::before보다 .1초 늦게 나오도록 해서 자연스러운 움직임을 보이도록 보완했다.

.show {
  visibility: visible;
  opacity: 1;
  transition: .3s .1s;
}

2. Swiper슬라이드

• 좌우 슬라이드 이동, 일시정지 가능하도록 하기, 인덱스 표시
  

🍀 좌우 슬라이드 이동

// sc-banner swiper-slide
const bannerSlide = new Swiper ('.sc-banner .group-banner .swiper',{
  navigation:{
    nextEl:".sc-banner .control .next", // 다음 버튼
    prevEl:".sc-banner .control .prev", // 이전 버튼
  },
})

🍀 슬라이드 일시정지

// sc-banner swiper-slide 
$('.sc-banner .control .pause').on('click',function(){
  $(this).toggleClass('auto');

  if($(this).hasClass('auto')){
    bannerSlide.autoplay.stop();
  } else {
    bannerSlide.autoplay.start();
  }
})

• 정지 버튼을 클릭할 때 .auto를 추가해서 아이콘이 변경하게 한다.
• .auto의 유무로 슬라이드를 재생할지 정지시킬 지 컨트롤한다.

🍀 슬라이드 인덱스 움직임

<!-- html -->
<div class="swiper-bottom">
  <div class="control">
    <div class="fraction">
      <span class="curr">1</span>
      <i>/</i>
      <span class="total">?</span>
    </div>
  </div>
</div>

// js
// sc-banner swiper-slide
const bannerSlide = new Swiper ('.sc-banner .group-banner .swiper',{
  on:{
    "init":function(){ // 슬라이더가 초기화될 때 실행
      $('.sc-banner .fraction .total').text(this.slides.length);
    },
    // 요소의 텍스트 개수를 구해서 슬라이드 개수로 설정
    "slideChange":function(){ // 사용자가 슬라이드를 변경할 때 실행
      $('.sc-banner .fraction .curr').text(this.realIndex+1);
    }
    // 요소의 슬라이드 인덱스를 구하는데, 인덱스는 0부터 시작하므로 +1을 해줘서 순차적으로 인덱스가 구해지도록 설정
  }
})

3. Swiper슬라이드 이미지 alt와 텍스트 동일

• 탭메뉴 클릭 시에도 슬라이드가 움직임, 슬라이드 내용 = 텍스트 내용 동일

const news2Slide = new Swiper('.sc-news #newsTab2 .swiper',{
  on:{
    "init":function(){
      $('.sc-news #newsTab2 .total').text(this.slides.length);
      desc = $(this.slides[this.activeIndex]).find('img').attr('alt');
      $('.sc-news #newsTab2 .desc').text(desc);
    },
    "slideChange":function(){
      $('.sc-news #newsTab2 .curr').text(this.realIndex+1);
      desc = $(this.slides[this.activeIndex]).find('img').attr('alt');
      $('.sc-news #newsTab2 .desc').text(desc);
    }
  }
}); 

• on 옵션 : 콜백 함수를 설정할 수 있다.

• "init": Swiper가 처음 초기화될 때 실행되는 콜백이다.
  ➡️
  1. 슬라이드의 총 개수를 구해서, 텍스트1로 숫자를 표시한다.
  ('.sc-news #newsTab2 .total': 텍스트1)
  2. 현재 활성화된 슬라이드의 img 태그의 alt 속성을 가져와서 desc 변수에 저장한다.
  3. 가져온 alt 값을 텍스트2로 표시한다.
  ('.sc-news #newsTab2 .desc': 텍스트2)
  

• "slideChange": 슬라이드가 변경될 때마다 실행되는 콜백이다.
  ➡️
  1. 현재 슬라이드의 인덱스를 텍스트3에 표시한다.
  ('.sc-news #newsTab2 .curr': 텍스트3)
  

🌟 .find('img').attr('alt') = img 태그의 alt 속성을 가져와서 텍스트로 변경되도록 만드는게 포인트!!!

4. 다크모드

• 버튼 클릭 시 다크모드 전환, 텍스트 변경
  

• 스타일링은 속성선택자를 활용[data-dark="true"]하여 dark모드일때 해당 부분이 변경될 수 있도록 작성한다.

$('#header .group-top .dark').click(function (e) { 
  e.preventDefault();
  let isDarkMode = $('html').attr('data-dark') == 'true';

  $('html').attr('data-dark', !isDarkMode); // 다크 모드 상태 변경

  // 다크 모드 상태에 따라 텍스트 변경
  $('.util-item:last-child .dark').text(isDarkMode ? '다크모드' : '라이트모드');
});

• $('html').attr('data-dark') == 'true'로 현재 다크 모드 상태를 확인한다.
• $('html').attr('data-dark', !isDarkMode);로 다크 모드를 토글한다.
• $('.util-item:last-child .dark').text(isDarkMode ? '다크모드' : '라이트모드');
• 다크 모드 상태면 '라이트모드'로 텍스트 변경한다.
• 라이트 모드 상태면 '다크모드'로 텍스트 변경한다.

마치며

공공기관 사이트이다 보니 전달해야하는 내용이 많아서 마크업과 클래스명을 짓는데 집중을 많이 했던 거 같다. 그리고 평소에는 Swiper의 기본 슬라이드를 주로 사용했었는데, 보다 다양한 구현이 가능하다는 걸 깨닫게 되었다.