ChangMinYang

코딩노잼

가격표 만들기

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

가격표 만들기 CSS

  • 초기상태 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 코드

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

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

    /* is-featured를 가진 pricing-button class에 적용 */
    .pricing-button.is-featured {
        background-color: #48aaff;
        color: white;

    }

    .pricing-button.is-featured:hover, .pricing-button.is-featured:focus{
        background-color: blue;
        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;
        }
    }
  • 통일을 위한 CSS 리셋을 시켜준다.

    CSS 리셋이란?

    • 행 높이, 여백 및 제목의 글꼴 크기 등과 같은 모든 태그는 브라우저마다 default값이 다르다. 그래서 이들을 제거하여 브라우저 기본요소의 디자인 서식을 통일하는 방법이다.
  • 완성한 웹 화면

가격표만들기2

  • 완성한 모바일 화면

가격표만들기3

TIL/회고

  • 아직 flex-direction나 display를 무엇으로 설정해야 하는지, 정렬을 하는게 어려웠다.
  • vh단위는 처음 본 단위였다. viewport 높이의 %단위였다. 어떠한 단위를 사용해야 하는지 아직 모르겠다.
  • 눈에 잘 보이지 않는 부분 꼼꼼하게 살피자!

댓글남기기

참고