개발나라 스용공주

[실습] 웹페이지 - To Do list 어플리케이션 (실습과정 상세 소개) 본문

WEB/포트폴리오

[실습] 웹페이지 - To Do list 어플리케이션 (실습과정 상세 소개)

스용공주 2024. 10. 9. 14:57
728x90
728x90

[ 최종 완성 - 실행 영상 ]

 

 

 

 

[ 1차 개발 - 기능 구현 ]

디자인 ⇨ input 'text'를 통해 추가할 리스트를 작성하는 칸을 만듬 ⇨ input 'checkbox' 등을 통해 리스트 중 완료된 항목에 대해 체크하는 기능을 만듬 ⇨ @font-face를 통해 폰트를 변경해줌

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin : 0;
            padding : 0;
            font-style : arial black;
        }
        body {
            width : 300px;
            height : 500px;
            border : 1px solid red;
            margin : 15px;
            padding : 10px;
            background-color: rgb(255, 247, 187);
            font-family: HakgyoansimDunggeunmisoTTF-B;
        }
        @font-face {
            font-family: 'HakgyoansimDunggeunmisoTTF-B';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        h1 {
            text-align: center;
        }
        #add {
            margin : 10px 0 10px 0;
        }
        main {
            height : 370px;
        }
        ul {
            margin : 20px 0 10px 0;
        }
        li {
            margin : 10px 0 10px 0;
            list-style-type: none;
            border-bottom: 2px solid #ccc;
            padding-bottom: 5px;
        }
        input[type=text] {
            border : 0;
            border-radius: 10px;
            background-color: #f8f8f8;
            border : 2px solid #ccc;
            width : 100%;
            height: 30px;
        }
    </style>
</head>
<body>
    <span><img src = "./Design/ToDo/ToDo_logo.png" width = 20px></span>
    <span>To Do</span>
    <h1>To-Do List</h1>
    <div id = "add">Add</div>
    <div><input type = "text"></div>
    <main>
        <ul>
            <li>
                <span><input type = "checkbox"></span>
                <span>Do 30 minutes of running</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>Read a book</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>Study english</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>Cooking healthy meal</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>Upload vlog to Youtube</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>make a birthday cake</span>
            </li>
            <li>
                <span><input type = "checkbox"></span>
                <span>follow up email</span>
            </li>
        </ul>
    </main>
</body>
</html>

 

 

[ @font-face 적용하기 ]

https://hwangseoyoung.tistory.com/155

 

[CSS] @font-face 적용하는 법 / 웹 폰트 사용하는 방법 - 웹페이지에 원하는 폰트 적용하기

이번 글은 @font-face를 적용하는 방법에 대한 글을 작성할 것이다.    [ 1. 웹폰트 가져오기 ]우선 웹폰트는 아래 사진과 같이 '눈누' 사이트에서 원하는 폰트를 선택하고 사진과 같이 '웹폰트로

hwangseoyoung.tistory.com

 

728x90
728x90

'WEB > 포트폴리오' 카테고리의 다른 글

[실습] hover시 상품 상세 설명  (1) 2024.11.16
[실습] 슬라이드 애니메이션이 적용된 탭메뉴 만들기  (0) 2024.11.08
[실습] 웹페이지 탭메뉴 콘텐츠 만들기  (6) 2024.11.08
[실습] 웹페이지 - 다크모드 전환 기능 웹페이지 만들기 (실습과정 상세 소개)  (0) 2024.10.02
'WEB/포트폴리오' Related Articles more
Comments