TIL4일

새롭게 배운것

1.script 없이 css로 애니메이션 값을 넣을 수 있다.

<div id="title">

        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">I</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">E</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">'</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">9</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">_</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">아</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">이</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">구</h2>
        <h2 style="font-family: 'IM_Hyemin-Bold',sans-serif;">~</h2>
        <!-- <h1 style="background-image:url(/static/img/ie9_logo.png);">
        </h1> -->

    </div><!-- e:title -->

글자마다 값을 넣어서 실행시킨다

2. 정렬 (app.py)

list(db.poems.find({},{'_id':False}).sort([("heart_count", -1)]).limit(5))

list 목록
Dp부터 .sort앞까진 정보 불러오기

sort 정렬
.sort를 통해서 정렬
솔트 앞은 정렬조건
뒤는 1이면 순행정렬, -1은 역행정렬

오류 및 시도

.app.py 경로 주기

내가 해보고 싶은것

스크롤

나중에 기회가 된다면 프로젝트 할 때 스크롤 를 사용한 페이지를 만들어보고싶다.

<!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>full-4</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!-- fullpage plugin cdn -->
    <link rel="stylesheet" href="styles/jquery.fullPage.css">
    <script src="script/jquery.fullPage.js"></script>
    <style>
        * {box-sizing:border-box; margin:0;padding:0;}
        header {position:fixed; top:0; left:0; z-index:99;}
        header nav {}
        header nav a {color:#fff; padding:30px; display:inline-block; text-decoration:none;}
        #wrap {}
        #wrap .section {background-size:cover; background-attachment: fixed;}
        #wrap .section:nth-child(1) {background-image:url(images/bg1.jpg);}
        #wrap .section:nth-child(2) {background-image:url(images/bg2.jpg);}
        #wrap .section:nth-child(3) {background-image:url(images/bg3.jpg);}
        #wrap .section:nth-child(4) {background-image:url(images/bg4.jpg);}
        #wrap .section h1 {color:#fff; font-size:3rem;}

        .h1_move {animation:h1_move 1s ease both;}
        @keyframes h1_move {
            0% {transform:translateX(0)}
            100% {transform:translateX(200px)}
        }

    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#a">profile</a>
            <a href="#b">project</a>
            <a href="#c">design</a>
            <a href="#d">web_design</a>
        </nav>
    </header>
    <div id="wrap"><!-- 의미있는이름 -->
        <div class="section"><!-- 정해진이름 --></div>
        <div class="section"><h1>title2</h1></div>
        <div class="section"><h1>title3</h1></div>
        <div class="section"></div>
    </div>
    <script>(js3.8.6 써야됨)
        $('#wrap').fullpage({
            scrollBar:true,
            navigation:true,//네비게이션생성
            navigationTooltips:['풍선','바다','노을','공원'],//네비게이션에 문자입력
            showActiveTooltip:true,//툴팁출력명령어
            menu:'nav',//메뉴로 설정할 부분
            anchors:['a','b','c','d'],//각 명칭 선언
            onLeave:function(index, nextIndex, duration){//다매개변수라 의미있는단어만쓰면됨
                console.log(index)//현재인덱스
                console.log(nextIndex)//다음인덱스
                console.log(duration)//현재스크롤방향
                console.log('----------------')
                if(index==1){$('.section:nth-child(2) h1').addClass('h1_move')}
                if(index==2){$('.section:nth-child(3) h1').addClass('h1_move')}
            }
        }) //가장기본적인 기본구조방식
        //$('body').css('background-color','aqua')
    </script>
</body>
</html>
<!-- 
    javascript
    Node.classList.add('name')
    Node.classList.remove('name')

    jquery
    $(Node).addclass('name')
    $(Node).removeclass('name')
-->

초보의 개발 공부

TIL4일

댓글

티스토리툴바