피그마를 이용한 디자인 작업을 모바일 코딩으로 작업하는 튜토리얼 영상입니다. 모바일 전용 코딩으로 피시부분이나 구 브라우저는 신경쓰지 않고 작업하였습니다.
Code Youtube
Code Reference
소스는 여기서 다운 받을 수 있습니다. 바로가기
완성된 예제는 여기서 확인 할 수 있습니다. 바로가기
피그마 공유 링크입니다. 바로가기
제플린 web 공유 링크입니다. 바로가기
제플린 app 공유 링크입니다. 바로가기
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="author" content="webstoryboy">
<meta name="description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"/>
<meta name="keywords" content="듣기, 2019년 최고의 음악 100선, Apple Music">
<title>Apple Music App</title>
<!-- meta -->
<meta name="format-detection" content="telephone=no">
<meta property="og:title" content="뮤직 모바일 메인">
<meta property="og:url" content="https://github.com/webstoryboy/mobile">
<meta property="og:image" content="https://github.com/webstoryboy/mobile/assets/icon/icon.jpg">
<meta property="og:description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="뮤직 모바일 메인">
<meta name="twitter:url" content="https://github.com/webstoryboy/mobile">
<meta name="twitter:image" content="https://github.com/webstoryboy/mobile/assets/icon/icon.jpg">
<meta name="twitter:description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<!-- icon -->
<link rel="apple-touch-icon-precomposed" href="https://github.com/webstoryboy/mobile/assets/icon/icon.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="https://github.com/webstoryboy/mobile/assets/icon/icon_96.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://github.com/webstoryboy/mobile/assets/icon/icon_144.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="https://github.com/webstoryboy/mobile/assets/icon/icon_192.jpg" />
<!-- style -->
<link rel="stylesheet" href="assets/css/reset03.css">
<link rel="stylesheet" href="assets/css/fonts03.css">
<link rel="stylesheet" href="assets/css/style03.css">
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<time class="header-data">2020년 3월 5일</time>
<h1 class="header-title">음악 듣기</h1>
<div class="header-id"><span>w</span></div>
</div>
</div>
</header>
<!-- //header -->
<main>
<section class="music">
<article class="bestM">
<div class="container">
<div class="row">
<div class="best">
<div class="best-title">
<span class="bt-stit">BEATS 1 ON AIR</span>
<h2 class="bt-tit">Travis Mills</h2>
<p class="bt-desc">L.A.’s pop culture authority</p>
</div>
<picture>
<source srcset="assets/img/bestM01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/bestM01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/bestM01.jpg" srcset="assets/img/bestM01.jpg 1x, assets/img/bestM01@2x.jpg 2x, assets/img/bestM01@3x.jpg 3x" alt="이미지1">
</picture>
</div>
</div>
</div>
</article>
<!-- //bestM -->
<article class="recentM">
</article>
<!-- //recentM -->
<article class="nextM">
</article>
<!-- //nextM -->
</section>
<!-- //music -->
</main>
</body>
</html>/* container */
.container {width: 1000px; margin: 0 auto;}
/* row */
.row {position: relative; margin: 0 20px;}
/* header */
#header .header-data {
font-weight: 600;
font-size: 12px;
padding-top: 30px;
display: block;
color: #a8a8a8;
}
#header .header-title {
font-weight: bold;
font-size: 32px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header .header-id {
position: absolute; right: 0; bottom: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
font-weight: 300;
font-size: 18px;
color: #fff;
/*text-align: center;
line-height: 40px; */
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
background: linear-gradient(149.16deg, #A4A9B5 10.18%, rgba(164, 169, 181, 0) 81.31%), #C4C4C4;
}
/* bestM */
.bestM .best-title .bt-stit {color: #da5e7c; font-size: 12px; line-height: 1.67;}
.bestM .best-title .bt-tit {font-size: 22px; padding-bottom: 5px;}
.bestM .best-title .bt-desc {font-size: 22px; font-weight: 300; color: #818181; margin-bottom: 10px;}
/* mediaquery */
@media (max-width: 1020px){
.container {width: 100%;}
}/* reset */
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input,
legend, li, ol, p, select, table, td, textarea, th, ul {margin: 0; padding: 0}
body, button, h1, h2, h3, h4, h5, input, select, table, textarea {
font-family: "SF Display", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.267em
}
body {
position: relative;
color: #000;
word-break: break-all;
-webkit-text-size-adjust: none /* 아이폰 가로 모드 */
}
table {border-collapse: collapse}
fieldset, img {border: 0}
ol, ul {list-style: none}
address, em {font-style: normal}
a {color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, .1)}
img {vertical-align: top; width: 100%;}
mark {color: inherit; font-weight: 700; background: 0 0}
button, input {-webkit-border-radius: 0; border-radius: 0; background: 0 0}
video::-webkit-media-controls-start-playback-button {display: none !important}/* webfonts */
@font-face {
font-family: "SF Display";
font-weight: 300;
src: url(../fonts/SFProDisplay-Light.ttf);
}
@font-face {
font-family: "SF Display";
font-weight: 500;
src: url(../fonts/SFProDisplay-Medium.ttf);
}
@font-face {
font-family: "SF Display";
font-weight: 400;
src: url(../fonts/SFProDisplay-Regular.ttf);
}
@font-face {
font-family: "SF Display";
font-weight: 600;
src: url(../fonts/SFProDisplay-Semibold.ttf);
}728x90
