단비의 코딩 공부 blog

[Vanilla JS]study 14일차 - 웹 컨텐츠 제작 - 보드프리뷰 본문

javascript&jquery

[Vanilla JS]study 14일차 - 웹 컨텐츠 제작 - 보드프리뷰

황굽달 2023. 3. 22. 09:03

보드프리뷰

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - 보드프리뷰</title>
        <link rel="stylesheet" href="board01.css">
    </head>
    <body>
        <div class="notice">
            <h3>공지사항</h3>
            <ul id="noticeList">
                <li>
                    <!--tabindex : -1을 주면 초점이 안잡힘-->
                    <a href="#" tabindex="-1">07월 토요영화상영이 있는 날입니다. 어린이들과 함께 방문해 주세요</a>
                    <span class="date">2020-06-16</span>
                </li>
                <li>
                    <a href="#" tabindex="-1">2020년 어린이 허준교실(접수06/15~)</a>
                    <span class="date">2020-06-15</span>
                </li>
                <li>
                    <a href="#" tabindex="-1">제8기 문화시민봉사단(대학생) 모집</a>
                    <span class="date">2020-06-14</span>
                </li>
                <li>
                    <a href="#" tabindex="-1">"Merry 한방 떡케이크 만들기"</a>
                    <span class="date">2020-06-13</span>
                </li>
            </ul>
            <a href="#" class="more">더보기</a>
        </div>

        <script src="board01.js"></script>
    </body>
</html>

 

/* base */
*{ padding: 0; margin: 0; }
li{ list-style: none; }
a{ text-decoration: none; }
body{ background-color: #ededed; }

/* 공지사항 */
.notice{
    position: relative;
    width: 500px; height: 40px; margin: 50px;
    padding: 0px 10px; box-sizing: border-box;
    background-color: #333;

    overflow: hidden; /* 내 영역을 넘어가는 자손을 안보이게 처리 */
}
.notice h3{
    float: left; /* 동생요소가 옆으로 올라옴 */
    width: 100px; height: 40px;
    color: #fff; line-height: 40px; font-size: 16px;
}
.notice ul{ /* 움직이는 요소 */
    position: absolute; /* 자신의 현재 위치에서 상대적 이동 */
    float: left; /* 남은 부모 영역에서 왼쪽으로 붙임 */
    width: 300px; height: 40px;
    top: 0; /* 변할 위치 속성 */
    left: 100px;

    opacity: 0;
}
.notice ul.active{ opacity: 1; transition: 0.2s; }

.notice li{
    width: 300px; height: 40px;
    line-height: 40px; /* height와 line-height 수치가 같으면 리스트 세로 가운데 처리 */
}
.notice li a{ /* 중간에 li를 안쓰면 notice에 있는 다른 a태그로 선택될 수 있으므로 정확히 선택 */
    float: left; /* 날짜가 옆에 올라와야 하므로 */
    display: block; /* 영역이 존재해야 글자줄임 가능 */
    width: 200px; height: 40px;
    color: #fff; font-size: 14px;

    /* 한줄 텍스트 줄임 공식 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice .date{
    float: right;
    color: #ccc; font-size: 14px;
}
.notice .more{
    float: right; /* 부모 영역에 오른쪽으로 붙임 */
    line-height: 40px; font-size: 14px; color: #fff;
}

 

//1. 문서객체 선택 - 움직일 객체 - ul
const noticeList = document.querySelector('#noticeList');

//2. 초기 실행 나타나게 처리 + 첫번째 a태그가 초점받게 처리
noticeList.classList.add('active');
noticeList.firstElementChild.firstElementChild.setAttribute('tabindex', '0');


//3. 3초마다 다음 순번으로 변경
setInterval(function(){
    //다시 안보이게 처리
    noticeList.classList.remove('active');

    //초점 받는것을 모두 제거
    const activeLink = noticeList.getElementsByTagName('a');

    for(let i=0;i<activeLink.length;i++){
        activeLink[i].setAttribute('tabindex', '-1');
    }

    //다시 보이게 처리
    setTimeout(function(){
        //appendChild() - 문서객체의 마지막 자손으로 추가(이동 - 미리 정적생성이 되어있는 객체는 이동처리)
        noticeList.appendChild(noticeList.firstElementChild);
        noticeList.firstElementChild.firstElementChild.setAttribute('tabindex', '0');
        noticeList.classList.add('active');
    },100);

}, 3000);

 

저작자표시

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

[Vanilla JS]study 16일차 - 웹 컨텐츠 제작 - 메인 메뉴  (0) 2023.03.24
[Vanilla JS]study 15일차 - 웹 컨텐츠 제작 - 검색 필터  (0) 2023.03.23
[Vanilla JS]study 13일차 - 웹 컨텐츠 제작 - 드롭 다운 메뉴  (0) 2023.03.21
[Vanilla JS]study 12일차 - ES6 2  (0) 2023.03.16
[Vanilla JS]study 11일차 - ES6  (0) 2023.03.13
'javascript&jquery' Related Articles more