<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="<https://www.ghibli.jp/favicon.ico>" />
<script
src="<https://kit.fontawesome.com/3b7b4e8e9d.js>"
crossorigin="anonymous"
></script>
<title>your page</title>
</head>
<body>
<div class="header blur-background"> <!--최상단 header -->
<div class="weather"> <!--날씨, 위치-->
<span></span>
<span></span>
</div>
<div class="quote"> <!--랜덤 명언-->
<span></span>
<span></span>
</div>
</div>
<div class="main"> <!--header 를 제외한 내용이 들어있는 main-->
<ul class="link blur-background"> <!--바로가기 link 모음-->
<li class="link__component">
<a href="<https://www.naver.com/>"
><i class="fa-solid fa-n fa-lg"></i><span>Naver</span></a
>
</li>
<li class="link__component">
<a href="<https://www.google.com/>"
><i class="fa-brands fa-google fa-lg"></i><span>Google</span></a
>
</li>
<li class="link__component">
<a href="<https://www.youtube.com/>"
><i class="fa-brands fa-youtube fa-lg"></i><span>Youtube</span></a
>
</li>
<li class="link__component">
<a href="<https://youtu.be/vlBBwAVleg4?si=10iL2WBEX8JdNTQq>"
><i class="fa-solid fa-music fa-lg"></i><span>Music</span></a
>
</li>
</ul>
<div class="info">
<div class="today-info"> <!--달력,시간-->
<h3 class="calendar"></h3>
<h3 class="clock"></h3>
</div>
<form class="login-form hidden">
<!--login-->
<h4>Hi! What is your name?</h4>
<input required type="text" placeholder="My name is..." />
</form>
<h1 class="welcome-header hidden">HI</h1>
</div>
<div class="todo"> <!--todo-->
<h3>to-do list</h3>
<form class="todo-form"> <!--todo 입력칸-->
<input type="text" required placeholder="what's your plan?" />
<button>submit</button>
</form>
<ul class="todo-list todo-list--yet"> <!--미완료 task-->
<span class="no-task hidden"
>"No tasks for now. Enjoy your time!"</span
>
</ul>
<ul class="todo-list todo-list--done"></ul> <!--완료 task-->
</div>
</div>
<img class="point-img" src="<https://www.ghibli.jp/img/totoro.png>" /> <!--데코용 이미지-->
<script src="js/greetings.js"></script>
<script src="js/todo.js"></script>
<script src="js/todayInfo.js"></script>
<script src="js/weather.js"></script>
<script src="js/quote.js"></script>
<script src="js/background.js"></script>
</body>
</html>
title 기능
favicon
header (weather,quote)
main - link
- info ( today-info / login, welcome header )
- todo (todo-form / todo-yet / todo-done)
- css 없이는 이런 모습
info 내의 구조를 info도 div, 안의 목록도 div 로 해두었는데,
ul / li 구조로 바꾸었음.