섹션 11:Pricing Panel Project
이 프로젝트는 code pen의 travis williamson의 작업물을 base로 하고 있다.
meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
The goal is to normalize how browser styles work across different browsers.
Basically give you a clean slate because some browsers have different default padding or margin or font
sizes for headings.
So this is just a couple of lines of css that people like to copy and put inside of their style
sheets or make a separate out style sheet with.
you don't have to do that when you're making applications in your writing your styles.
But a lot of people like to do that just so that you do have this even sort of very blank starting spot
that you can then add onto and modify.
그냥 기본적인 css 요소들의 특성의 default값들을 리셋한다고 생각하면 될듯.. 하지 않아도 되지만 많은 사람들이 이걸 쓴다.
사용법은 reset css의 syntext를 css sheet에 복붙하면 된다.
프로젝트의 목표는 html로만 작성된 페이지에 flex특성과 media특성이 가미된 반응형 페이지를 만드는것.
처음에는 모바일 디바이스에 대응하는 css를 만들고
그다음에 미디어 특성을 이용해서 만든다.
으... 보는건 쉽지만
직접만들어보자니 이거 참... 막막하다..
으아아아아 만드는데 너무 해멘다 ... 잘 시간이 다가온다..
내일 일 끝나고 다시 해야겠다.
<!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">
<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;
min-height: 100vh;
}
.panel {
background-color: white;
border-radius: 10px;
padding: 15px 25px;
width: 100%;
max-width: 960px;
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;
}
.pricing-img {
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #888;
font-weight: 600;
letter-spacing: 1px;
}
.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-bottom: 1px solid #e1f1ff;
}
.pricing-price {
color: #016ff9;
display: block;
font-size: 32px;
font-weight: 700;
}
.pricing-button {
border: 1px solid #9dd1ff;
border-radius: 10px;
color: #348efe;
display: inline-block;
padding: 15px 35px;
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: 900px){
.panel {
flex-direction: row;
}
.pricing-plan {
border-bottom: none;
border-right: 1px solid #e1f1ff;
padding: 25px 50px;
}
.pricing-plan:last-child {
border-right: none;
}
}
일할때 쉬는시간에 보기위한 솔루션 코드
'TIL(today I learned)' 카테고리의 다른 글
| 2020-11-01 TIL (0) | 2020.11.01 |
|---|---|
| 2020-10-31 TIL 정리(10월의 TIL 정리하기) (0) | 2020.10.31 |
| 2020-10-29 TIL (0) | 2020.10.29 |
| 2020-10-28 TIL (0) | 2020.10.28 |
| 2020-10-27 TIL (0) | 2020.10.27 |