Pricing UI Component 클론 1

포폴 웹사이트를 다시 만들기 전까지 클론연습은 안하려고 했는데
하루에 조금씩이라도 꾸준히 하는 게 좋을 것 같아서 다시 시작.

오늘 하려는 작업은 UI Component를 클론하는 것이다.

요즘 자신감이 많이 떨어지고 있어서 규모, 난이도, 수준 가리지 않고 뭐든 연습해보려고 하고 있다.

템플릿은 무료 피그마 시안을 받아서 작업 중이다.

오늘은 HTML. CSS 모두 마치는 것이 목표.

우선 마크업을 완료 했다.

시안을 세개의 파트로 나눴다. 처음에는 div로 나눴다가, 위 아이콘과 Guardian은 전체 컴포넌트로 봤을 때는 제목, 주제가 될 수 있다고 생각해서 header태그로 감싸주었고, 마지막 free forever과 버튼은 footer로 감싸주었다. 중간의 설명은 div태그로 감싸주었다.

중간 설명은 리스트 태그가 적합하다고 생각하여 ul, li태그를 사용했다.

choose버튼은 버튼 태그를 사용할까 하다가 버튼을 클릭하면 결제창으로 넘어갈 것이라 생각해서 a태그를 사용해 만들어 주었다.

 <!-- Guardian -->
    <section class="guardian">
        <header class="guardian-header">
            <i class="fa-solid fa-skull"></i>
            <h1 class="header-title">
                Guardian
            </h1>
        </header>
        <div class="desc-desc">
            <p class="desc-title">
                What You’ll Get
            </p>
            <ul>
                <li class="desc-list">
                    <i class="fa-solid fa-circle-check"></i>
                    <span>
                        Edit up to 10 hours of podcast audio files.
                    </span>
                </li>
                <li class="desc-list">
                    <i class="fa-solid fa-circle-check"></i>
                    <span>
                        Set your own CoreLoop Page
                    </span>
                </li>
            </ul>
        </div>
        <div class="desc-divider"></div>
        <footer class="guardian-footer">
            <strong>
                Free Forever
            </strong>
            <a href="#" class="footer__button">
                Choose
            </a>
        </footer>

마지막으로 전체 요소를 section태그로 감싸주었다.