todolist 만들기 -프론트 개발-

gebalza 2023. 1. 1. 21:09

1. 디자인 시안짜기

사실 시안짜는데만 1시간이 넘게걸렸다. 결국 핀터레스트 뒤져서 가장 심플한 디자인을 참고해 만들었다.

2. 화면 설계

html 설계 코드

<!DOCTYPE html>
<meta charset="UTF-8" />
<html lang="ko">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
</head>
<body>
    <div class="wrap">
        <div class="main">
            <div>
                <div id="current_date">  <!-- 현재 날짜 -->
                    <script src="script.js" charset="utf-8"></script>
                    <div class="plus"> <!-- + 버튼 -->
                        <img src="img/add.png" > 
                        <script src="plus.js" charset="utf-8"></script>
                    </div>
                    <div class="minus"> <!-- - 버튼 -->
                        <img src="img/minus.png" class="minus">
                        <script src="plus.js" charset="utf-8"></script>
                    </div>
                </div>
                <div class="todo" id="todo"> 
                    <div class="circle" id="circle"></div> <!-- todolist 동그라미 버튼-->
                    <input type="text" id="todolist"class="todo0" placeholder="write your todolist" onchange='printName()'></div> <!-- 입력칸 -->
                    <div id="result" class="todo_input"></div>    
                </div>
                
            </div>
        </div>
    </div>
</body>

</html>

- 어려웠던 부분

1. 현재 날짜 출력하기.

자바스크립트 내에서 날짜를 받아오는거 까진 했는데, html상에서 출력하는 법을 몰라 막혔었다. 그래서 그냥 자바스크립트 파일을 전부 가져다 넣으니 작동했다..ㅋㅋㅋ

2. CSS 파일 만들기

*{
    font-family: 'Fugaz One', cursive;
    list-style: none; 
    text-decoration: none;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    color: black

}
.main{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #9EA1D4;
}

.main > div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #A770EF, #FDB99B);
    border-radius: 30px;
    box-shadow: 3px 3px 50px #00000029;
    padding-top: 45px;
    padding-left: 61px;
    padding-right: 61px;
    box-sizing: border-box;
    
}



.date0 {

    width: 578px;

    text-align: center;
    font-size: 60px;
    color: white;


   
}


.plus{
    position: relative;
    width: 60px;
    height: 60px;
    top: 10px;
    float:left;
    cursor: pointer;


}



.minus{
    position: relative;
    width: 60px;
    height: 60px;
    top: 5px;
    float:right;
    cursor: pointer;

}

.todo{
    padding-top: 63px;
    width: 578px;
    height: 88px;

    display: flex;

}

.circle{
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;

    left: 14px
}

.todo0{
    position: relative;
    flex: 1;
    margin-left: 70px;
    width: 100px;
    height: 100px;
    color: rgb(133, 133, 133);
    font-size: 40px;
    top: -30px;
    border: none;
    border-radius: 15px;
    padding-left: 15px;
    outline: none;
    z-index: 2;
}

.todo_input{
    position: relative;

    left : 100px;
    bottom: 120px;
    width: 480px;
    height: 100px;
    font-size: 40px;
    padding-left: 15px;

    color: white;
    line-height: 100px;
    z-index: 1;
    box-sizing: border-box;
}

처음 설계했던 것과는 다르게 막무가네로 위치만 맞춰 넣은 부분이 많았다. CSS에 대한 이해와 활용 연습이 더 필요하다.

자바 스크립트 설계는 다음편에...