웹사이트 만들기 : 전체 사이트 유형01

레이아웃 : 전체 사이트 유형01

지금까지 카드 유형, 텍스트 유형, 이미지/텍스트 유형 등 다양한 유형의 레이아웃을 작업해 보았습니다. 이번에는 작업했던 유형들을 모두 한 곳에 모아 전체적인 사이트 한 페이지를 만들고, 미디어 쿼리까지 작업해 보도록 하겠습니다.

---

HTML 소스

HTML 소스는 지금까지 작업한 모든 것들을 한 곳에 모은 것과 같습니다. 헤더 메뉴는 웹에서는 일반적인 메뉴 형태로, 모바일에서는 햄버거 메뉴로 작업해 주었습니다. 각 메뉴를 클릭했을 때, 각각의 위치로 이동할 수 있도록 각 영역은 section 태그로 작업해 주었습니다. 슬라이드 영역을 다시 작업해준 이유는 swiper를 사용하기 위함입니다. 드래그를 통한 이미지 슬라이드 효과를 사용하기 위해 swiper를 이용했고, swiper의 style에 맞추어 클래스를 새롭게 부여해 주었습니다.

HTML

<div id="skip">
    <a href="#">헤더 영역 바로가기</a>
    <a href="#">슬라이드 영역 바로가기</a>
    <a href="#">이미지 영역 바로가기</a>
    <a href="#">이미지/텍스트 영역 바로가기</a>
    <a href="#">카드 영역 바로가기</a>
    <a href="#">배너 영역 바로가기</a>
    <a href="#">텍스트 영역 바로가기</a>
    <a href="#">푸터 영역 바로가기</a>
</div>
<!-- //skip (for 웹표준 준수) -->

<!-- header -->
<header id="headerType" class="header__wrap nexon">
    <div class="header__inner">
        <div class="header__logo">
            <a href="#">CUTE</a>
        </div>
        <nav class="header__menu">
            <ul>
                <li class="active"><a href="#sliderType">MAIN</a></li>
                <li><a href="#imageType">DOG</a></li>
                <li><a href="#imgTextType">CAT</a></li>
                <li><a href="#cardType">MORE</a></li>
                <li><a href="#bannerType">BANNER</a></li>
                <li><a href="#textType">ETC</a></li>
                <li><a href="#footerType">FOOTER</a></li>
            </ul>
        </nav>
        <div class="header__member">
            <a href="#">로그인</a>
        </div>
    </div>
</header>
<!-- //header -->

<section id="sliderType" class="slider__wrap">
    <h2 class="blind">슬라이드 영역</h2>
    <div class="slider__inner">
        <!-- <div class="slider">
                <div class="slider__img">
                    <div class="desc">
                        <span>ANIMAL</span>
                        <h3>CUTE ANIMAL</h3>
                        <p>
                            숙제에 지친 이들을 위한 힐링 공간입니다.<br />
                            귀여운 동물들을 보며 잠시나마 현실도피를 합시다.
                        </p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#" class="black">사이트 보기</a>
                        </div>
                    </div>
                </div>
                <div class="slider__arrow"> -->
        <!-- blind는 단순 글자 숨김, ir은 이미지의 alt효과 대체 -->
        <!-- <a href="#" class="left"><span class="ir">이전 이미지</span></a>
                    <a href="#" class="right"><span class="ir">다음 이미지</span></a>
                </div>
                <div class="slider__dot">
                    <a href="#" class="dot active"><span class="ir">1</span></a>
                    <a href="#" class="dot"><span class="ir">2</span></a>
                    <a href="#" class="dot"><span class="ir">3</span></a>
                    <a href="#" class="play"><span class="ir">플레이</span></a>
                    <a href="#" class="stop"><span class="ir">정지</span></a>
                </div>
            </div> -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="desc">
                        <span>ANIMAL</span>
                        <h3>CUTE ANIMAL</h3>
                        <p>
                            숙제에 지친 이들을 위한 힐링 공간입니다.<br />
                            귀여운 동물들을 보며 잠시나마 현실도피를 합시다.
                        </p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#" class="black">사이트 보기</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="desc">
                        <span>ANIMAL</span>
                        <h3>CUTE ANIMAL</h3>
                        <p>
                            숙제에 지친 이들을 위한 힐링 공간입니다.<br />
                            귀여운 동물들을 보며 잠시나마 현실도피를 합시다.
                        </p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#" class="black">사이트 보기</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="desc">
                        <span>ANIMAL</span>
                        <h3>CUTE ANIMAL</h3>
                        <p>
                            숙제에 지친 이들을 위한 힐링 공간입니다.<br />
                            귀여운 동물들을 보며 잠시나마 현실도피를 합시다.
                        </p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#" class="black">사이트 보기</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</section>
