本格開発!初日
39973 ワード
初めて独自にサービスを作成
ぼんやりした
3時間も口ずさんでやっとこれを作った...
<!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>
<title>혼자 만드는 웹서비스</title>
<style>
#full{
width: 1000px;
height: 2500px;
background-color: gray;
margin: auto;
}
.blue{
background-color: blue;
width: 900px;
height: 1900px;
margin: auto;
}
#left{
width: 500px;
float: left;
padding-left: 50px;
padding-top: 50px;
}
.img{
background-color: pink;
width: 500px;
height: 500px;
background-image: url("https://yt3.ggpht.com/ytc/AKedOLSfQxw7g_Z3_kPv_QPg1sLHFofJXKPV34yYOOpsAg=s900-c-k-c0x00ffffff-no-rj");
background-position: center;
background-size: cover;
}
#right{
width: 400px;
float: left;
padding-top: 50px;
padding-left: 50px;
}
.yellow{
background-color: yellow;
width: 400px;
height: 250px;
}
.red{
background-color: red;
width: 400px;
height: 250px;
}
.center{
margin: 20px;
}
</style>
</head>
<body>
<div id="full" align="center">
<div id="left">
<div class="img">img</div>
</div>
<div id="right">
<div class="yellow">
subscript
<div class="center">
<h1>핑크퐁</h1>
삼성출판사의 관계사인 더핑크퐁컴퍼니에서 만든 어린이 교육용 앱에서 시작된 애니메이션, 동요, 게임 등 다채로운 컨텐츠 브랜드. 대표작은 '상어 가족'.
</div>
</div>
<div class="red">
red
<p>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-secondary">좋아요</button>
<button type="button" class="btn btn-secondary">싫어요</button>
</div>
</p>
<h4><p>좋아요:</p>
<p>싫어요:</p>
호감 지수:</h4>
</div>
</div>
<div class="blue">blue</div>
</div>
</body>
</html>HTMLとCSSだけで作るのはどれだけ難しいかと思います.
夕食の時、せっかくだから案内帯を使おうと思った.
Boot Streetを使う準備ができていますが、なぜかそうです.
始動ベルトを少し使いました
わあ...
スタートホールでレイアウトの説明を聞いたとき、これは何だと思いました.
レイアウトコードを作成するサービスがあり、すぐにできました.
shoelace
まず一応やってみました.
最初の写真と比べると、天地がひっくり返っている.
ベルト万歳を起動!
<!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>
<title>캐릭터 도감</title>
<style>
.descript_box{
outline-style: solid;
outline-color: lightpink;
}
</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">
<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">평가</div>
</div>
<div class="row details">
<div class="col-xs-12">원래 삼성출판사의 예전 명칭이였던 삼성북스의 로고 및 마스코트 퐁이를 리뉴얼 하여 핑크퐁이라는 새로운 이름을 붙여준 것이다. 캐릭터 디자인 또한 사백안에서 둥군 눈으로 변하는 등 과거와 크게 달라졌으며, 초기 작품에 등장했던 파란 토끼 캐릭터 모모, 양갈래 머리를 가진 인간 소녀 캐릭터 봄이 등의 다수의 캐릭터가 하차해 초기 콘텐츠에서 등장 후 2022년 현재까지 유지된 캐릭터는 산타클로스 정도 밖에 되지 않는다.
뽀롱뽀롱 뽀로로처럼 모두가 즐겁고 평화로운 일반적인 유아용 동물 애니메이션과는 달리 살벌한 야생 세계를 해학과 풍자로 적나라하게 보여준다. 따라서 어른들이 봐도 무척 재미있는 노래들이 많다. 물고기들이 상어가족으로부터 도망치다 "살았다~"하면서 춤을 추지만, 그 뒤에서는 상어 가족들이 포크를 들고 침을 흘리며 물고기들을 노려보고 있다거나(상어 가족), 육식공룡 새끼들이 배고프다고 하자 티라노사우루스 요리사가 노래 초반부에 나온 이구아노돈 요리사와 오르니토미무스 요리사를 잡아먹으러 간다거나...(나는야 공룡 요리사)
유튜브 한류스타로 230억뷰를 달성했다. 강남스타일의 조회수를 넘어섰다는 평. 글로벌 시장을 타케팅 하기 위해 다양한 언어로 유튜브 채널을 운영 중이다. 공식 영어 유튜브 채널은 2021년 6월 29일 현재 5000만 명의 구독자를 보유하고 있고, 한국 유튜브 채널의 경우 현재 911만 명의 구독자를 보유하고 있다.
현재 Despasito를 제치고 유튜브 누적 조회수 1위를 달성하였다.
멜론 급상승 차트 1위에 여러번 등장 했으며, 2018년 설 무렵 지니 실시간 차트에 차트인 한 적이 있고 멜론에서도 최고 일간 213위까지 오른 적이 있었다.
마스코트는 머리에 왕관을 쓰고 목에 별을 단 분홍색 여우로, 핑크퐁 유튜브 영상 도입부에 항상 등장한다.</div>
</div>
</div>
</body>
</html>の最後の部分
スタートアップバーはとても役に立つツールだと気づきました.
明日はロールページを完成して、もう一つのホームページを作ります.
Reference
この問題について(本格開発!初日), 我々は、より多くの情報をここで見つけました https://velog.io/@karlrl3108/본격-개발-1일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol