사이트 반응형

사이트 - 반응형

지금까지 다양한 유형의 사이트를 만들었습니다. 여러 유형을 합친 사이트를 만들고, 반응형으로 만드는 작업을 해보았습니다.

스와이퍼 프리코드를 이용해서 슬라이더를 작업했습니다.
Swiper는 다양한 방식의 슬라이더 코드가 공개되어있습니다.

---

Figma

코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다.

---

HTML 소스

header, footer 외의 유형들은 메인으로 묶어서 진행하였으며, 지금까지 진행한 유형들은 모은 코드입니다. 슬라이드 유형의 경우 swiper를 사용함에 따라 코드를 수정하였습니다.

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

<header id="headerType" class="header__wrap nexon">
    <div class="header__inner">
        <div class="header__logo">
            <a href="#">WEATHER <em></em></a>
        </div>
        <div class="header__menu">
            <ul>
                <li class="active"><a href="#imageType">PRECIP</a></li>
                <li><a href="#imgTextType">SITE</a></li>
                <li><a href="#cardType">SEASON</a></li>
                <li><a href="#bannerType">INFO</a></li>
                <li><a href="#textType">N.D</a></li>
            </ul>
        </div>
        <div class="header__member">
            <a href="#">로그인</a>
        </div>
        <div class="header__ham">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</header>
<!-- //headerType -->

