1. 주제선정
2. 디자인모델링
스케치
웹문서 / 그림파일로 : 와이어프레임 - 뼈대만 폰트x 그림x
목업 : 기능은 없지만 보기에는 완성
프로토타입 : 자바스크랩트 , 동작하는 웹페이지 자체, 프론트쪽에서는 거의 완성
시험적프로토타입 - 1회용
이어나가는 프로토타입
스토리보드 : 최종문서
https://balsamiq.com/wireframes/
Balsamiq Wireframes | Balsamiq
Balsamiq Wireframes is the industry standard quick and easy low-fidelity UI wireframing tool. It makes work fun!
balsamiq.com
카카오오븐
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
네이버??
test1
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
*{
box-sizing: border-box;
text-align: center;
color: white;
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px;
font-weight: 500;
}
div{
/* border: 1px dotted white;*/
}
body{
padding: 0;
margin: 0;
background-color: black;
position: relative;
}
.wrapper{
width: 1200px;
margin: auto;
position: relative;
top: 100px;
}
.text1{
font-size: 50px;
font-weight: 900;
}
.contents{
margin: auto;
}
.footer{
height: 5px;
background-color: #131024;
}
.name{
background-color:#E50914 ;
width: 336px;
margin: auto;
}
.menu-bar{
position: fixed;
left: -220px;
z-index: 10;
background-color: #131024;
width: 250px;
height: 100%;
}
.menu-bar:hover{
position: fixed;
left: 0px;
z-index: 10;
transition-duration: 0.5s;
}
.menu-bar li{
position: relative;
list-style: none;
line-height: 100px;
left: -10px;
float: left;
width: 100%;
}
.menu-bar a{
text-decoration: none;
}
.poli-menu:hover{
background-image: url(politician.webp)
}
.you-menu:hover{
background-image: url(yougif.webp) }
.santa-menu:hover{
background-image: url(santagif.webp)
}
.witcher-menu:hover{
background-image: url(witchergif.webp)
}
.kingdome-menu:hover{
background-image: url(kinggif.webp)
}
.nailedit-menu:hover{
background-image: url(%ED%8C%8C%ED%8B%B0.webp)
}
.main img{
overflow: hidden
}
.main:hover .name{
background-color: white;
color: black;
transition-duration: 0.7s;
}
.button1{
background-color: #131024;
border: none;
color:#E50914;
padding: 15px 0;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
margin: 4px;
cursor: pointer;
border-radius:10px;
}
.button1:hover{
background-color: #E50914;
color:black;
}
.youtube{
display: none;
z-index: 20;
position: absolute;
left:790px
}
.main:hover .youtube{
display: block
}
.footer-text li{
font-size: 10px;
color: gainsboro;
font-weight: 100;
display: block;
float: left;
}
.maker{
position: absolute;
bottom: 10px;
left: 10px;
color: gainsboro;
font-weight: 100;
font-size: 10px;
}
.trigger{
position: absolute;
left:225px;
top:80px;
color: #E50914;
}
.popup{
position: absolute;
top: 135px;
left: 432px;
z-index: -1;
width: 336px;
height: 180px;
color: white;
}
.main:hover .popup{
position: absolute;
left: 80px;
background-color: #E50914;
transition-duration: 0.7s;
}
.popup-witcher{
position: absolute;
top: 390px;
}
.popup-santa{
position: absolute;
top: 645px;
}
.popup-you{
position: absolute;
top: 900px;
}
.popup-poli{
position: absolute;
top: 1155px;
}
.popup-nailedit{
position: absolute;
top: 1410px;
}
</style>
</head>
<body>
<div class="menu-bar">
<img src="" alt="">
<ul>
<li><a href="https://www.netflix.com/kr/"><input type="button" value="NETFLIX" class="button1"></a></li>
<li class="kingdome-menu menu">
<a href="https://www.netflix.com/kr/title/80180171"> 킹덤 </a></li>
<li class="witcher-menu menu"><a href="https://www.netflix.com/kr/title/80189685">위쳐</a></li>
<li class="santa-menu menu"><a href="https://www.netflix.com/kr/title/80095815">산타클라라 다이어트</a></li>
<li class="you-menu menu"><a href="https://www.netflix.com/kr/title/80211991">너의 모든것</a></li>
<li class="poli-menu menu"><a href="https://www.netflix.com/kr/title/80241248">더 폴리티션</a></li>
<li class="nailedit-menu menu"><a href="https://www.netflix.com/kr/title/80179138">파티셰를
잡아라</a></li>
</ul>
<div class =maker>KH / 2020-04-08 / 감사합니다.</div>
<div class="trigger">▶</div>
</div>
<div class="wrapper">
<div class="header">
<div class="text1">넷플릭스 뭐 보지?<br></div>
<div class="text2">뭐부터 봐야 할지 모르겠는 당신을 위한 추천작!</div><br>
</div>
<div class="contents">
<div class="main kingdom">
<div class= "youtube youtube-kingdom">
<iframe width="560" height="315" src="https://www.youtube.com/embed/x-YJTJsVQ_0?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%ED%82%B9%EB%8D%A4.webp" alt="">
<div class="name">킹덤
</div>
<div class="popup"><br>병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</div>
</div>
<div><br></div>
<div class="main witcher">
<div class= "youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bjSnsUFPxLI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%EC%9C%84%EC%B3%902.webp" alt="">
<div class="name">위쳐</div>
<div class="popup popup-witcher"> 세계적인 판타지 대작이 넷플릭스 시리즈로 다시 태어난다. 어둠과 위험의 세계, 진실은 어디에 있을까. 운명으로 묶인 그들. 위쳐와 마법사, 홀로 남은 공주의 싸움이 시작된다.</div>
</div>
<div><br></div>
<div class="main santa">
<div class= "youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/R1Ib_OLPyRM?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%EC%82%B0%ED%83%80%ED%81%B4%EB%9D%BC%EB%9D%BC%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8.webp" alt="">
<div class="name">산타클라라 다이어트</div>
<div class="popup popup-santa">부동산 중개업에 종사하는 평범한 부부. 어느 날부터 아내에게 극적인 변화가 일어나고, 평범했던 두 사람에게 이제 죽음과 파멸이 가득한 '즐거운' 나날이 펼쳐진다.</div>
</div>
<div><br></div>
<div class="main you">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/RTmzZ5ipCq4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%EB%84%88%EC%9D%982.webp" alt="">
<div class="name">너의 모든것</div>
<div class="popup popup-you">
마음이 끌리는 사람에게 다가가기 위해서라면, 무슨 짓이든 할 수 있다. 위험한 매력의 소유자, 집착의 끝을 보여주는 남자. 그의 소름 끼치는 로맨스가 시작된다.
</div>
</div>
<div><br></div>
<div class="main politician">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zSj4Xm4raTg?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%EB%8D%94%20%ED%8F%B4%EB%A6%AC%ED%8B%B0%EC%85%98.webp" alt="">
<div class="name">더 폴리티션</div>
<div class="popup popup-poli">남부러울 것 없이 부유한 소년, 미래에 대통령이 되리라 믿어 의심치 않는 페이튼. 탄탄대로의 정치 인생을 위해, 거쳐야 할 험난한 과정이 있다. 고등학교 학생회장 선거!</div>
</div>
<div><br></div>
<div class="main nailedit">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/93hgjnR31fg?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="%ED%8C%8C%ED%8B%B03.webp" alt="">
<div class="name">파티셰를 잡아라!</div>
<div class="popup popup-nailedit">과거는 잊어주세요. 엉망진창 경력을 뒤로하고, 아마추어 제빵사들이 도전을 시작한다. 임무는 ‘걸작’을 구워라, 상금은 1만 달러! 근데 이 난장판, 리얼리티 쇼가 맞나?</div>
</div>
</div>
<br>
<br>
<br>
<div class="footer">
<div class="footer-text">
</div>
</div>
</div>
</body>
</html>
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [화면 구현] (0) | 2020.05.11 |
|---|---|
| [UI 구현] (0) | 2020.05.01 |
| [CSS] animated css (0) | 2020.04.07 |
| [CSS] 예제 - 팝업 리스트 만들기 (0) | 2020.04.07 |
| [CSS] hover (0) | 2020.04.07 |