⛵ 항해99/개강준비

[CSS 기초] Level 3

hhhhy 2023. 8. 5. 19:12

 To-do List 만들기 

메인 페이지

<!-- momentum_first.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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <title>모멘텀앱 - 따라만들기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

        * {
            font-family: 'Poppins', sans-serif;
        }

        body,
        h1,
        h2,
        h3,
        p,
        div,
        a {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            font-weight: normal;
        }

        body {
            background-size: cover;
        }

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            height: 100vh;
            /* 📍 내가 보는 화면 비율의 100% : 사람마다 해당도 다를때 유용 */
            /* 📍 50vh : 내가 보는 화면 비율의 50% */

            color: white;
        }

        .greeting {
            font-size: 60px;
            font-weight: bold;

            margin-bottom: 20px;
        }

        .name {
            font-size: 30px;
        }

        .name>input {
            width: 800px;
            border: none;
            background-color: transparent;
            /* 📍 배경색 투명하게 하기 */
            border-bottom: 3px solid white;

            color: white;
            text-align: center;
            /* 📍 글자 가운데 정렬 */
        }

        .name>input:focus {
            outline: none;
            /* 📍 인풋박스를 눌러서 작성할때(포커스) 테두리 없애는 법 */
        }

        .name>i {
            cursor: pointer;
        }
    </style>
    <script>
        $(document).ready(function () {
            renderGalleryItem()
        });
        //배경 사진 함수
        function renderGalleryItem() {
            let url = 'https://api.thecatapi.com/v1/images/search'
            fetch(url).then(res => res.json()).then((data) => {
                let imgurl = data[0]['url']
                // 📍 [0] 강의 영상에는 안넣어도 동작하는데, 실습으로는 안됨(강의자료에는 [0] 나와있음), 2강 배경화면 만들기
                $('#background').css('background-image', `url('${imgurl}')`)
            })
        }

    </script>
</head>

<body id='background'>
    <div class="main">
        <!-- 인사 -->
        <div class="greeting">
            Hello, What's your name?
        </div>
        <!-- 이름 입력창 -->
        <div class="name">
            <input type="text">
            <i class="bi bi-chevron-double-right"></i>
        </div>
    </div>

</body>

</html>

 

날씨, 시간, 조언 추가