<main id="mainType">
    <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>WEATHER</span>
                        <h3>Weather</h3>
                        <p>기상 정보를 알고있는 것은 중요합니다.<br>
                            날씨에 대한 정보를 알아봅시다.
                        </p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#" class="black">사이트 보기</a>
                        </div>
                    </div>
                </div>
                <div class="slider__arrow">
                    <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>WEATHER</span>
                            <h3>Weather</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>WEATHER</span>
                            <h3>Weather</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>WEATHER</span>
                            <h3>Weather</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">
                    <div class="swiper-button-play"><span class="ir">play</span></div>
                    <div class="swiper-button-stop"><span class="ir">stop</span></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>
    <!-- //sliderType -->

    <section id="imageType" class="type image__wrap nexon section">
        <h2>PRECIPITATION</h2>
        <p>지구의 물 순환으로 수증기가 응축하여 땅에 내리는 강수현상</p>
        <div class="image__inner container">
            <article class="image img1">
                <h3 class="image__title">비</h3>
                <p class="image__desc">대기 중의 수증기가 물방울이 되어 지상으로 떨어지는 기상현상.
                    비가 내리는 대표적인 계절로는 여름이 있습니다.
                </p>
                <a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
            </article>
            <article class="image img2">
                <h3 class="image__title">눈</h3>
                <p class="image__desc">대기 중의 수증기가 얼어붙은 상태가 되어 지상으로 떨어지는 기상현상.
                    눈이 내리는 대표적인 계절로는 겨울이 있습니다.
                </p>
                <a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
            </article>
        </div>
    </section>
    <!-- //imageType -->

    <section id="imgTextType" class="type imgText__wrap nexon section">
        <h2 class="blind">유용한 사이트 살펴보기</h2>
        <div class="imgText__inner container">
            <div class="imgText__txt">
                <span>weather forecast</span>
                <h3>일기 예보 정보
                    사이트 알아보기</h3>
                <p>날씨 정보 확인을 위한 유용한 사이트<br>
                    다양한 사이트로 정보를 확인합시다.</p>
                <ul>
                    <li><a href="/">네이버 날씨</a></li>
                    <li><a href="/">아큐웨더</a></li>
                    <li><a href="/">웨더채널</a></li>
                    <li><a href="/">웨더 뉴스</a></li>
                    <li><a href="/">에어코리아</a></li>
                    <li><a href="/">벤투스카이</a></li>
                </ul>
            </div>
            <div class="imgText__img img1">
                <a href="/">cold</a>
            </div>
            <div class="imgText__img img2">
                <a href="/" class="red">warm</a>
            </div>
        </div>
    </section>
    <!-- //imgTextType -->

    <section id="cardType" class="type card__wrap nexon section">
        <h2>SEASON</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">여름</h3>
                    <p class="desc">여름은 덥고, 습하며 두드러지는 계절 중에
                        하나입니다. 6월에서 8월까지를 여름으로
                        분류하며, 장마가 내리는 계절입니다.<br>
                        날씨가 덥고 녹음이 우거지는 계절입니다.
                    </p>
                    <a class="btn" href="/">
                        더 자세히 보기
                        <span aria-hidden="true">
                            <svg width="65" height="8" viewBox="0 0 65 8" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                                    fill="black" />
                            </svg>
                        </span>
                    </a>
                </div>
            </article>
            <article class="card">
                <figure>
                    <img src="assets/img/card_bg03.jpg" alt="겨울">
                </figure>
                <div class="card__body">
                    <h3 class="tit">겨울</h3>
                    <p class="desc">겨울은 춥고, 건조하며 두드러지는 계절 중
                        하나입니다. 12월에서 2월까지를 겨울로
                        분류하며, 눈이 내리는 계절입니다.
                        날씨가 춥고, 나무는 잎이 지는 계절입니다.
                    </p>
                    <a class="btn" href="/">
                        더 자세히 보기
                        <span aria-hidden="true">
                            <svg width="65" height="8" viewBox="0 0 65 8" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                                    fill="black" />
                            </svg>
                        </span>
                    </a>
                </div>
            </article>
            <article class="card">
                <figure>
                    <img src="assets/img/card_bg02.jpg" alt="봄/가을">
                </figure>
                <div class="card__body">
                    <h3 class="tit">봄/가을</h3>
                    <p class="desc">봄은 겨울에서 여름으로 가는 중간의 계절.
                        가을은 여름과 겨울의 중간에 있는 계절.
                        봄과 가을은 온도가 덥거나 춥지 않은 중간
                        온도로 사람들이 좋아하는 계절입니다.
                    </p>
                    <a class="btn" href="/">
                        더 자세히 보기
                        <span aria-hidden="true">
                            <svg width="65" height="8" viewBox="0 0 65 8" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
                                    fill="black" />
                            </svg>
                        </span>
                    </a>
                </div>
            </article>
        </div>
    </section>
    <!-- //cardType -->

    <section id="bannerType" class="type banner__wrap nexon section">
        <h2 class="blind">배너 영역</h2>
        <div class="banner__inner">
            <h3 class="title">기상 정보</h3>
            <p class="desc">
                자세한 기상 정보는 기상청을 통해서 확인해 주세요
                <a href="https://www.weather.go.kr" title="블로그 이동">https://www.weather.go.kr</a>
            </p>
            <span class="small">기상청</span>
        </div>
    </section>
    <!-- //bannerType -->

    <section id="textType" class="type text__wrap nexon section">
        <span>Natural Disasters</span>
        <h2 class="mb70">자연재해 종류 </h2>
        <div class="text__inner container">
            <div class="text t1">
                <h3 class="text__title">해일</h3>
                <p class="text__desc">
                    해안에 가까울수록 위험하므로 해일이 발생
                    하면 해안에서 멀리 떨어진 급경사가 없고
                    지형이 높은 안전한 곳으로 이동하여야 합니다.
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
            <div class="text t2">
                <h3 class="text__title">호우</h3>
                <p class="text__desc">
                    자주 물에 잠기는 지역, 산사태 위험지역 등
                    위험한 곳 피하고 안전한 곳으로 대피하며,
                    실내에서 문과 창문을 닫고, 외출 삼가합니다.
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
            <div class="text t3">
                <h3 class="text__title">폭설</h3>
                <p class="text__desc">
                    외출을 자제하고, 외출을 할 경우에는 대중
                    교통을 이용합니다. 보온 유지를 위해 외투,
                    장갑, 모자 등을 착용하여야 합니다. 폭설에는
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
            <div class="text t4">
                <h3 class="text__title">태풍</h3>
                <p class="text__desc">
                    태풍이 시작된 때는 신속히 안전한 곳으로 <br>
                    대피하고, 외출을 삼가합니다. 실내에서는 <br>
                    문과 창문을 닫고 기상상황을 확인하여야 합니다.
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
            <div class="text t5">
                <h3 class="text__title">가뭄</h3>
                <p class="text__desc">
                    가뭄은 비가 안오는 경우에 직면합니다.<br>
                    농촌에서 피해를 극명히 느끼게 됩니다. <br>
                    물 손실 방지에 노력해야 합니다.
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
            <div class="text t6">
                <h3 class="text__title">지진</h3>
                <p class="text__desc">
                    낙하물에서 머리와 몸을 보호하는 것이 중요
                    합니다. 흔들림이 높은 상황에서는 움직이지
                    말고 잦아 들었을 때 대피를 해야합니다.
                </p>
                <a class="text_btn" href="/">더보기</a>
            </div>
        </div>
    </section>
    <!-- //textType -->
