그누보드 QA - 배경이미지위의 시계

배경이미지위의 시계

짱구짱구 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.10.10 13:35:34 조회 1034 (211.♡.♡.1)

본문

https://sir.kr/qa/513735?&vpage=1#answer_513741

의 소스에 위 시계를

아래경로의 이미지를 넣어서

배경이미지 위에 나오게 하고 싶습니다.

고수님들 부탁 드립니다.

#시계

답변 2

비타주리 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-10 13:53:41 218.♡.♡.52


<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<style>
#todayDiv { width:500px; height:360px; padding-top:200px; box-sizing:border-box; background-image:url('https://blog.kakaocdn.net/dn/GQ8UO/btstX5Sj7ZD/ENNGXlq7MZFe9G9dPdVAQ0/img.png'); background-size:cover; background-position:center; margin:0 auto; }
#todayTable { color:#ffffff; font-family:Lato; font-weight:bold; margin:0 auto; }
#todayHead { text-align:center; padding:0px; font-size:4rem; }
#todayTail { text-align:center; padding:0px ; font-size:2rem; }
#todayTail span { font-size:1.2rem; }
</style>
<script>
weekKr = "일월화수목금토";
document.write(`
    <div id="todayDiv">
        <table id="todayTable">
            <tr><td id="todayHead"></td></tr>
            <tr><td id="todayTail"></td></tr>
        </table>
    </div>
`);
function todayMode() {
    todayTime = new Date();
    todayHead.innerText = String(todayTime).split(" ")[4];
    currentYear = todayTime.getFullYear() + ".";
    currentMonth = ("0" + (todayTime.getMonth() + 1)).slice(-2) + ".";
    currentDay = ("0" + todayTime.getDate()).slice(-2) + ".";
    currentWeek = weekKr[todayTime.getDay()] + "<span>요일</span>"; 
    todayTail.innerHTML = currentYear + currentMonth + currentDay + currentWeek;
}
todayMode();
setInterval(todayMode, 1000);
</script>

https://wittazzurri.com/editor/html_editor.php 에서 확인해보세요.

세세한 css 설명은 생략합니다.^^