<!-- momentum_second.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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <title>모멘텀앱 - 따라만들기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

        * {
            font-family: 'Poppins', sans-serif;
        }

        body,
        h1,
        h2,
        h3,
        p,
        div,
        a {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            font-weight: normal;

        }

        body {
            background-image: url("");
            background-size: cover;
            color: white;
        }

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            height: 100vh;
            color: white;
        }

        .greeting {
            padding-top: 0px;
            font-size: 60px;
        }

        .focusTitle {
            padding-top: 0px;
            font-size: 40px;
        }

        .focusTodo {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            font-size: 30px;
            margin-top: 20px;
        }

        .focusTodo>i {
            cursor: pointer;
        }

        .focusTodo>input {
            width: 800px;
            border: none;
            background-color: transparent;
            border-bottom: 3px solid white;

            color: white;
        }

        .focusTodo>input:focus {
            outline: none;
        }

        .currenrWeather {
            text-align: right;
            font-size: 28px;
            font-weight: bold;
            color: white;
            padding: 5px;
        }

        .currentTime {
            font-size: 120px;
            font-weight: bold;
        }

        .advice {
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script>
        $(document).ready(function () {
            renderGalleryItem()
            renderCurrentWeather()
            renderCurrentTime()
            renderAdvice()
        });
        // 📍 renderGalleryItem() 다음에 renderCurrentWeather() 다음에 renderCurrentTime() 불러오기

        //배경 사진 함수
        function renderGalleryItem() {
            let url = 'https://api.thecatapi.com/v1/images/search'
            fetch(url).then(res => res.json()).then((data) => {
                let imgurl = data[0]['url']
                $('#background').css('background-image', `url('${imgurl}')`);

            })
        }

        //현재 날씨
        function renderCurrentWeather() {
            let url = `https://goweather.herokuapp.com/weather/seoul`
            fetch(url).then(res => res.json()).then((data) => {
                let temp = data['temperature']
                $('#currentWeather').text(temp)
            })
        }

        //현재 시간
        function renderCurrentTime() {
            let url = `http://worldtimeapi.org/api/timezone/Asia/Seoul`
            fetch(url).then(res => res.json()).then((data) => {
                let time = data['datetime'].substr(11, 5)
                // 📍 substr(11, 5) : datetime의 11번째부터 5개만 가져오기
                $('#currentTime').append(time);
            })
        }

        //실시간 조언
        function renderAdvice() {
            let url = `https://api.adviceslip.com/advice`
            fetch(url).then(res => res.json()).then((data) => {
                let advice = data['slip']['advice']
                $('#advice').text(advice);
                // 📍 $('#advice').append(advice);
            })
        }
    </script>
</head>

<body id='background'>
    <div id="currentWeather" class="currenrWeather">
        +30c
    </div>
    <div class="main">
        <div id="currentTime" class="currentTime">
        </div>
        <!-- 인사 -->
        <div class="greeting">
            Hello, Jessy.
        </div>
        <!-- 오늘 중요 일정 입력-->
        <div class="focusTitle">
            What is your main focus for today?
        </div>
        <!-- 이름 입력창 -->
        <div class="focusTodo">
            <input type="text">
            <i class="bi bi-chevron-double-right"></i>
        </div>
    </div>
    <div id="advice" class="advice">
    </div>

</body>

</html>

 

 To-do List 완성하기 

<!-- momentum_third.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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <title>모멘텀앱 - 따라만들기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

        * {
            font-family: 'Poppins', sans-serif;
        }

        body,
        h1,
        h2,
        h3,
        p,
        div,
        a {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            font-weight: normal;

            background-size: cover;
            color: white;
        }

        .currentWeather {
            margin-left: auto;

            font-size: 28px;
            width: 120px;
            height: 50px;
        }

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            min-height: 75vh;
        }

        .currentTime {
            font-size: 160px;
            font-weight: 600;
        }

        .greeting {
            font-size: 60px;
        }

        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

            height: 58px;
            width: auto;
        }

        .todatFcous {
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .focusTitle {
            font-size: 20px;
            font-weight: bold;
        }

        .focusTitle>li>input {
            width: 25px;
            height: 25px;

            display: none;
            /* 📍 처음에는 안보이게 설정하기 */
        }

        .focusTitle>li>i {
            display: none;
        }

        .focusTitle>li:hover>input {
            display: block;
            /* 📍 그냥 li에서는 안나오고 호버가 되는 li맡애 았으면 나옴 */
        }

        .focusTitle>li:hover>i {
            display: block;
            /* 📍 그냥 li에서는 안나오고 호버가 되는 li맡애 았으면 나옴 */
        }

        .focusTitle>li {
            list-style: none;
            /* 📍 li 태그에 생기는 점 없애기 */

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .focusTitle>li>span {
            margin: 0px 10px;
        }

        .todoIcon {
            font-size: 40px;
            position: absolute;
            right: 100px;
            bottom: 80px;

            cursor: pointer;
        }

        .madal-box {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            width: 300px;
            padding: 20px;

            position: absolute;
            right: 100px;
            bottom: 80px;

            background: rgb(255, 255, 255, 0.8);
            /* 📍 레드그린블루, a투명도 조정 : 255255255 = 흰색 */
            border-radius: 10px;
        }

        .madal-box>input {
            width: 280px;
            height: 50px;
            border-radius: 10px;
            border: none;
            text-align: center;

            margin-bottom: 10px;
        }

        .madal-box>button {
            width: 280px;
            height: 50px;
            border-radius: 10px;
            border: none;
            text-align: center;
        }
    </style>
    <script>
        $(document).ready(function () {
            renderGalleryItem()
            renderCurrentWeather()
            renderCurrentTime()
            renderAdvice()

            $('#todoIcon').click(function () {
                $('#madal-box').show().css('display', 'flex');
                $('#todoIcon').hide();
                // 📍 todoIcon을 클릭하면 모달박스를 보여주고 css를 설정을 수정해 깨지지 않고 나오게 해라
                // 📍 show() 말고 fadeIn() 쓰면 슥~하고 나옴
            })

            $('#main').click(function () {
                $('#madal-box').hide();
                $('#todoIcon').show();
                // 📍 hide() 말고 fadeOut() 쓰면 슥~하고 없어짐
            })
        });
        //배경 사진 함수
        function renderGalleryItem() {
            let url = 'https://api.thecatapi.com/v1/images/search'
            fetch(url).then(res => res.json()).then((data) => {
                let imgurl = data[0]['url']
                $('#background').css('background-image', `url('${imgurl}')`);

            })
        }
        //배경 사진 함수
        function renderGalleryItem() {
            let url = 'https://api.thecatapi.com/v1/images/search'
            fetch(url).then(res => res.json()).then((data) => {
                let imgurl = data[0]['url']
                $('#background').css('background-image', `url('${imgurl}')`);

            })
        }
        //현재 날씨
        function renderCurrentWeather() {
            let url = `https://goweather.herokuapp.com/weather/{seoul}`
            fetch(url).then(res => res.json()).then((data) => {
                let temperature = data['temperature']
                temp_html = `${temperature}`
                $('#currentWeather').append(temp_html);
            })

        }
        //현재 시간
        function renderCurrentTime() {
            let url = `http://worldtimeapi.org/api/timezone/Asia/Seoul`
            fetch(url).then(res => res.json()).then((data) => {
                let time = data['datetime'].substr(11, 5)
                let temp_html = `${time}`
                $('#currentTime').append(temp_html);
            })
        }
        //실시간 조언
        function renderAdvice() {
            let url = `https://api.adviceslip.com/advice`
            fetch(url).then(res => res.json()).then((data) => {
                let advice = data['slip']['advice']
                let temp_html = `${advice}`
                $('#advice').append(temp_html);
            })

        }
    </script>
</head>

<body id='background'>
    <!-- 날씨 -->
    <div id="currentWeather" class="currentWeather">
    </div>
    <div class="main" id="main">
        <!-- 시간 -->
        <div id="currentTime" class="currentTime">
        </div>
        <!-- 인사 -->
        <div class="greeting">
            Hello, Jessy.
        </div>
        <!-- 오늘 중요 일정 -->
        <div class="todayFcous">
            Today
        </div>
        <div class="focusTitle">
            <li>
                <input type="checkbox">
                <!-- 📍 체크박스 만들기 -->
                <span>Publish Bolg Post</span>
                <i class="bi bi-trash"></i>
            </li>
        </div>
    </div>
    <!-- 실시간 조언 -->
    <div id="advice" class="footer">
    </div>
    <div id="todoIcon" class="todoIcon">
        <i class="bi bi-plus-circle"></i>
    </div>
    <div id="madal-box" class="madal-box">
        <input type="text">
        <button>Add to the list</button>
    </div>
</body>

</html>

 

'⛵ 항해99 > 개강준비' 카테고리의 다른 글

[웹 미니 프로젝트] 회고 : 15조_투두리(TO-DO-LI)  (0) 2023.08.12
[CSS 기초] Level 2  (0) 2023.08.05
[CSS 기초] Level 1  (0) 2023.08.05
[JavaScript 문법] 프로그래머스_6일차  (0) 2023.08.02
[JavaScript 문법] 프로그래머스_5일차  (0) 2023.08.01

'⛵ 항해99/개강준비'의 다른글

  • 현재글[CSS 기초] Level 3

관련글

티스토리툴바