<!-- //sliderType -->

<section id="imageType" class="card__wrap nexon section">
    <h2>귀여운 댕댕이</h2>
    <p>뭐니뭐니해도 귀여운 동물 하면 강아지죠. 우선 강아지들을 보세요.</p>
    <div class="image__inner container">
        <div class="image img1">
            <h3 class="image__title">Shih Tzu</h3>
            <p class="image__desc">
                표정이 약간 멍청해 보이는 게 정말 귀엽습니다.<br />
                실제로도 멍청할 것 같습니다.
            </p>
            <a class="image__btn" href="#" title="자세히 보기">
                <div class="more">자세히 보기</div>
            </a>
        </div>
        <div class="image img2">
            <h3 class="image__title">French Bulldog</h3>
            <p class="image__desc">
                볼수록 매력있는 견종입니다.<br />
                침을 아주 줄줄 흘린다고 합니다.
            </p>
            <a class="image__btn blue" href="#" title="자세히 보기">
                <div class="more">자세히 보기</div>
            </a>
        </div>
    </div>
</section>
<!-- //imageType -->

<section id="imgTextType" class="imgText__wrap nexon section">
    <h2 class="blind">고양이가 빠지면 섭하다</h2>
    <div class="imgText__inner container">
        <div class="imgText__txt">
            <span>고양이 영역</span>
            <h3>고양이가 빠지면 섭하다</h3>
            <p>고양이가 성격은 나쁘다지만, <br />강아지들도 다 좋은 녀석들만은 아니잖아요.</p>
            <ul>
                <li><a href="#">Persian</a></li>
                <li><a href="#">Siamese</a></li>
                <li><a href="#">Sphynx</a></li>
                <li><a href="#">ragdoll</a></li>
                <li><a href="#">Scottish Fold</a></li>
                <li><a href="#">Turkish angora</a></li>
            </ul>
        </div>
        <div class="imgText__img img1">
            <a href="#">옷자락 물어뜯기기</a>
        </div>
        <div class="imgText__img img2">
            <a class="blue" href="#">냥냥펀치 후드려 맞기</a>
        </div>
    </div>
</section>
<!-- //imgTextType -->

<section id="cardType" class="card__wrap nexon section">
    <h2>More Cute Animal</h2>
    <p>더 다양한 동물을 원하시나요? 어떤 동물을 좋아하세요?</p>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="assets/img/card_bg01.jpg" alt="돌고래" />
            </figure>
            <div class="card__body">
                <h3 class="tit">Dolphin</h3>
                <p class="desc">돌고래가 그렇게 영악한 동물이라고 하죠. 근데 사실 그 커다란 바닷속에 멍청한 물고기들 사이에서
                저만 똑똑한 돌고래라면 저라도 다른 물고기들을 장난감으로 생각할 것 같습니다. 지가 바다의 왕이야 뭐야...
                좋은 동물인지 나쁜 동물인지 헷갈리네요.</p>
                <a class="brn" href="#"> 더보기 </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="assets/img/card_bg02.jpg" alt="라쿤" />
            </figure>
            <div class="card__body">
                <h3 class="tit">Raccoon</h3>
                <p class="desc">라쿤인지 너구리인지 구별 방법은 있다지만 굳이 따지고 싶지는 않네요. 라쿤의 매력포인트는 역시 발바닥이죠.
                라쿤 카페에서 악수하다가 팔찌를 빼앗겼던 안 좋은 기억이 떠오르네요. 저는 팔찌를 끼면 안 되나 봅니다.</p>
                <a class="brn" href="#"> 더보기 </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="assets/img/card_bg03.jpg" alt="돼지" />
            </figure>
            <div class="card__body">
                <h3 class="tit">Pig</h3>
                <p class="desc">아기 돼지는 참 귀엽네요. 제가 최근에 혐오스러운 돼지 머리 사진을 보고, 환장하던 순댓국을 몇 달째 끊고 있습니다.
                제가 비위가 나쁜 편은 아닌데 진짜... 궁금하시면, 아래 더보기를 클릭하시면 아무것도 안 나옵니다.</p>
                <a class="brn" href="#"> 더보기 </a>
            </div>
        </article>
    </div>
