시작하며 👏

평소에 Carousel을 많이 봤지만, 제가 직접 짤 줄은 몰랐습니다.
무엇보다 여태까지 한 번쯤 만들어 볼 만했는데, 하지 않았다는 점에서,
내가 호기심이 좀 덜했구나! 싶었습니다.
앞으로는 뭔가 직접 마주하는 것들 모두 만들어보면서,
내 것으로 만들어야겠다고 생각하며. 레이아웃 시작!

본론 📃

일단 마크업에서 가장 고민되는 순간 중 하나가 section과 article이었어요.
저 같은 경우, article은 좀 더 독립될 수 있는 주제에 쓰는 편인데,

• 채용 프로그램을 보여주는 carousel의 경우, 그 자체로 하나의 콘텐츠들의 모임이다! 싶어서, article로 감싸줬습니다.
• 그리고 programs__container의 경우 단순히 나누는 역할을 해주기 때문에 div를 썼고,
• programs__header은 주제를 보여주는 것들로 뭉쳐있으니 section을 썼습니다.
• programs__cards의 경우 여러 관련된 것들이 뭉쳐있기 때문에 ul을 썼고, 하위 요소들에 li를 전달하는 방식으로 썼습니다.

최대한 제가 이해하고 있는 symantic한 markup을 하려 노력했어요!!

    <article class="programs">
        <div class="programs__container">
            <section class="programs__header">
                <header class="programs__head">
                    <div class="programs__title-and-info">
                        <h2 class="programs__title">채용 프로그램</h2>
                        <button class="programs__info-btn">
                            <i class="fas fa-comment-dots"></i>
                        </button>
                    </div>
                    <button class="programs__more-btn">더보기</button>
                </header>
                <section class="programs__move-btn">
                    <button class="programs__move-left">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="programs__move-right">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </section>
            </section>
            <section class="programs__card-box">
                <ul class="programs__program-cards">
                    <!-- <li class="programs__program-card">
                        <div class="programs__label">진행 중</div>
                        <div class="programs__card-item">
                            <a href="" class="programs__link">
                                <img src="" alt="채용 프로그램 이미지" class="programs__image">
                            </a>
                            <div class="programs__program-info">
                                <h3 class="programs__program-title"></h3>
                                <h4 class="programs__program-times">
                                    <span class="programs__period-receipt"></span>
                                    <span class="programs__period-test"></span>
                                </h4>
                            </div>               
                        </div>
                    </li> -->
                </ul>
            </section>
            <ul class="programs__page-btns">
                <!-- <li class="program__page-btn"></li> -->
            </ul>
        </div>
    </article>