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

  • 최근 수정 시각: 2026년 6월 6일 (토) 03:16
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
← 이전 편집
시각위키텍스트
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 193개는 보이지 않습니다)
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;" | '''이름'''
<div id="main-banner" class="swiper-container">
| width="25%" style="text-align: center; background: #eee;" | '''득표수'''
    <div class="swiper-wrapper">
| width="25%" style="text-align: center; background: #eee;" | '''순위'''
        <div class="swiper-slide">
|-
            <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'">
| style="text-align: center; background: #eee;" | '''정당'''
                <div class="banner-img slide-bottom">
| style="text-align: center; background: #eee;" | '''득표율'''
                    <img alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 100px;">
| style="text-align: center; background: #eee;" | '''비고'''
                </div>
|-
            </div>
| rowspan="2" width="15%" style="text-align: center; color: #ffffff; background: #C9151E;" | <big><big><big>'''1'''</big></big></big>
        </div>
| width="35%" style="text-align: center;" | 하주성(河-)
        <div class="swiper-slide">
| width="25%" style="text-align: center;" | 3,641,314
            <div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'">
| width="25%" style="text-align: center;" | 2위
                <div id="hannara-2" class="banner-img slide-right-300">
|-
                    <img alt="윤석열.png" src="/w/images/6/6a/Hannara-banner-2.png">
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #C9151E; font-size: 0.9em">{{글씨 색|#fff|'''자유한국당'''}}</span>
                </div>
| style="text-align: center;" | 48.26%
                <div id="hannara-3" class="banner-img slide-right-200">
| style="text-align: center;" | 낙선
                    <img alt="나경원.png" src="/w/images/8/89/Hannara-banner-1.png">
|-
                </div>
| rowspan="2" width="15%" style="text-align: center; color: #fff; background: #003B96;" | <big><big><big>'''2'''</big></big></big>
                <div id="hannara-4" class="banner-img slide-right-100">
| width="35%" style="text-align: center;" | '''도민정(都-)'''
                    <img alt="이재명.png" src="/w/images/3/3a/Hannara-banner-3.png">
| width="25%" style="text-align: center;" | '''3,520,529'''
                </div>
| width="25%" style="text-align: center;" | '''1위'''
                <div id="hannara-1" class="banner-img text-focus-in slide-bottom-only-mobile-520">
|-
                    <img alt="한나라닷컴.png" src="/w/images/b/bc/Hannara_c.png">
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #003B96; font-size: 0.9em">{{글씨 색|#fff|'''민주당'''}}</span>
                </div>
| style="text-align: center;" | '''48.26%'''
            </div>
| style="text-align: center; background:gold" | '''당선'''
        </div>
|-
        <div class="swiper-slide">
| rowspan="2"  width="15%" style="text-align: center; color: #fff; background: #D6001C;" | <big><big><big>'''3'''</big></big></big>
            <div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'">
| width="35%" style="text-align: center;" | 팜하니(Pham-)
                <div class="banner-img slide-bottom">
| width="25%" style="text-align: center;" | 215,633
                    <img alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png">
| width="25%" style="text-align: center;" | 3위
                </div>
|-
            </div>
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #D6001C; font-size: 0.9em">{{글씨 색|#fff|'''통합진보당'''}}</span>
        </div>
| style="text-align: center;" | 3.49%
        <div class="swiper-slide">
| style="text-align: center;" | 낙선
            <div id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'">
|-
                <div class="banner-img slide-bottom">
| rowspan="2"  width="15%" style="text-align: center; color: #fff; background: #5CB32E;" | <big><big><big>'''5'''</big></big></big>
                    <img alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png">
| style="text-align: center;" | 장기수(張-)
                </div>
| colspan="2" rowspan="2" style="text-align: center; background: #eee;" | ''사퇴''
            </div>
|-
        </div>
| style="text-align: center;" | <span style="display: inline; padding: 2px 4px; border-radius: 3px; background: #5CB32E; font-size: 0.9em">{{글씨 색|#fff|'''녹색당'''}}</span>
    </div>
|-
    <div class="swiper-pagination"></div>
| rowspan="3"  width="15%" style="text-align: center; background: #eee;" | '''계'''
    <div class="swiper-button-prev"></div>
| width="35%" style="text-align: center; background: #eee;" | '''선거인 수'''
    <div class="swiper-button-next"></div>
| width="25%" style="text-align: center; background: #eee;" | 9,762,954
</div>
| rowspan="3"  width="25%" style="text-align: center; background: #eee;" | '''투표율'''<br>75.41%
<style>
|-
#main-banner {
| style="text-align: center; background: #eee;" | '''투표 수'''
        width: calc(100% + 30px);
| style="text-align: center; background: #eee;" | 7,410,082
        height: 300px;
|-
        margin-left: -1.0rem;
| style="text-align: center; background: #eee;" | '''무효표 수'''
}
| style="text-align: center; background: #eee;" | 32,604
.swiper-container {
|-
        margin-left: auto;
|}
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
}
 
.swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
}
.swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
}
.swiper-container-fade .swiper-slide {
        pointer-events: none;
        transition-property: opacity;
}
 
#main-banner .swiper-button-next { right: 30px; padding-left: 3px; }
#main-banner .swiper-button-prev { left: 30px; padding-right: 3px; }
 
#main-banner .swiper-button-next, #main-banner .swiper-button-prev {
        width: 40px !important;
        height: 40px;
        color: #222;
        font-size: 12px !important;
        box-sizing: border-box;
        /* border: 1px solid #bbb; */
        border-radius: 50%;
        background-color: #fff;
        top: 50%;
}
 