</section>
<!-- //cardType -->

<section id="bannerType" class="banner__wrap nexon">
    <h2 class="blind">배너 영역</h2>
    <div class="banner__inner">
        <h3 class="title">잘 보셨나요?</h3>
        <p class="desc">
            이제 현실을 직시하시고, 아래의 주소를 눌러 깃허브로 이동하세요.
            <a href="#" title="깃허브 페이지로 이동">github.com</a>
        </p>
        <span class="small">Get out and do homework!</span>
    </div>
</section>
<!-- //bannerType -->

<section id="textType" class="text__Wrap nexon section">
    <span>글로는 표현하기 힘든 귀여움</span>
    <h2>네 발 달린 동물들은 다 귀엽다</h2>
    <div class="text__inner container">
        <div class="text t1">
            <h3 class="text__title">Sloth</h3>
            <p class="text__desc">남아메리카, 중앙 아메리카의 열대림에 서식하는 동물입니다. 생애의 대부분을 나무에 매달려 보낸다고 합니다.
            주*피아가 생각납니다. 못생긴 녀석...</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
        <div class="text t2">
            <h3 class="text__title">Chameleon</h3>
            <p class="text__desc">변화하는 몸의 색이 특징인 동물입니다. 세계 개체 수의 절반이 마다가스카르 섬에 산다고 합니다.
            세계 개체 수는 어떻게 측정했을까요? 괜히 이런 게 궁금합니다.</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
        <div class="text t3">
            <h3 class="text__title">Meerkat</h3>
            <p class="text__desc">남아프리카 공화국과 앙골라 사막에 서식합니다. 두 손을 모으고 태양열을 흡수한다고 합니다.
            미어캣 울음소리 들어보셨나요? 약간 충격적입니다.</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
        <div class="text t4">
            <h3 class="text__title">Koala</h3>
            <p class="text__desc">호주에 서식하는 유대류입니다. 무리를 만들지 않고 혼자 생활한다고 합니다. 그냥 친구가 없는 건 아닐까요?
            이건 어쩌면... 제 이야기일지도 모릅니다.</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
        <div class="text t5">
            <h3 class="text__title">Penguin</h3>
            <p class="text__desc">펭귄은 펭귄목 펭귄과에 속하는 날지 못하는 새의 총칭입니다. 무리에서 생활하는 사회성있는 동물로 유명합니다.
            코알라와는 아주 정반대네요. 인싸 동물.</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
        <div class="text t6">
            <h3 class="text__title">Alpaca</h3>
            <p class="text__desc">알파카는 본래 집단 생활을 하는 동물이라 키울 때는 반드시 두마리 짝을 만들어서 키워야 한다고 합니다.
            얘가 그 침 뱉는 애 맞죠? 더럽게 침을...</p>
            <a class="text__btn" href="#">더보기</a>
        </div>
    </div>
</section>
<!-- //textType -->