</main>
<!-- //mainType -->

<footer id="footerType" class="footer__wrap cexon section gray">
    <h2 class="blind">푸터 영역</h2>
    <div class="footer__inner container">
        <div class="footer__menu">
            <div>
                <h3>사이트</h3>
                <ul>
                    <li><a href="/">웹표준 사이트</a></li>
                    <li><a href="/">반응형 사이트</a></li>
                    <li><a href="/">패럴랙스 사이트</a></li>
                    <li><a href="/">포트폴리오 사이트</a></li>
                </ul>
            </div>
            <div>
                <h3>헤더 영역</h3>
                <ul>
                    <li><a href="/">메뉴 유형01</a></li>
                    <li><a href="/">메뉴 유형02</a></li>
                </ul>
            </div>
            <div>
                <h3>슬라이드 영역</h3>
                <ul>
                    <li><a href="/">슬라이드 유형01</a></li>
                    <li><a href="/">슬라이드 유형02</a></li>
                </ul>
            </div>
            <div>
                <h3>이미지 영역</h3>
                <ul>
                    <li><a href="/">이미지 유형01</a></li>
                    <li><a href="/">이미지 유형02</a></li>
                    <li><a href="/">이미지/텍스트 유형01</a></li>
                    <li><a href="/">이미지/텍스트 유형02</a></li>
                    <li><a href="/">텍스트 유형01</a></li>
                </ul>
            </div>
            <div>
                <h3>컨텐츠 영역</h3>
                <ul>
                    <li><a href="/">카드 유형01</a></li>
                    <li><a href="/">카드 유형02</a></li>
                    <li><a href="/">카드 유형03</a></li>
                </ul>
            </div>
            <div>
                <h3>푸터 영역</h3>
                <ul>
                    <li><a href="/">푸터 메뉴 유형01</a></li>
                    <li><a href="/">푸터 컨택트 유형02</a></li>
                    <li><a href="/">푸터 이메일 유형03</a></li>
                </ul>
            </div>
        </div>
        <div class="footer__right">
            2022 YH. Portfolio is Power<br>
            All rights reserved.
        </div>
    </div>
</footer>
<!-- //footerType -->
        

CSS 소스

공통적으로 들어가는 스타일 CSS인 fonts, reset, common을 작업하고. 각 섹션의 CSS를 작업합니다.
오류 방지를 위해 각각 작성 후 링크를 통해 스타일을 적용합니다. display: none;를 섹션 별로 적용한 뒤에 작업하는 섹션마다 지워가면서 작업하는 것이 좋습니다. 한번에 모든 영역이 있는 채로 작업하면 어렵습니다.

#headerType {display: none;}
#sliderType {display: none;}
#imageType {display: none;}
#imgTextType {display: none;}
#cardType {display: none;}
#bannerType {display: none;}
#textType {display: none;}
#footerType {display: none;}

header

/* headerType */
.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;
    backdrop-filter: blur(10px);
}

