연습장:Sakura: 두 판 사이의 차이

  • 최근 수정 시각: 2026년 6월 6일 (토) 03:16
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
← 이전 편집
시각위키텍스트
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 236개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<html>
{| class ="wikitable" style="width: 400px; border: 2px solid #003B96; text-align: center;  margin: auto;"
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
| colspan="4" style="text-align: center; color: #fff; background: #003B96;" | <big><big>'''제23대 승상선거 서울특별시'''</big></big>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|-
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
| rowspan="2"  width="15%" style="text-align: center; background: #eee;" | '''기호'''
 
| width="35%" style="text-align: center; background: #eee;" | '''이름'''
<!-- swiper슬라이더 메인컨테이너 -->
| width="25%" style="text-align: center; background: #eee;" | '''득표수'''
<div class="swiper-container">
| width="25%" style="text-align: center; background: #eee;" | '''순위'''
  <!-- 보여지는 영역 -->
|-
  <div class="swiper-wrapper">
| style="text-align: center; background: #eee;" | '''정당'''
    <!-- div class="swiper-slide" 를 추가하면된다 -->
| style="text-align: center; background: #eee;" | '''득표율'''
    <div class="swiper-slide">Slide 1</div>
| style="text-align: center; background: #eee;" | '''비고'''
    <div class="swiper-slide">Slide 2</div>
|-
    <div class="swiper-slide">Slide 3</div>
| rowspan="2"  width="15%" style="text-align: center; color: #ffffff; background: #C9151E;" | <big><big><big>'''1'''</big></big></big>
    <div class="swiper-slide">Slide 4</div>
| width="35%" style="text-align: center;" | 하주성(河-)
    <div class="swiper-slide">Slide 5</div>
| width="25%" style="text-align: center;" | 3,641,314
    <div class="swiper-slide">Slide 6</div>
| width="25%" style="text-align: center;" | 2위
  </div>
|-
  <!-- 페이징 버튼 처리 -->
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #C9151E; font-size: 0.9em">{{글씨 색|#fff|'''자유한국당'''}}</span>
  <div class="swiper-pagination"></div>
| style="text-align: center;" | 48.26%
 
| style="text-align: center;" | 낙선
  <!-- 방향 버튼 상황에 따라 추가 삭제가능 -->
|-
  <div class="swiper-button-prev"></div>
| rowspan="2"  width="15%" style="text-align: center; color: #fff; background: #003B96;" | <big><big><big>'''2'''</big></big></big>
  <div class="swiper-button-next"></div>
| width="35%" style="text-align: center;" | '''도민정(都-)'''
</div>
| width="25%" style="text-align: center;" | '''3,520,529'''
<style>
| width="25%" style="text-align: center;" | '''1위'''
//초기설정
|-
html, body {
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #003B96; font-size: 0.9em">{{글씨 색|#fff|'''민주당'''}}</span>
      position: relative;
| style="text-align: center;" | '''48.26%'''
      height: 100vh;
| style="text-align: center; background:gold" | '''당선'''
    }
|-
    //초기 설정
| rowspan="2"  width="15%" style="text-align: center; color: #fff; background: #D6001C;" | <big><big><big>'''3'''</big></big></big>
    body {
| width="35%" style="text-align: center;" | 팜하니(Pham-)
      background: #eee;
| width="25%" style="text-align: center;" | 215,633
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
| width="25%" style="text-align: center;" | 3위
      font-size: 14px;
|-
      color:#000;
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #D6001C; font-size: 0.9em">{{글씨 색|#fff|'''통합진보당'''}}</span>
      margin: 0;
| style="text-align: center;" | 3.49%
      padding: 0;
| style="text-align: center;" | 낙선
    }
|-
    //.swiper-container 설정
| rowspan="2"  width="15%" style="text-align: center; color: #fff; background: #5CB32E;" | <big><big><big>'''5'''</big></big></big>
    .swiper-container {
| style="text-align: center;" | 장기수(張-)
      width: 100%;
| colspan="2" rowspan="2" style="text-align: center; background: #eee;" | ''사퇴''
      height: 100vh;
|-
    }
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #5CB32E; font-size: 0.9em">{{글씨 색|#fff|'''녹색당'''}}</span>
    //.swiper-slide 설정
|-
    .swiper-slide {
| rowspan="3"  width="15%" style="text-align: center; background: #eee;" | '''계'''
      text-align: center;
| width="35%" style="text-align: center; background: #eee;" | '''선거인 수'''
      font-size: 18px;
| width="25%" style="text-align: center; background: #eee;" | 9,762,954
      background: #fff;
| rowspan="3"  width="25%" style="text-align: center; background: #eee;" | '''투표율'''<br>75.41%
 
|-
      /* Center slide text vertically */
| style="text-align: center; background: #eee;" | '''투표 수'''
      display: -webkit-box;
| style="text-align: center; background: #eee;" | 7,410,082
      display: -ms-flexbox;
|-
      display: -webkit-flex;
| style="text-align: center; background: #eee;" | '''무효표 수'''
      display: flex;
| style="text-align: center; background: #eee;" | 32,604
      -webkit-box-pack: center;
|-
      -ms-flex-pack: center;
|}
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
   
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
.swiper-container-vertical>.swiper-pagination-bullets{
    top: unset !important;
    bottom: 10px;
    left: 0;
    width: 100%;
}
//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  display : inline-block !important;
  margin: 6px 2px !important;
}
</style>
<script>
const swiper = new Swiper('.swiper-container', {
  //기본 셋팅
  //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
  direction: 'horizontal',
  //한번에 보여지는 페이지 숫자
  slidesPerView: 3,
  //페이지와 페이지 사이의 간격
  spaceBetween: 30,
  //드레그 기능 true 사용가능 false 사용불가
  debugger: true,
  //마우스 휠기능 true 사용가능 false 사용불가
  mousewheel: true,
  //반복 기능 true 사용가능 false 사용불가
  loop: true,
  //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
  centeredSlides: true,
  // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
  // effect: 'fade',
 
 
  //자동 스크를링
  autoplay: {
    //시간 1000 이 1초
    delay: 2500,
    disableOnInteraction: false,
  },
 
  //페이징
  pagination: {
    //페이지 기능
    el: '.swiper-pagination',
    //클릭 가능여부
    clickable: true,
  },
 
  //방향표
  navigation: {
    //다음페이지 설정
    nextEl: '.swiper-button-next',
    //이전페이지 설정
    prevEl: '.swiper-button-prev',
  },
 
});
</script>
</html>

2026년 6월 6일 (토) 03:16 기준 최신판

제23대 승상선거 서울특별시
기호 이름 득표수 순위
정당 득표율 비고
1 하주성(河-) 3,641,314 2위
자유한국당 48.26% 낙선
2 도민정(都-) 3,520,529 1위
민주당 48.26% 당선
3 팜하니(Pham-) 215,633 3위
통합진보당 3.49% 낙선
5 장기수(張-) 사퇴
녹색당
계 선거인 수 9,762,954 투표율
75.41%
투표 수 7,410,082
무효표 수 32,604
원본 주소 "https://evewiki.kr/w/index.php?title=연습장:Sakura&oldid=176980"