<!-- footer -->
<section id="footerType" class="footer__wrap nexon section">
    <h2 class="blind">푸터 영역</h2>
    <div class="footer__inner container">
        <div class="footer__menu">
            <div>
                <h3>CUTE</h3>
                <ul>
                    <li><a href="#">MAIN</a></li>
                    <li><a href="#">DOG</a></li>
                    <li><a href="#">CAT</a></li>
                    <li><a href="#">BANNER</a></li>
                    <li><a href="#">ETC</a></li>
                </ul>
            </div>
            <div>
                <h3>DOG</h3>
                <ul>
                    <li><a href="#">Shih Tzu</a></li>
                    <li><a href="#">French Bulldog</a></li>
                </ul>
            </div>
            <div>
                <h3>CAT</h3>
                <ul>
                    <li><a href="#">Bite</a></li>
                    <li><a href="#">Punch</a></li>
                </ul>
            </div>
            <div>
                <h3>MORE</h3>
                <ul>
                    <li><a href="#">Dolphin</a></li>
                    <li><a href="#">Raccoon</a></li>
                    <li><a href="#">Pig</a></li>
                </ul>
            </div>
            <div>
                <h3>ETC</h3>
                <ul>
                    <li><a href="#">Sloth</a></li>
                    <li><a href="#">Chameleon</a></li>
                    <li><a href="#">Meerkat</a></li>
                    <li><a href="#">Koala</a></li>
                    <li><a href="#">Penguin</a></li>
                    <li><a href="#">Alpaca</a></li>
                </ul>
            </div>
        </div>
        <div class="footer__right">
            2022 mo0647. Portfolio is Power<br />
            All rights reserved.
        </div>
    </div>
</section>
<!-- //footer -->

CSS 소스

CSS는 공통적 스타일 시트인 fonts, reset, common을 먼저 작업해 주고, 각각의 섹션별로 스타일 시트를 개별적으로 작업해 주었습니다.

header

.header__inner {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    background: #fff;
}
.header__logo {
    width: 15%;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}
.header__logo em {
    font-size: 18px;
    font-weight: 400;
}
.header__menu {
    width: 70%;
    text-align: center;
}
.header__menu li {
    display: inline;
}
.header__menu li a {
    padding: 13px 30px;
    margin: 0 5px;
    transition: background-color 0.3s;
}
.header__menu li a:hover,
.header__menu li.active a {
    border-bottom: 5px solid black;
}
.header__member {
    width: 15%;
    text-align: right;
}
.header__member a {
    font-size: 16px;
    border: 1px solid #000;
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s;
}
.header__member a:hover {
    background-color: #000;
    color: #fff;
}
.header__ham {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    display: none;
    cursor: pointer;
}
.header__ham span {
    display: block;
    background: #000;
    width: 30px;
    height: 2px;
    border-radius: 3px;
    margin-left: 10px;
    margin-top: 5px;
    transition: 0.25s margin 0.25s, 0.25s transform;
}
.header__ham span:nth-child(1) {
    margin-top: 18px;
}
.header__ham.active span {
    transition: 0.25s margin, 0.25s transform 0.25s;
}
.header__ham.active span:nth-child(1) {
    margin-top: 25px;
    margin-bottom: -7px;
    transform: rotate(45deg);
}
.header__ham.active span:nth-child(2) {
    transform: rotate(45deg);
}
.header__ham.active span:nth-child(3) {
    margin-top: -2px;
    transform: rotate(135deg);
}

/* media */
@media (max-width: 1300px) {
    .header__ham {
        display: block;
    }
    .header__menu {
        position: fixed;
        right: -100%;
        top: 70px;
        width: auto;
        padding: 10px;
        text-align: center;
        background-color: #fff;
        transition: right 0.4s ease-in;
    }
    .header__menu.overlay {
        right: 0;
    }
    .header__menu li {
        display: block;
        padding: 10px;
        margin: 10px;
    }
    .header__menu li a {
        font-size: 22px;
        opacity: 0;
    }
    .header__menu.overlay li a {
        opacity: 1;
    }
    .header__member {
        margin-right: 50px;
        width: 50%;
    }
    .header__logo {
        width: 50%;
    }
    .header__menu li a:hover,
    .header__menu li.active a {
        border-bottom: 2px solid black;
    }
}
@media (max-width: 600px) {
    .header__menu li a {
        font-size: 3vw;
        opacity: 0;
    }
}

Slider

.swiper-slide {
    background: url(../img/slider01_bg01.jpg) no-repeat center / cover;
}
.swiper-slide .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 0px;
}
.swiper-slide .desc span {
    font-size: 16px;
    background-color: #000;
    color: white;
    padding: 1px 14px 0 14px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}
