피그마를 이용한 디자인 작업을 모바일 코딩으로 작업하는 튜토리얼 영상입니다. 기존에 많이 사용하던 float을 사용하지 않고 display:flex를 사용하여 구조화하였습니다.
Code Youtube
Code Reference
소스는 여기서 다운 받을 수 있습니다. 바로가기
완성된 예제는 여기서 확인 할 수 있습니다. 바로가기
피그마 공유 링크입니다. 바로가기
제플린 web 공유 링크입니다. 바로가기
제플린 app 공유 링크입니다. 바로가기
Code example
<!DOCTYPE html>
<html lang="ko">
<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://webstoryboy.github.io/apple">
<meta property="og:image" content="https://webstoryboy.github.io/apple/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://webstoryboy.github.io/apple">
<meta name="twitter:image" content="https://webstoryboy.github.io/apple/assets/icon/icon.jpg">
<meta name="twitter:description" content="뮤직 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<!-- icon -->
<link rel="apple-touch-icon-precomposed" href="https://webstoryboy.github.io/apple/assets/icon/icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="https://webstoryboy.github.io/apple/assets/icon/icon_96.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://webstoryboy.github.io/apple/assets/icon/icon_144.jpg">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="https://webstoryboy.github.io/apple/assets/icon/icon_192.jpg">
<!-- style -->
<link rel="stylesheet" href="assets/css/reset05.css">
<link rel="stylesheet" href="assets/css/fonts05.css">
<link rel="stylesheet" href="assets/css/style06.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">BEAT1 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">
<div class="container">
<div class="row">
<h2>최근 재생한 음악</h2>
<div class="recent">
<picture>
<source srcset="assets/img/recent_img01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/recent_img01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/recent_img01.jpg" srcset="assets/img/recent_img01.jpg 1x, assets/img/recent_img01@2x.jpg 2x, assets/img/recent_img01@3x.jpg 3x" alt="이미지1">
</picture>
<div class="recent-title">
<span class="rt-stit">퓨어 팝</span>
<h3 class="rt-tit">오늘의 팝 사운드</h3>
</div>
</div>
<div class="recent">
<picture>
<source srcset="assets/img/recent_img02@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/recent_img02@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/recent_img02.jpg" srcset="assets/img/recent_img02.jpg 1x, assets/img/recent_img02@2x.jpg 2x, assets/img/recent_img02@3x.jpg 3x" alt="이미지1">
</picture>
<div class="recent-title">
<span class="rt-stit">퓨어 팝</span>
<h3 class="rt-tit">오늘의 팝 사운드</h3>
</div>
</div>
</div>
</div>
</article>
<!-- //recentM -->
<article class="nextM">
<div class="container">
<div class="row">
<h2>다음 프로그램</h2>
<div class="next-wrap">
<div class="next">
<div class="next-img">
<picture>
<source srcset="assets/img/next01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next01.jpg" srcset="assets/img/next01.jpg 1x, assets/img/next01@2x.jpg 2x, assets/img/next01@3x.jpg 3x" alt="이미지1">
</picture>
</div>
<div class="next-tit">
<span class="nt-stit">BEATS 1 ON AIR </span>
<h3 class="nt-tit">BEATS 1 ON AIR </h3>
<p class="nt-desc">Paloma Mami talks female empowerment and her sodfdfdfng Mami</p>
</div>
</div>
<div class="next">
<div class="next-img">
<picture>
<source srcset="assets/img/next02@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next02@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next02.jpg" srcset="assets/img/next02.jpg 1x, assets/img/next02@2x.jpg 2x, assets/img/next02@3x.jpg 3x" alt="이미지1">
</picture>
</div>
<div class="next-tit">
<span class="nt-stit">BEATS 1 ON AIR </span>
<h3 class="nt-tit">BEATS 1 ON AIR </h3>
<p class="nt-desc">Paloma Mami talks female empowerment and her sodfdfdfng Mami</p>
</div>
</div>
<div class="next">
<div class="next-img">
<picture>
<source srcset="assets/img/next03@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next03@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next03.jpg" srcset="assets/img/next03.jpg 1x, assets/img/next03@2x.jpg 2x, assets/img/next03@3x.jpg 3x" alt="이미지1">
</picture>
</div>
<div class="next-tit">
<span class="nt-stit">BEATS 1 ON AIR </span>
<h3 class="nt-tit">BEATS 1 ON AIR </h3>
<p class="nt-desc">Paloma Mami talks female empowerment and her sodfdfdfng Mami</p>
</div>
</div>
<div class="next">
<div class="next-img">
<picture>
<source srcset="assets/img/next04@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next04@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next04.jpg" srcset="assets/img/next04.jpg 1x, assets/img/next04@2x.jpg 2x, assets/img/next04@3x.jpg 3x" alt="이미지1">
</picture>
</div>
<div class="next-tit">
<span class="nt-stit">BEATS 1 ON AIR </span>
<h3 class="nt-tit">BEATS 1 ON AIR </h3>
<p class="nt-desc">Paloma Mami talks female empowerment and her sodfdfdfng Mami</p>
</div>
</div>
<div class="next">
<div class="next-img">
<picture>
<source srcset="assets/img/next05@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next05@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next05.jpg" srcset="assets/img/next05.jpg 1x, assets/img/next05@2x.jpg 2x, assets/img/next05@3x.jpg 3x" alt="이미지1">
</picture>
</div>
<div class="next-tit">
<span class="nt-stit">BEATS 1 ON AIR </span>
<h3 class="nt-tit">BEATS 1 ON AIR </h3>
<p class="nt-desc">Paloma Mami talks female empowerment and her sodfdfdfng Mami</p>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- //nextM -->
</section>
<!-- //music -->
</main>
<section class="play">
<div class="play-img">
<picture>
<source srcset="assets/img/next01@3x.jpg" media="(min-width: 800px)">
<source srcset="assets/img/next01@2x.jpg" media="(min-width: 600px)">
<img src="assets/img/next01.jpg" srcset="assets/img/next01@2x.jpg 2x, assets/img/next01@3x.jpg 3x" alt="이미지5">
</picture>
</div>
<div class="play-tit">창모(CHANGMO)</div>
<div class="play-play">
<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.13398C17.1667 9.51888 17.1667 10.4811 16.5 10.866L1.5 19.5263C0.833335 19.9112 9.70611e-07 19.4301 1.00426e-06 18.6603L1.76136e-06 1.33975C1.79501e-06 0.569945 0.833336 0.0888202 1.5 0.47372L16.5 9.13398Z" fill="black" />
</svg>
</div>
<div class="play-next">
<svg width="39" height="24" viewBox="0 0 39 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 11.134C23.1667 11.5189 23.1667 12.4811 22.5 12.866L7.5 21.5263C6.83333 21.9112 6 21.4301 6 20.6603L6 3.33975C6 2.56995 6.83334 2.08882 7.5 2.47372L22.5 11.134Z" fill="black" />
<path d="M37.5 11.134C38.1667 11.5189 38.1667 12.4811 37.5 12.866L22.5 21.5263C21.8333 21.9112 21 21.4301 21 20.6603L21 3.33975C21 2.56995 21.8333 2.08882 22.5 2.47372L37.5 11.134Z" fill="black" />
</svg>
</div>
</section>
<!-- //play_btn -->
</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;}
/* recentM */
.recentM {padding-top: 10px; margin-top: 19px; overflow: hidden;}
.recentM .recent {float: left; width: 49%; margin-right: 2%;}
.recentM .recent:last-child {margin-right: 0;}
.recentM h2 {font-size: 20px; font-weight: bold; margin-bottom: 12px; margin-top: 16px; padding-top: 20px; border-top: 1px solid #ebebeb;}
.recentM .recent-title .rt-stit {color: #000; font-size: 15px; line-height: 1.9;}
.recentM .recent-title .rt-tit {color: #908f94;font-size: 15px; padding-bottom: 5px; font-weight: 100;}
/* nextM */
.nextM h2 {font-size: 20px; font-weight: bold; margin-bottom: 12px; margin-top: 16px; padding-top: 20px; border-top: 1px solid #ebebeb;}
.nextM .next {display: flex; font-size: 16px; margin-bottom: 16px; position: relative;}
.nextM .next:after {
content: '';
position: absolute;
right: 0;
bottom: -8px;
width: calc(100% - 114px);
height: 1px;
background: #ebebeb;
}
.nextM .next .next-img {width: 102px; margin-right: 12px; flex-shrink: 0;}
.nextM .next .next-tit {display: flex; flex-direction: column; justify-content: center;}
.nextM .next .next-tit .nt-stit {color: #da5e7c; font-size: 16px;}
.nextM .next .next-tit .nt-tit {color: #000; font-size: 17px;}
.nextM .next .next-tit .nt-desc {
color: #a1a1a1;
font-size: 13px;
font-weight: 100;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* play */
.play {
position: fixed; bottom: 0; left: 0; z-index: 9000;
width: 100%; height: 62px; background-color: rgba(255,255,255,.7);
backdrop-filter: saturate(180%) blur(20px);
display: flex; align-items: center;
}
.play .play-img {width: 48px; padding: 8px 20px;}
.play .play-img img{border-radius: 5px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.play .play-tit {font-size: 16px;}
.play .play-play {margin-left: auto; padding-right: 10px; cursor: pointer;}
.play .play-next {cursor: pointer; margin-right: 20px;}
/* 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
