210806
JavaScript #28
- font & size & position
글자 폰트, 사이즈, 위치변경을 해보자.
내가 구상한 위치는 이렇다.
- 위치
현재는 모든 요소가 좌상단에 위치해 있다.
<!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">
<link rel="stylesheet" href="css/style.css">
<title>MOO App</title>
</head>
<body>
<div id="weather">
<span></span>
<span></span>
</div>
<h2 id="clock">00:00:00</h2>
<div id="quote">
<span></span>
<span></span>
</div>
<form class="hidden" id="login-form">
<input
required maxlength="15"
type="text"
placeholder="What is your name?"/>
<button>Log In</button> <!--Login-->
</form>
<h1 id="greeting" class="hidden"></h1> <!--after login-->
<form id="todo-form"> <!--Input To Do-->
<input type="text" placeholder="Write a To Do and Press Enter" />
</form>
<ul id="todo-list"></ul> <!--To Do List-->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script>
<script src="js/weather.js"></script>
</body>
</html>위치 수정을 좀 더 수월하게 하기 위해 html내에서 순서를 바꾸었다.
<!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">
<link rel="stylesheet" href="css/style.css">
<title>MOO App</title>
</head>
<body>
<div id="weather">
<span></span>
<span></span>
</div>
<h2 id="clock">00:00:00</h2>
<div id="quote">
<span></span>
<span></span>
</div>
<form class="hidden" id="login-form">
<input
required maxlength="15"
type="text"
placeholder="What is your name?"/>
<button>Log In</button> <!--Login-->
</form>
<h1 id="greeting" class="hidden"></h1> <!--after login-->
<form id="todo-form"> <!--Input To Do-->
<input type="text" placeholder="Write a To Do and Press Enter" />
</form>
<ul id="todo-list"></ul> <!--To Do List-->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
-style.css
.hidden{
display: none;
}
body{
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#weather{
position: relative;
text-align: right;
margin-right: 30px;
}
#clock{
position: relative;
text-align: center;
}
#quote{
position: relative;
text-align: center;
}
#todo-list{
position: relative;
width: 200px;
text-align: left;
margin: auto;
}
대강의 위치를 이동시켰다.
공부중인 것들 기록