.swiper-slide .desc h3 {
    font-size: 110px;
    font-weight: 500;
    line-height: 1;
    color: white;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-left: -8px;
}
.swiper-slide .desc p {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 130px;
}
.swiper-slide .desc .btn {
}
.swiper-slide .desc .btn a {
    font-size: 16px;
    background-color: #fff;
    padding: 11px 50px;
    display: inline-block;
}
.swiper-slide .desc .btn a.black {
    background: #000;
    color: #fff;
}
.swiper-button-next,
.swiper-button-prev {
    width: 30px !important;
    height: 56px !important;
    background-image: url(../img/slider01_icon.svg);
}
.swiper-button-next {
    background-position: -50px 0px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    opacity: 0;
}
.swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
}
.swiper-pagination-bullet-active {
    background-position: 0px -70px !important;
}

/* media */
@media (max-width: 1280px) {
    .swiper-slide .desc h3 {
        font-size: 70px;
    }
    .swiper-slide .desc {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .swiper-slide .desc h3 {
        font-size: 42px;
    }
    .swiper-slide .desc {
        margin: 0 auto;
        padding: 100px 20px;
        box-sizing: border-box;
    }
    .swiper-slide .desc p {
        font-size: 16px;
    }
}

Image

.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 49%;
    color: white;
    padding: 200px 30px 30px 30px;
    box-sizing: border-box;
}
.image.img1 {
    background: url(../img/img01_bg01.jpg) no-repeat center / cover;
}
.image.img2 {
    background: url(../img/img01_bg02.jpg) no-repeat center / cover;
}
.image__title {
    font-size: 32px;
    margin-bottom: 10px;
}
.image__desc {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.5;
}
.image__btn {
    font-size: 16px;
    color: #fff;
    background: #e86e47;
    padding: 10px 20px;
    display: inline-block;
}
.image__btn.blue {
    background: #00a8e5;
}
@media (max-width: 768px) {
    .image__inner {
        flex-direction: column;
    }
    .image {
        width: 100%;
    }
    .image__title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .image__desc {
        font-size: 16px;
    }
}

Image/Text

.imgText__inner {
    display: flex;
    justify-content: space-between;
}
.imgText__inner > div {
    width: 32%;
    height: 500px;
}
.imgText__txt span {
    font-size: 16px;
    color: #666;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: 20px;
    display: block;
}
.imgText__txt h3 {
    font-size: 50px;
    font-weight: 500;
    word-break: keep-all;
    line-height: 1.4;
    margin-bottom: 20px;
}
.imgText__txt p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: #666;
    margin-bottom: 10px;
    word-break: keep-all;
}
.imgText__txt ul {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
}
.imgText__txt ul li {
    position: relative;
    padding-left: 20px;
}
.imgText__txt ul li a {
    color: #666;
}
.imgText__txt ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 9px;
    background-color: #666;
}
.imgText__img {
    border-radius: 10px;
    position: relative;
}
.imgText__img a {
    background-color: #7c2b39;
    color: #fff;
    font-size: 20px;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    display: inline-block;
}
.imgText__img a.blue {
    background-color: #2b387c;
}
.imgText__img.img1 {
    background: url(../img/imgText01_bg01.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
    background: url(../img/imgText01_bg02.jpg) no-repeat center / cover;
}

@media(max-width:768px) {
    .imgText__txt h3 {
        font-size: 42px;
    }
    .imgText__txt span {
        display: none;
    }
    .imgText__inner {
        display: block;
    }
    .imgText__inner > div:first-child {
        width: 100%;
        height: 400px;
        text-align: center;
    }
    .imgText__inner > div:nth-child(2), 
    .imgText__inner > div:nth-child(3){
        width: 50%;
        height: 500px;
        float: left;
        margin-bottom: 150px;
        
        border-radius: 0px;
    }
    .imgText__txt ul li::before {
        display: none;
    }
    .imgText__img a {
        font-size: 14px;
    }
}

Card

#cardType img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card__inner {
    display: flex;
    justify-content: space-between;
}
.card {
    width: 32%;
    background-color: #f5f5f5;
    border-radius: 10px;
}
.card__body {
    padding: 24px;
}
.card__body .tit {
    color: black;
    font-size: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}