.header__logo {
    width: 20%;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.header__logo em {
    font-size: 18px;
    font-weight: 400;
}

.header__menu {
    width: 60%;
    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 {
    background-color: #f1f1f1;
    border-radius: 5px;
}

.header__member {
    width: 20%;
    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__menu {
    position: fixed;
    right: -100%;
    top: 69px;
    background: #fff;
    width: 60%;
    height: 100vh;
    padding: 20px;
    text-align: right;
    transition: right 0.4s ease-in;
    }
    .header__menu ul li {
    display: block;
    margin: 20px;
    }
    .header__menu ul li a {
    padding: 10px;
    white-space: nowrap;
    }
    .header__menu.active {
    right: 0;
    }
    .header__member {
    margin-right: 50px;
    }
    .header__ham {
    display: block;
    }
    .header__logo {
    width: 50%;
    }
    .header__member {
    width: 50%;
    }
}                        
        

Slider

.slider__inner {
    margin-top: 70px;
}
.slider {
    position: relative;
}
.slider__img {
    background: url(../img/slider_bg01.jpg) no-repeat center / cover;
}
.slider__img .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 20px;
}
.slider__img .desc span {
    font-size: 16px;
    background-color: #fff;
    padding: 1px 14px 0 14px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}
.slider__img .desc h3 {
    font-size: 110px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-left: -8px;
}
.slider__img .desc p {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 130px;
}
.slider__img .desc .btn a {
    font-size: 16px;
    background-color: #fff;
    padding: 11px 50px;
    display: inline-block;
}
.slider__img .desc .btn a.black {
    background: #000;
    color: #fff;
}
.slider__arrow a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 56px;
    background-image: url(../img/slider_icon.svg);
}
.slider__arrow a.left {
    left: 20px;
}
.slider__arrow a.right {
    right: 20px;
    background-position: -50px 0;
}
.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
}
.slider__dot a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../img/slider_icon.svg);
    background-position: -20px -70px;
}
.slider__dot a.active {
    background-position: 0px -70px;
}
.slider__dot a.play {
    background-position: -40px -70px;
}
.slider__dot a.stop {
    background-position: -60px -70px;
}

/* swiper */
.swiper-slide:first-child {
    background: url(../img/slider_bg01.jpg) no-repeat center / cover;
}
.swiper-slide:nth-child(2) {
    background: url(../img/slider_bg01_02.jpg) no-repeat center / cover;
}
.swiper-slide:last-child {
    background: url(../img/slider_bg01_03.jpg) no-repeat center / cover;
}
.swiper-slide .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 20px;
    box-sizing: border-box;
}
.swiper-slide .desc span {
    font-size: 16px;
    background-color: #fff;
    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: 300;
    line-height: 1;
    color: #fff;
    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 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: url(../img/slider_icon.svg);
}
.swiper-button-next {
    background-position: -50px 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    opacity: 0;
}
.swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    background-image: url(../img/slider_icon.svg) !important;
    background-position: -20px -70px !important;
    background-color: transparent !important;
    opacity: 1 !important;
}
.swiper-pagination-bullet-active {
    background-position: 0px -70px !important;
}
.swiper-button {
    position: absolute;
    left: 50%;
    margin-left: 40px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
}
.swiper-button-stop {
    background-image: url(../img/slider_icon.svg);
    background-position: -60px -70px;
    width: 16px;
    height: 16px;
}
.swiper-button-play {
    background-image: url(../img/slider_icon.svg);
    background-position: -40px -70px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* media */
@media (max-width: 960px) {
    .swiper-slide .desc {
    width: 100%;
    text-align: center;
    }
    .swiper-slide .desc h3 {
    font-size: 70px;
    }
}
@media (max-width: 600px) {
    .swiper-slide .desc {
    padding: 80px 0;
    }
    .swiper-slide .desc h3 {
    font-size: 40px;
    }
    .swiper-slide .desc p {
    font-size: 16px;
    margin-bottom: 50px;
    }
    .swiper-slide .desc .btn a {
    padding: 10px 25px;
    }
}                      
        

Image

/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 49%;
    height: 370px;
    color: #fff;
    padding: 200px 30px 30px 30px;
    box-sizing: border-box;
}
.image.img1 {
    background: url(../img/img_bg01_01.jpg) no-repeat center;
}
.image.img2 {
    background: url(../img/img_bg01_02.jpg) no-repeat center;
}
.image__title {
    font-size: 32px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image__desc {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.image__btn {
    font-size: 16px;
    color: #fff;
    background-color: #015537;
    padding: 10px 20px;
    display: inline-block;
}
.image__btn.yellow {
    background-color: #585656;
}

@media (max-width: 600px) {
    .image__inner {
    flex-direction: column;
    }
    .image {
    width: 100%;
    padding: 210px 20px 20px 20px;
    }
    .image:first-child {
    margin-bottom: 20px;
    }
    .image__title {
    font-size: 24px;
    }
}                                          
        

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: 300;
    margin-bottom: 20px;
}

.imgText__txt p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: #666;
    margin-bottom: 10px;
}

.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: #666;
}

.imgText__img {
    position: relative;
    border-radius: 10px;
}

