1. 동기 코드와 비동기코드
동기 코드는 순서대로 실행되는 코드를 이야기합니다. --> 지금까지 우리가 쓰던 방식
비동기 코드는 코 드의 실행순서를 보장하지 않는다는 것을 기본전제로 시작합니다.
setTimeout(() => {
document.querySelector('.msg').textContent =
'3초가 지난 후 메세지 입니다!';
}, 3000);
여기서 3000은 3000밀리초를의미합니다.2. 실습 app 만들기 1일차 -- 2일차까지 있습니다ㅠㅠ
먼저, 위와 같은 일정관리 를 만들기 위해서 쉬워보이는 css 부터 완성하고 이후 JavaScript를 이용해서 해야겠다고 마음을 먹었습니다 .
먼저, 주어진 html 입니다.
<!DOCTYPE html>
<html lang="ko">
<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" />
<title>일정관리 앱</title>
<!-- reset.css -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
<!-- linear icons -->
<link
rel="stylesheet"
href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"
/>
<!-- custom css -->
<link rel="stylesheet" href="css/main.css" />
<!-- custom js -->
<script src="js/app.js" defer></script>
</head>
<body>
<div class="wrapper">
<section class="todo-template">
<h1 class="app-title">일정 관리</h1>
<div class="content">
<form class="todo-insert">
<input
type="text"
id="todo-text"
placeholder="할 일을 입력하세요"
autocomplete="off"
/>
<button type="submit" id="add">
<span class="lnr lnr-plus-circle"></span>
</button>
</form>
<ul class="todo-list">
<li data-id="1" class="todo-list-item">
<label class="checkbox">
<input type="checkbox" />
<span class="text">할 일 1</span>
</label>
<div class="modify">
<span class="lnr lnr-undo"></span>
</div>
<div class="remove">
<span class="lnr lnr-cross-circle"></span>
</div>
</li>
<li data-id="2" class="todo-list-item">
<label class="checkbox">
<input type="checkbox" />
<span class="text">할 일 2</span>
</label>
<div class="modify"><span class="lnr lnr-undo"></span></div>
<div class="remove">
<span class="lnr lnr-cross-circle"></span>
</div>
</li>
<li data-id="3" class="todo-list-item">
<label class="checkbox">
<input type="checkbox" />
<span class="text">할 일 3</span>
</label>
<div class="modify"><span class="lnr lnr-undo"></span></div>
<div class="remove">
<span class="lnr lnr-cross-circle"></span>
</div>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>
일단 위와 같이 만들려면 1번으로 큰 틀인 wrapper클래스의 틀을 만드는데 약간 그림자를 줘야할것같습니다.
그리고 일정관리 글씨 크기를 키워주고 하얀글씨로하고 가운데 정렬 하면 될것같습니다 .
.wrapper {
width: 500px;
border: 0px solid rgb(255, 255, 255);
padding: 0px;
background: rgb(255, 255, 255);
font-size: 30px;
color: rgb(0, 0, 0);
margin: 20px auto 0;
box-shadow: 2px 2px 3px 2px rgb(0, 0, 0);
border-radius: 10px;
}
h1{
background-color: rgba(7, 173, 173, 0.966);
border-radius: 10px 10px 0px 0px;
padding: 10px;
text-align: center;
color: white;
}
위코드를 아래와 같이 만들었습니다 . 1차 목표 성공 ㅎㅎ;;
다음으로 할일 입력창과 확인버튼을 이루고 있는 것을 길이를 맞추고 할일 리스트를 한개 만들어서 2개에 모두 붙여주면 끝일것같습니다 .ㅎㅎ
/* ------------------------윗부분 완료--------------------------- */
.todo-insert{
height: 30px;
display: flex;
background-color: gray;
justify-content: center;
flex-flow: row wrap;
}
.todo-insert #todo-text{
background-color: gray;
place-items : white;
flex-grow: 11;
border: 0px;
margin: 0px 0px 0px 0px;
}
::placeholder {
color: rgb(255, 255, 255);
opacity: 1;
}
.todo-insert #add{
flex-grow: 1;
border: 0px;
}
/*---------------------- 소제목 완료--------------------------------- */
.todo-list .todo-list-item{
display: flex;
justify-content: center;
flex-flow: row wrap;
border: 5px 0px 5px 0px;
}
.todo-list .todo-list-item .checkbox{
width: 30px;
height: 30px;
}
.todo-list .todo-list-item .text{
font-size: 20px;
}
.lnr-cross-circle{
color: red;
}
.lnr-undo{
color: green
}
.todo-list-item .checkbox{
flex-grow: 30
}
.todo-list-item .modify{
flex-grow: 1
}
.todo-list-item .remove{
flex-grow: 1
}
'PlayData 백엔드 부트캠프 정리' 카테고리의 다른 글
| PlayData 백엔드 부트캠프 Start 25일차 (1) | 2024.09.11 |
|---|---|
| PlayData 백엔드 부트캠프 Start 24일차 (1) | 2024.09.10 |
| PlayData 백엔드 부트캠프 Start 21,22일차 (1) | 2024.09.09 |
| PlayData 백엔드 부트캠프 Start 20일차 (1) | 2024.09.04 |
| PlayData 백엔드 부트캠프 Start 19일차 (3) | 2024.09.03 |