.card__body .desc {
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.card__body a {
    text-decoration: underline;
}

@media (max-width: 784px) {
    .card__inner {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 100%;
        border-radius: 0px;
    }
    #cardType img {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .card__body .desc {
        font-size: 16px;
    }
}

Banner

.banner__inner {
    background-image: url(../img/banner01_bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
    color: black;
}
.banner__inner .title {
    font-size: 50px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 40px;
}
.banner__inner .desc {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 70px;
    word-break: keep-all;
}
.banner__inner .desc a {
    color: black;
    display: block;
}
.banner__inner .desc a:hover {
    text-decoration: underline;
}
.banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
}
@media(max-width: 786px) {
    .banner__inner .title {
        font-size: 42px;
    }
    .banner__inner .desc {
        font-size: 18px;
    }
}

Text

.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text {
    width: 32%;
    margin-bottom: 2%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: background 0.4s;
}
.text:hover {
    background: #f5f5f5;
}
.text:hover .text__title{
    color: #000;
}
.text__title {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    padding-top: 75px;
}
.text__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url(../img/text01_icon01.svg);
}
.text.t1 .text__title::before {
    background-position: 0 0;
}
.text.t2 .text__title::before {
    background-position: -60px 0;
}
.text.t3 .text__title::before {
    background-position: -120px 0;
}
.text.t4 .text__title::before {
    background-position: -180px 0;
}
.text.t5 .text__title::before {
    background-position: -240px 0;
}
.text.t6 .text__title::before {
    background-position: -300px 0;
}
.text__desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    color: #666;
    margin-bottom: 20px;
}
.text__btn {
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    color: #666;
}

@media(max-width: 768px){
    #textType > span {
        display: none;
    }
    .text__desc {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4; 
        -webkit-box-orient: vertical;
    }
    .text {
        width: 50%;
        margin-bottom: 0px;
        padding: 10px;
    }
}

Footer

.footer__wrap {
    background-color: #f5f5f5;
    width: 100%;
    padding: 50px 0;
}
.footer__menu {
    display: flex;
    margin-bottom: 30px;
    justify-content: center;
}
.footer__menu > div {
    width: 185%;
    text-align: center;
}
.footer__menu div h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #000;
}
.footer__menu div li a {
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
    color: #666;
}
.footer__right {
    border-top: 1px solid #d9d9d9;
    text-align: center;
    padding-top: 40px;
    color: #666;
    line-height: 1.5;
}
@media (max-width: 960px) {
    .footer__menu {
        display: none;
    }
    .footer__right {
        padding-top: 0;
        border-top: 0;
    }
    .footer__wrap {
        padding: 40px 0;
    }
}

JAVASCRIPT 소스

자바스크립트 소스는 다음과 같습니다.

//swiper
var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 2000,
        disableOnInteraction: false, /* 슬라이드를 드래그하면 정지되는 버그 제거 */
    },
    pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        clickable: true,
    },
});

// 선택자
const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-play");
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");

// swiper에서 재생 버튼을 누르면 슬라이드 재생, 재생 버튼 숨김, 정지 버튼 나타남
// swiper에서 정지 버튼을 누르면 슬라이드 정지, 정지 버튼 숨김, 재생 버튼 나타남
btnStart.style.display = "none";
btnStop.addEventListener("click", () => {
    swiper.autoplay.stop();
    btnStart.style.display = "block";
    btnStop.style.display = "none";
});
btnStart.addEventListener("click", () => {
    swiper.autoplay.start();
    btnStart.style.display = "none";
    btnStop.style.display = "block";
});

// 햄버거를 클릭하면 메뉴가 나타나도록 설정
btnHam.addEventListener("click", () => {
    btnHam.classList.toggle("active");
    btnMenu.classList.toggle("overlay");
});

// 패럴랙스 효과
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    document.querySelectorAll("section").forEach((el, i) => {
        if (scrollTop > el.offsetTop - 500) {
            document.querySelectorAll(".header__menu ul li").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(".header__menu ul li:nth-child(" + (i + 1) + ")").classList.add("active");
        }
    });
});

// 메뉴 이동 시 부드럽게~
document.querySelectorAll(".header__inner li a").forEach((li) => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
        });
    });
});

---

결과 : Web

결과 : Media

원본 소스 보기 원본 사이트 보기