HTML์ ์ฃผ์ด์ง ๊ฒ์ ์ฌ์ฉํ๊ณ CSS Reset ์ฌ์ฉ ํด๋ก ์ฝ๋ฉ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
<a href="#/" class="pricing-button">Sign up</a>
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
<a href="#/" class="pricing-button is-featured">Free trial</a>
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
</div>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,
q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,
mark,audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,
nav,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
box-sizing: border-box;
/*๋ด์ฉ + ํ
๋๋ฆฌ ๋๋น ํฌํจ*/
font-family: 'open Sans', sans-serif;
}
body {
background-color: #60a9ff;
display: flex;
justify-content: center;
align-items: center;
/* ์ฃผ์ถ, ๊ต์ฐจ์ถ ๊ธฐ์ค์ผ๋ก item ์ค์ ์ ๋ ฌ */
min-height: 100vh;
}
.panel {
background-color: white;
border-radius: 10px;
/* ๋ชจ์๋ฆฌ ๊น๊ธฐ*/
padding: 15px, 25px;
width: 100%;
max-width: 960px;
/* ๋ถ๋ชจ์์์ 100%์ง๋ง ์ต๋ ๊ธธ์ด๋ฅผ ์ ํจ */
display: flex;
flex-direction: column;
/* ๋ณธ์ถ์ ๋ฐฉํฅ์ ์ํ๋ก ๋ณ๊ฒฝ */
text-align: center;
text-transform: uppercase;
/* ํ
์คํธ๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ + ๋๋ฌธ์๋ณ๊ฒฝ */
}
.pricing-plan {
border-bottom: 1px solid #e1f1ff;
}
.pricing-plan:last-child {
border-bottom: none;
}
/* class ์์๋ฅผ ์ด์ฉํด์ ๊ตฌ๋ถ์ ์ ๋ง๋ค์๊ณ ๋ง์ง๋ง ์์์๋ ๊ตฌ๋ถ์ ์ด ํ์ ์๊ธฐ์ ๊ทธ๋ถ๋ถ์ ์ญ์ ํจ*/
.pricing-img {
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #888;
font-weight: 600;
letter-spacing: 1px;
}
/* class์์๋ฅผ ์ด์ฉํด์ ์, ๊ตต๊ธฐ, ๊ธ์๊ฐ๊ฒฉ ์กฐ์ */
.pricing-features {
margin: 50px 0 25px;
color: #016ff9
}
.pricing-features-item {
font-weight: 600;
letter-spacing: 1px;
font: size 12px;
line-height: 1.5;
padding: 15px 0;
border-top: 1px solid #e1f1ff;
}
.pricing-features-item:last-child {
border-top: 1px solid #e1f1ff;
}
.pricing-price {
color: #016ff9;
display: block;
font-size: 32px;
font-weight: 700;
}
/* class ์์๋ฅผ ์ด์ฉํด์ ๋ถ๋ถ ๋ถ๋ถ ์ํ๋ ๋์์ธ์ผ๋ก ๋ง๋๋ ๊ณผ์ */
.pricing-button {
border: 1px solid #9dd1ff;
border-radius: 10px;
color: #348efe;
display: inline-block;
padding: 15px 35px;
/* inline-block์ inline๊ณผ ๋น์ทํ์ง๋ง ๋๋น์ ๋์ด๋ฅผ ์ค์ ํ ์์๋ค */
text-decoration: none;
margin: 25px 0;
transition: background-color 200ms ease-in-out;
}
.pricing-button:hover,
.pricing-button:focus {
background-color: #e1f1ff;
}
.pricing-button.is-featured {
background-color: #48aaff;
color: white;
}
.pricing-button.is-featured:hover,
pricing-button.is-featured:focus {
background-color: #269aff;
color: white;
}
/* ์๋๋ถํฐ๋ ๋ฐ์ํ ์์
*/
/* ์์ ํ๋ฉด (๋ชจ๋ฐ์ผ ํ๋ฉด) ๋ถํฐ ๋ง๋ค๊ณ @media ์์์ min-width์์๋ฅผ ์ด์ฉํด ํ๋ฉด์ด ํด๋๋ ๋ง๋ ๊ฒ! */
@media (min-width: 900px)
{
.panel {
flex-direction: row;
}
.pricing-plan {
border-bottom: none;
border-right: 1px solid #e1f1ff;
}
.pricing-plan:last-child {
border-right: none;
}
}