연습 Finance Logger
HTML, CSS 2021. 1. 22. 01:25반응형
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TypeScript Tutorial</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="wrapper">
<h1>Finance Logger</h1>
<!-- output list -->
<ul class="item-list"></ul>
</div>
<footer>
<form class="new-item-form">
<div class="field">
<label>Type:</label>
<select id="type">
<option value="invoice">Invoice</option>
<option value="payment">Payment</option>
</select>
</div>
<div class="field">
<label>To / From:</label>
<input type="text" id="tofrom" />
</div>
<div class="field">
<label>Details:</label>
<input type="text" id="details" />
</div>
<div class="field">
<label>Amount (£):</label>
<input type="number" id="amount" />
</div>
<button>Add</button>
</form>
<a href="https://www.thenetninja.co.uk">The Net Ninja</a>
</footer>
<script src="sandbox.js"></script>
</body>
</html>
body {
margin: 0;
font-family: Roboto;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
h1 {
margin: 40px auto;
color: #ff0aa7;
text-align: center;
}
ul {
padding: 0;
list-style-type: none;
}
li {
padding: 6px 10px;
border: 1px solid #eee;
margin: 10px auto;
}
li h4 {
color: #ff0aa7;
margin: 0;
text-transform: capitalize;
}
li p {
color: #333;
margin: 8px 0 0;
}
footer {
background: #eee;
padding: 60px;
margin-top: 60px;
}
form {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
font-weight: bold;
font-size: 0.8em;
color: #333;
margin: 16px 0 6px;
}
input,
select {
padding: 6px;
border: 1px solid #e1e1e1;
border-radius: 4px;
}
.field {
display: inline-block;
margin: 0 10px;
}
button {
color: white;
border: 0;
background: #ff0aa7;
padding: 6px;
min-width: 80px;
border-radius: 4px;
}
footer a {
text-align: center;
display: block;
color: #999;
margin-top: 40px;
font-size: 0.7em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
/* margin: 0;
font-family: Roboto; */
}
.wrapper {
max-width: 960px;
/* background: red; */
/* margin: 0 auto; */
}
h1 {
/* margin: 40px auto; */
/* color: #ff0aa7; */
/* text-align: center; */
}
ul {
list-style-type: none;
padding: 0;
}
li {
border: 1px solid #eee;
/* padding: 6px 10px; */
margin: 10px auto;
}
li h4 {
/* color: #ff0aa7; */
/* margin: 0; */
/* text-transform: capitalize; */
}
li p {
color: #333;
/* margin: 8px 0 0; */
}
footer {
background: #eee;
/* padding: 60px; */
}
form {
/* max-width: 960px; */
/* margin: 0 auto; */
/* text-align: center; */
}
.field {
display: inline-block;
/* margin: 0 10px; */
}
label {
display: block;
/* font-weight: bold;
font-size: 0.8em;
color: #333; */
/* margin: 16px 0 6px; */
}
input,
select {
/* padding: 6px; */
/* border: 1px solid #e1e1e1; */
/* border-radius: 4px; */
}
button {
/* color: white; */
/* border: 0; */
/* background: #ff0aa7; */
/* padding: 6px;
min-width: 80px; */
/* border-radius: 4px; */
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Finance Logger</h1>
<ul class="item-list">
<li>
<h4>Invoice</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, totam
tempora quis deserunt nam, ea aperiam earum laborum doloribus
molestias excepturi velit adipisci aliquam? Repudiandae
exercitationem in corporis maiores ea.
</p>
</li>
<li>
<h4>Invoice</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, totam
tempora quis deserunt nam, ea aperiam earum laborum doloribus
molestias excepturi velit adipisci aliquam? Repudiandae
exercitationem in corporis maiores ea.
</p>
</li>
<li>
<h4>Invoice</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, totam
tempora quis deserunt nam, ea aperiam earum laborum doloribus
molestias excepturi velit adipisci aliquam? Repudiandae
exercitationem in corporis maiores ea.
</p>
</li>
</ul>
</div>
<footer>
<form class="new-item-form">
<div class="field">
<label for="">Type: </label>
<select name="" id="">
<option value="invoice">invoice</option>
<option value="payment">payment</option>
</select>
</div>
<div class="field">
<label for="">To / From:</label>
<input type="text" />
</div>
<div class="field">
<label for="">Details: </label>
<input type="text" />
</div>
<div class="field">
<label for="">Amount: </label>
<input type="text" />
</div>
<button>Add</button>
</form>
</footer>
</body>
</html>
참고
github.com/iamshaunjp/typescript-tutorial/tree/lesson-2
www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI&index=1
반응형
'HTML, CSS' 카테고리의 다른 글
| CSS - Sticky Position (0) | 2021.01.15 |
|---|---|
| css기초이론 - css포지셔닝 (position: relative, absolute) (0) | 2021.01.15 |
| css기초이론 - 포지셔닝 엘리먼트 보이고 감추가 (z-index, visibility, opacity, display) (0) | 2021.01.15 |
| css기초이론 - CSS포지셔닝 - 엘리먼트 배치하기 (속성 : position, fixed) (0) | 2021.01.15 |
| css 기초이론 - 박스모델 Box-Model(border, margin, padding) (0) | 2021.01.14 |