본문 바로가기
공부 기록/HTML & CSS

간단한 실습(2) - Price Table (반응형 디자인과 reset CSS)

yurison 2023. 1. 18. 00:52

Responsive Design

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

 

Responsive design - Learn web development | MDN

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the site

developer.mozilla.org

 

 

- 화면 크기에 따라 가로형, 세로형 디자인으로 전환된다.

.html

<!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="pricing_panel.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>

.css

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-imag {
    margin-bottom: 25px;
    max-width: 100%;
}

.pricing-header {
    color: #888;
    font-weight: 600;
    letter-spacing: 1px;
    padding-top: 20px;
}

.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: 10px 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: 600;
}

.pricing-button {
    border: 1px solid #9dd1ff;
    border-radius: 10px;
    color: #348efe;
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    margin: 25px 0;
    font-weight: 600;
    transition: background-color 200ms ease-in-out;
}

.pricing-button.is-featured {
    color: white;
    background-color: #48aaff;
}

.pricing-button:hover, .pricing-button:focus {
    background-color: #e1f1ff;

}

.pricing-button.is-featured:hover, .pricing-button.is-featured:focus {
    background-color: #348efe;
}

@media (min-width: 600px) {
    .panel {
        flex-direction: row;
        max-width: 1300px;
        padding: 50px;
    }

    .pricing-plan {
        border-bottom: none;
        border-right: 1px solid #e1f1ff;
        padding: 20px;
    }

    .pricing-plan:last-child {
        border-right: none;
    }
}

 

reset CSS code

https://www.jsdelivr.com/package/npm/reset-css

 

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

www.jsdelivr.com

- 웹브라우저마다 default CSS 스타일이 적용되어 있기 때문에, 이를 초기화시키기 위해 reset CSS 코드를 적용한다.

 

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, menu, 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,
main, 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, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, 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 & CSS' 카테고리의 다른 글

부트스트랩 연습(2) - Grid, Form, navbar  (0) 2023.01.18
부트스트랩 연습(1)  (0) 2023.01.18
간단한 실습(1) - Photo site  (0) 2023.01.18
Button :hover  (0) 2023.01.18
Form  (0) 2023.01.18

'공부 기록/HTML & CSS' Related Articles

티스토리툴바