.imgText__img a {
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: #4285f4;
    color: #fff;
    font-size: 18px;
    padding: 10px 50px;
    border-radius: 30px;
    display: inline-block;
}
.imgText__img a.red {
    background-color: #c9395f;
}

.imgText__img.img1 {
    background: url(../img/imgText_bg01.jpg) no-repeat center / cover;
}

.imgText__img.img2 {
    background: url(../img/imgText_bg02.jpg) no-repeat center / cover;
}

@media (max-width: 960px) {
    .imgText__inner {
    flex-wrap: wrap;
    }
    .imgText__txt h3 {
    font-size: 40px;
    }
    .imgText__txt p {
    margin-bottom: 60px;
    }
    .imgText__inner > div.imgText__txt {
    width: 100%;
    height: auto;
    text-align: center;
    }
    .imgText__inner > div.imgText__txt ul {
    display: none;
    }
    .imgText__inner > div.imgText__img {
    width: 49%;
    }
}
@media (max-width: 600px) {
    .imgText__txt span {
    font-size: 14px;
    margin-bottom: 10px;
    }
    .imgText__txt h3 {
    font-size: 30px;
    }
    .imgText__txt p {
    margin-bottom: 50px;
    font-size: 16px;
    }
    .imgText__inner > div.imgText__img {
    width: 100%;
    height: 200px;
    }
    .imgText__inner > div.imgText__img.img1 {
    margin-bottom: 20px;
    }
    .imgText__img a {
    left: 20px;
    bottom: 20px;
    }
}                      
        

Card

/* cartType */
.card__inner {
    display: flex;
    justify-content: space-between;
}
.card {
    width: 32%;
    background: #f5f5f5;
}
.card__body {
    padding: 24px;
}
.card__body .tit {
    font-size: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.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;
}

@media (max-width: 960px) {
    .card__inner {
    flex-wrap: wrap;
    }
    .card {
    width: 49%;
    }
    .card:last-child {
    display: none;
    }
}
@media (max-width: 600px) {
    .card {
    width: 100%;
    }
    .card:first-child {
    margin-bottom: 20px;
    }
    .card__body {
    padding: 20px;
    }
    .card__body .desc {
    font-size: 16px;
    }
}                        
        

Banner

.banner__inner {
    background-image: url(../img/banner_bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
    color: #fff;
}
.banner__inner .title {
    font-size: 50px;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 40px;
}
.banner__inner .desc {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 70px;
}
.banner__inner .desc a {
    color: #fff;
    display: block;
}
.banner__inner .desc a:hover {
    text-decoration: underline;
}
.banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
}

@media (max-width: 960px) {
    .banner__inner {
    padding: 100px 0;
    }
}
@media (max-width: 600px) {
    .banner__inner {
    padding: 80px 0;
    }
    .banner__inner .title {
    font-size: 30px;
    margin-bottom: 20px;
    }

    .banner__inner .desc {
    font-size: 16px;
    margin-bottom: 40px;
    }
}                      
        

Text

/* textType */
.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__title {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    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/text_icon.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;
    text-underline-position: under;
    color: #666;
}

/* media */
@media (max-width: 960px) {
    .text {
    width: 49%;
    background: #f5f5f5;
    }
}

@media (max-width: 600px) {
    .text__title {
    font-size: 20px;
    }

    .text__desc {
    font-size: 16px;
    }
}

@media (max-width: 480px) {
    .text {
    width: 100%;
    }
}                        
        

Footer

.footer__menu {
    display: flex;
    margin-bottom: 70px;
}
.footer__menu > div {
    width: 16%;
}
.footer__menu h3 {
    font-size: 18px;
    margin-bottom: 20px;
}
.footer__menu li a {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    display: block;
}
.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에 대한 js 소스를 넣어줍니다. 슬라이더와 메뉴의 동작에 대한 코드 작성입니다.

<script src="assets/js/swiper-bundle.min.js"></script>

var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 5000,
        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");
const btnMenuList = btnMenu.querySelectorAll("ul li a");

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("active");
    document.body.classList.toggle("fixed");
});

btnMenuList.forEach((list) => {
    list.addEventListener("click", () => {
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
    });
})

window.addEventListener("resize", () => {
    let width = window.innerWidth;
    if (width > 1300) {
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
    }
});

document.querySelectorAll("a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

---

Web

mobile

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