배경화면이 겹쳐서 나오네요 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

배경화면이 겹쳐서 나오네요

undefined주차

란

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

배경화면이 겹쳐서 나오네요

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>나만의 동기부여 홈화면 만들기</title>
    <script src="index.js">
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-image: url("http://linkandleave.com/files/2021/11/23/abc6c18650c06ab3f4e84fa4af2c1b08102920.jpg");
            background-position: center;
            color: white;
        }
        
        .time {
            font-size: 80px;
            font-weight: bold;
        }
        
        .greeting {
            font-size: 50px;
        }
        
        .todo {
            font-size: 30px;
        }
        
        .author {
            font-size: 25px;
            font-style: italic;
        }
        
        .main {
            width: 100vw;
            height: 60vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .quote {
            width: 100vw;
            height: 20vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>


</head>


<body>


    <div class="main">


        <div id="time" class="time"> 12 : 00 </div>
        <div class="greeting"> Hello, Rhanhee!</div>
        <div class="todo">Always Learn New Thing ! </div>
    </div>


    <div class="quote">


        <div id=" author" class="author">- 명언의 저자-</div>
        <div id="content" class="content">" 명언의 내용 " </div>


    </div>


</body>


</html>

댓글 알림