
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
이미지가 꽉차게 하려면 어떻게 해야하나요?
화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시<!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("https://images.pexels.com/photos/4603529/pexels-photo-4603529.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); background-position: center; background-repeat: no-repeat; background-size: auto; 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: 80vh; 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> <script> </script> </head> <body> <div class="main"> <div id="time" class="time">12:00</div> <div class="greeting">Hello, geon!</div> <div class="todo">기분 좋게 해보자고</div> </div> <div class="quote"> <div id="author" class="author">- 명언의 저자 -</div> <div id="content" class="content">" 명언의 내용 "</div> </div> </body> </html>지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
