💧CSS:Exercise

hojune·2023년 8월 13일

Web Development

목록 보기

10/33

HTML은 주어진 것을 사용했고 CSS Reset 사용 클론코딩

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="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>

CSS Reset

/* 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;
}

CSS

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;
    }
}