혼자 처음 만드는 서비스
막막하다
- 강의를 들을 땐 주는 가이드라인과 기본이 되는 코드로 시키는 것만 이것저것 만져보면 됐는데, 전에 했던 걸 보면서 해도 영 막막하다.
첫 페이지를 만들며 레이아웃을 짜고 싶은데 어떻게 짜야하는지 아무리 찾아도 모르겠다.
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>90년대 초딩이 숙제로 만든 페이지 같다.
HTML과 CSS만으로 만드는 게 얼마나 힘든지 느꼈다.
저녁을 먹으며 부트스트랩을 써야겠다는 생각이 겨우 들었다.
부트스트랩 쓸 준비도 다 해놓고 왜 저러고 있었는지...
부트스트랩을 조금 썼다
- 한 시간도 안 걸려서 레이아웃을 원하는대로 짰다!
그것도 반응형 레이아웃으로 짤 수 있었다!
와우...
부트스트랩 공홈에서 레이아웃 설명을 들었을 땐 이게 뭔가 싶었는데,
레이아웃 코드를 짜주는 서비스가 있어서 금방 만들 수 있었다.
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>마치며
부트스트랩이 정말 유용한 도구라는 걸 깨달았다.
내일 캐릭터 페이지를 대략 마치고 메인 페이지를 만들어봐야겠다.
시작은 창대하나 끝은 미약하리라