#main-banner .swiper-button-next:hover,
#main-banner .swiper-button-prev:hover {
        background-color: #466DFA;
        box-shadow: 0 4px 12px rgba(34, 53, 122, 0.4);
        transition-duration: 300ms;
        color: #FFF;
}
 
#main-banner .swiper-button-prev:after, #main-banner .swiper-button-next:after {
        font-size: 18px !important;
        font-weight: 700;
}
 
#main-banner .swiper-pagination-bullet {
        opacity: 1;
        background-color: #FFF;
}
#main-banner .swiper-pagination-bullet-active {
        background-color: #466DFA;
}
 
#banner {
        width: 100%;
        height: 300px;
        cursor: pointer;
}
#banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
}
 
/* 밑에서 올라오기 */
.slide-bottom {
        opacity: 0;
        top: 60%;
        transform: translate(-50%, -50%);
        transition: 500ms;
}
.swiper-slide-active .slide-bottom {
        opacity: 1;
        top: 50%;
        transition: 500ms;
}
/* 오른쪽에서 들어오기 */
.slide-right-100, .slide-right-200, .slide-right-300 {
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: 500ms;
}
.swiper-slide-active .slide-right-100 {
        opacity: 1;
        animation: slide-left-100 1s cubic-bezier(0.250,0.460,0.450,0.940) both;
        transition: 500ms;
}
.swiper-slide-active .slide-right-200 {
        opacity: 1;
        animation: slide-left-200 2s cubic-bezier(0.250,0.460,0.450,0.940) both;
        transition: 500ms;
}
.swiper-slide-active .slide-right-300 {
        opacity: 1;
        animation: slide-left-300 3s cubic-bezier(0.250,0.460,0.450,0.940) both;
        transition: 500ms;
}
@keyframes slide-left-100 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
@keyframes slide-left-200 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
    }
}
@keyframes slide-left-300 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-300px);
        transform: translateX(-300px);
    }
}
/* 흐렸다가 선명해지기 */
.text-focus-in {
        opacity: 0;
        transition: 500ms;
}
.swiper-slide-active .text-focus-in {
        animation: text-focus-in 1s cubic-bezier(0.550,0.085,0.680,0.530) both;
}
@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}
 
/* 위치 지정 */
.banner-img {
        position: absolute;
}
.slide-bottom {
        left: 50%;
}
 
/* 모바일 */
@media screen and (max-width: 1023px) { #main-banner, #banner { height: 200px; } }
@media screen and (max-width: 1023px) { .swiper-button-prev, .swiper-button-next { display: none; } }
 
/* 플로라 */
.flora {
        background-color: #00A366;
        color: #FFF;
}
 
/* 한나라 */
.hannara {
        background-color: #FFF;
        background-repeat: no-repeat;
        background-size: cover;
        color: #FFF;
}
#hannara-1 {
        left: 120px;
        max-width: 400px;
}
#hannara-2 {
        top: -50px;
        right: -70px;
        max-width: 550px;
}
#hannara-3 {
        top: 50px;
        right: -160px;
        max-width: 450px;
}
#hannara-4 {
        top: -10px;
        right: -230px;
        max-width: 600px;
}
@media screen and (max-width: 1023px) {
        #hannara-1 { left: 12vw; max-width: 40vw; }
        #hannara-2 { top: -7vh; right: -7vw; max-width: 450px; }
        #hannara-3 { top: 2.5vh; right: -13vw; max-width: 350px; }
        #hannara-4 { top: 0vh; right: -16vw; max-width: 400px; }
}
@media screen and (max-width: 798px) {
        #hannara-1 { left: 12vw; max-width: 40vw; }
        #hannara-2 { top: -10vh; right: -16vw; max-width: 450px; }
        #hannara-3 { top: 2.5vh; right: -23vw; max-width: 350px; }
        #hannara-4 { top: 0vh; right: -25vw; max-width: 400px; }
}
@media screen and (max-width: 520px) {
        #hannara-1 { left: 50%; max-width: 40vw; }
        #hannara-2 { display: none; }
        #hannara-3 { display: none; }
        #hannara-4 { display: none; }
        .slide-bottom-only-mobile-520 {
                opacity: 0;
                top: 60%;
                transform: translate(-50%, -50%);
                transition: 500ms;
        }
        .swiper-slide-active .slide-bottom-only-mobile-520 {
                opacity: 1;
                top: 50%;
                transition: 500ms;
        }
        .swiper-slide-active .text-focus-in { animation: none; }
}
 
/* 아나 */
.ana {
        background-color: #000070;
        color: #FFF;
}
 
/* 리좀 */
.rhizome {
        background-image: linear-gradient(135deg, #041e42 10%, #eee 10%, #eee 90%, #EC1920 90%);
        color: #FFF;
}
 
</style>
<script>
const swiper = new Swiper('.swiper-container', {
    //기본 셋팅
    //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
    direction: 'horizontal',
    //한번에 보여지는 페이지 숫자
    // slidesPerView: 1,
    //페이지와 페이지 사이의 간격
    // 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: 4000,
    disableOnInteraction: false,
    },
    speed: 300,
   
    //페이징
    pagination: {
    //페이지 기능
    el: '.swiper-pagination',
    //클릭 가능여부
    clickable: true,
    },
 
    //방향표
    navigation: {
    //다음페이지 설정
    nextEl: '.swiper-button-next',
    //이전페이지 설정
    prevEl: '.swiper-button-prev',
    },
   
});
 
let $slides = document.querySelectorAll('.swiper-slide');
for (let i of $slides) {
    i.addEventListener('mouseover', function(){
        swiper.autoplay.stop();
    });
    i.addEventListener('mouseout', function(){
        swiper.autoplay.start();
    });
}
</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"