本格開発!2日目

27831 ワード
bootstrap JavaScript CSS Web開発 テキストリンク

剪定した


もう少し機能を追加したいのですが


  • 縁をふいた
    デザインは始武14本で、シンプルなデザインです

  • キャラクター人気が分かる評価欄をアスタリスクで表示することにしました
    ライトアイコンライブラリ、アスタリスクのサイズ変更

  • フォントを付けた
    私はグーグルフォントを使っています.小さいので、サイズを大きくしたCSSコードを使いました.
  • 完了、
    • 写真を一定の大きさに並べたり、スライドで表示したりしたいのですが・・・
    写真の上下表示やスライド遷移は、写真の大きさに応じて、以下の説明欄と大きさが往復移動します.明日この問題を解決します.
    <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>캐릭터 도감</title>

    <!--Font-->
    <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=Dongle:wght@300;400;700&display=swap" rel="stylesheet">

    <style>

        *{font-family: 'Dongle', sans-serif;
            font-size: x-large;
        }

        /*.descript_box{*/
        /*    outline-style: solid;*/
        /*    outline-color: lightpink;*/

        /*}*/

        .checked {
            color: orange;
        }

        .rating{

        }

        .img_box{
            padding;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row category"> 카테고리
        <div class="category col-xs-12"></div>
    </div>
    <div class="row simple">
        <div class="img col-md-6">
            <img src="https://yt3.ggpht.com/ytc/AKedOLSfQxw7g_Z3_kPv_QPg1sLHFofJXKPV34yYOOpsAg=s900-c-k-c0x00ffffff-no-rj"
                 class="img-fluid" alt="Responsive image">
        </div>
        <div class="desc col-md-6 descript_box">
            <h1>핑크퐁</h1>
            <h5>삼성출판사의 관계사인 더핑크퐁컴퍼니에서 만든 어린이 교육용 앱에서 시작된 애니메이션, 동요, 게임 등 다채로운 컨텐츠 브랜드. 대표작은 '상어 가족'.</h5>

        </div>
    </div>
    <div class="row like justify-content-around">
        <div class="like col-xs-12 mx-auto my-3">
            <button type="button" class="btn btn-outline-success btn-primary btn-lg mx-3">좋아요!</button>
            <button type="button" class="btn btn-outline-dark btn-primary btn-lg mx-3">싫어요.</button>
        </div>
         <div class="rating col-md-6 my-auto">
             <div>

             </div>
             <i class="fa fa-star fa-2x checked"></i>
             <i class="fa fa-star fa-2x checked"></i>
             <i class="fa fa-star fa-2x checked"></i>
             <i class="fa fa-star fa-2x checked"></i>
             <i class="fa fa-star fa-2x checked"></i>
             (점수: 99)
         </div>
    </div>

    <div class="row pictures">
        <div class="pic_list col-xs-12 mt-4">
            사진 슬라이드 넣을 자리
        </div>
    </div>

    <div class="row video">
        <div class="list col-xs-12">
            유튜브 리스트 넣을 자리
        </div>
    </div>

    <div class="row details">
        <div class="col-xs-12">
            <h5>(설명 접는 기능 넣어야 함)</h5>
            원래 삼성출판사의 예전 명칭이였던 삼성북스의 로고 및 마스코트 퐁이를 리뉴얼 하여 핑크퐁이라는 새로운 이름을 붙여준 것이다. 캐릭터 디자인 또한 사백안에서 둥군
            눈으로 변하는 등 과거와 크게 달라졌으며, 초기 작품에 등장했던 파란 토끼 캐릭터 모모, 양갈래 머리를 가진 인간 소녀 캐릭터 봄이 등의 다수의 캐릭터가 하차해 초기 콘텐츠에서 등장 후
            2022년 현재까지 유지된 캐릭터는 산타클로스 정도 밖에 되지 않는다.

            뽀롱뽀롱 뽀로로처럼 모두가 즐겁고 평화로운 일반적인 유아용 동물 애니메이션과는 달리 살벌한 야생 세계를 해학과 풍자로 적나라하게 보여준다. 따라서 어른들이 봐도 무척 재미있는 노래들이 많다.
            물고기들이 상어가족으로부터 도망치다 "살았다~"하면서 춤을 추지만, 그 뒤에서는 상어 가족들이 포크를 들고 침을 흘리며 물고기들을 노려보고 있다거나(상어 가족), 육식공룡 새끼들이 배고프다고
            하자 티라노사우루스 요리사가 노래 초반부에 나온 이구아노돈 요리사와 오르니토미무스 요리사를 잡아먹으러 간다거나...(나는야 공룡 요리사)

            유튜브 한류스타로 230억뷰를 달성했다. 강남스타일의 조회수를 넘어섰다는 평. 글로벌 시장을 타케팅 하기 위해 다양한 언어로 유튜브 채널을 운영 중이다. 공식 영어 유튜브 채널은 2021년 6월
            29일 현재 5000만 명의 구독자를 보유하고 있고, 한국 유튜브 채널의 경우 현재 911만 명의 구독자를 보유하고 있다.

            현재 Despasito를 제치고 유튜브 누적 조회수 1위를 달성하였다.

            멜론 급상승 차트 1위에 여러번 등장 했으며, 2018년 설 무렵 지니 실시간 차트에 차트인 한 적이 있고 멜론에서도 최고 일간 213위까지 오른 적이 있었다.

            마스코트는 머리에 왕관을 쓰고 목에 별을 단 분홍색 여우로, 핑크퐁 유튜브 영상 도입부에 항상 등장한다.
        </div>
    </div>
</div>

</body>

</html>
    Hello Clojure - Jepsen
    [iOS]オプションカードサーバ(TabMan)ライブラリ