본격 개발! 2일차

27439 단어 bootstrapJavaScriptCSS웹개발CSS

조금 다듬었다

몇몇 기능을 더 넣고싶다

  1. 테두리를 지웠다
    디자인 시무 14조를 통해 깔끔한 디자인을 위해

  2. 캐릭터 인기도를 알 수 있는 평가란을 별표로 표시하기로 했다
    아이콘 라이브러리를 쓰고 별표 크기를 조절했다

  3. 폰트를 넣었다
    구글 폰트를 썼는데 크기가 작아서 크기를 키우는 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>
nodeJs 설치
[iOS] 탭맨(TabMan) 라이브러리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage