단비의 코딩 공부 blog

[javascript]새로고침 후 랜덤으로 슬랏에 백그라운드 컬러 이동 본문

javascript&jquery

[javascript]새로고침 후 랜덤으로 슬랏에 백그라운드 컬러 이동

황굽달 2023. 6. 28. 15:33

1. html

<body>
    <div class="box_wrap">
        <section class="box-type">
            <div class="title-con01">
                <strong class="title-type01 bold"><span class="tit">댓글 많은 뉴스</span></strong>
            </div>
            <div class="list-type118">
                <ol class="list02" id="rollingList">
                    <li class="rolling">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_1" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
										<img src="$$_ImgUrl_$$_1">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news"> $$_Title_$$_1</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="rolling">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_2" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
                                        <img src="$$_ImgUrl_$$_2">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news">$$_Title_$$_2</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="rolling">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_3" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
                                        <img src="$$_ImgUrl_$$_3">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news"> $$_Title_$$_3</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                </ol>
            </div>
        </section>
    </div>
</body>

2.CSS

<style>
    body{margin: 0; padding:0}
    a{color: #000; text-decoration: none; cursor: pointer;}
    .title-con01{display: block; box-sizing: border-box; padding: 5px 5px 7px;}
    .tit{font-size:20px;line-height:26px; font-weight:bold; letter-spacing: -1px;}
    .box_wrap {display: block; box-sizing: border-box; width: 300px; height:250px; padding: 0px; border: 1px solid #ddd;}
    .box-type {width: 100%; height: 100%;}
/* 
    * list-type118 - BEST 5 오래 머문 뉴스
    * .list01 : 메인
    * .list02 : 서브,본문
    * .item-box01 : 강조 */ 
    .list-type118{width: 100%; height: 100%; overflow:hidden;}
    .list-type118>[class*='list']{position:relative;font-size:0;}
    .list-type118 .list>li{min-height:80px;}
    .list-type118 [class*='item-box']{background-color:#fff;}
    .list-type118 [class*='item-box']>[class*='-con']{display:inline-block;position:relative;box-sizing:border-box;vertical-align:top;}
    .list-type118 .img .img-con {width:50%; height:60px; position: relative; overflow: hidden;}
    .list-type118 .img .img-con img {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 100%; height: auto;}
    .list-type118 .news-con{width:100%;}
    .list-type118 .tit-wrap{display:table-cell;height:52px;vertical-align:middle;}

    .list-type118 .tit-news{overflow:hidden;max-height:48px;font-size:16px;font-weight:400;line-height:24px;vertical-align:middle;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;}

    /* hover */
    .list-type118 a:hover .tit-news{text-underline-position:under;text-decoration-thickness:1px;text-decoration-line:underline;text-decoration-color:currentColor;}
    /* .item-box01 : 강조 */
    .active .item-box{background-color:#102039;}
    .active .item-box .tit-news{color:#fff; font-size: 20px;}
    .active .item-box:hover{background-color:#3061ff;}
    .active .item-box:hover .tit-news{text-decoration:none;}
    .active .item-box .tit-news{font-weight:600;}
    .list-type118>.list02 .active [class*='item-box']{padding:5px;}

    /* .list02 : 서브,본문 */
    .list02{padding:0;}
    .list-type118>.list02 .img-con+.news-con{width:100%;margin-left:10px;}
    .cont{display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
    .item-box {box-sizing: border-box;padding:5px;}
</style>

3.JS

 <script>
    // 새로고침 시 active 클래스 랜덤 적용
    window.addEventListener('load', function() {
        var liList = document.querySelectorAll('.list-type118 li');
        var randomIndex = Math.floor(Math.random() * liList.length);
        liList[randomIndex].classList.add('active');
    });
</script>

index.html
0.01MB

저작자표시

'javascript&jquery' 카테고리의 다른 글

[javascript] react 들어가기 전! javascript 복습 (실전2)  (0) 2023.11.22
[javascript] react 들어가기 전! javascript 복습 (실전1)  (1) 2023.11.21
[javascript]해당 슬롯 롤링 및 새로고침 후 백그라운드 색상 랜덤  (0) 2023.06.27
[Vanilla JS]study 27일차 - 함수  (0) 2023.05.12
[Vanilla JS]study 26일차 - 네이버 회원가입창 제작  (0) 2023.05.08
'javascript&jquery' Related Articles more