사이트만들기 - 메인사이트

사이트 메인페이지01

사이트 메인 페이지를 만들어 보았습니다.
반응형 작업까지 같이 해주었습니다. 화면크기를 줄여서 확인도 같이 해보시겠습니다.

CSS

CSS는 링크로 연동해서 headerType, sliderType, imageType, cardType, textType, footerType 으로 각각 나누어서 작업하였습니다.

headerType입니다.
헤더에 메뉴를 추가했습니다. 자바스크립트와 연동해서 만들었습니다.

headerType

/* 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;
    top: 0;
    left: 0;
    background: #fff;
    backdrop-filter: blur(10px);
    z-index: 10000;
}
.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: 85%;
    text-align: center;
    
}
.header__menu li {
    display: inline;
}
.header__menu li.active a{
    background: #A6C4B8;
    border-radius: 5px;
}
.header__menu li a {
    padding: 13px 28px;
    margin: 0 5px;
    font-size: 20px;
    font-family: "NexonLv2Gothic";
    font-weight: 500;
    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: background-color 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;
}
@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__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, transform 0.25s;
    }
    .header__ham span:nth-child(1) {
        margin-top: 17px;
    }
    .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);
    }
    .header__logo {
        width: 50%;
    }
    .header__member {
        width: 50%;
    }
}
@media (max-width: 600px) {
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
}

sliderType 입니다

sliderType

/* sliderType */
.slider {
    position: relative;
}
.slider__img {
    background: url(../img/SLIDER_TYPE01.png) 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;
    margin-bottom: 10px;
    text-transform: uppercase;
    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: 300;
    color: #fff;
    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: 0 -70px;
}
.slider__dot a.play {
    background-position: -40px -70px;
}
.slider__dot a.stop {
    background-position: -60px -70px;
}
/* swiper */
.swiper-slide {
    background: url(../img/SLIDER_TYPE01.png) no-repeat center / cover;
}
.swiper-slide .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 20px;
}
.swiper-slide .desc span {
    font-size: 16px;
    background-color: #fff;
    padding: 1px 14px 0 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 50px;
}
.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: 300;
    color: #fff;
    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: 57px !important;
    background-image: 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);
    background-position: -20px -70px;
    background-color: transparent;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background-position: 0 -70px !important;
} 
.swiper-button {
    position: absolute;
    margin-left: 40px;
    left: 50%;
    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;
    cursor: pointer;
}
.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 {
    text-align: center;
    width: 100%;
    }
    .swiper-slide .desc h3 {
    font-size: 80px;
    }
}
@media (max-width: 600px) {
    .swiper-slide .desc {
    padding: 80px 0;
    }
    .swiper-slide .desc h3 {
    font-size: 30px;
    }
    .swiper-slide .desc p {
    font-size: 16px;
    margin-bottom: 50px;
    }
    .swiper-slide .desc .btn a {
    padding: 10px 25px;
    }
}    

imageType 입니다

imageType

/* imageType */
.image__wrap > h2 {
    color: #fff;
}
.image__wrap > p {
    color: #a6b8c4;
}
.image__inner {
    display: flex;
    justify-content: space-between;
}

.image__inner .image {
    width: 48%;
    background: #ccc;
    color: #fff;
    box-sizing: border-box;
    padding: 180px 30px 30px 30px;
    border-radius: 20px;
}
.image__inner .img1 {
    background: url(../img/imageType01.jpg) no-repeat center / cover;
    margin-right: 20px;
}
.image__inner .img2 {
    background: url(../img/imageType02.jpg) no-repeat center / cover;
}

.image .image__title {
    font-size: 32px;
    line-height: 1.4;
    text-align: left;
}
.image .image__desc {
    font-size: 16px;
    line-height: 1.4;
    margin: 10px 0;
    text-align: left;
}
.image a {
    background-color: #b45a30;
    padding: 10px 20px;
    margin-top: 10px;
    display: inline-block;
    color: #fff;
}
@media (max-width: 960px) {
}
@media (max-width: 600px) {
    .image__inner {
    flex-direction: column;
    }
    .image__inner .image {
    width: 100%;
    padding: 205px 20px 20px 20px;
    }
    .image:first-child {
    margin-bottom: 20px;
    }
    .image__title {
    font-size: 24px;
    }
}    

cardType 입니다

cardType

/* cardType */
#cardType > h2 {
    color: #fff;
}
#cardType > p {
    color: #a4b8c4;
}

.card__inner {
    display: flex;
    justify-content: space-between;
    /* 비율에 알맞게 정렬 시켜주는 코드 */
}
.card {
    width: 32%;
    background: #f5f5f5;
    border-radius: 20px;
}
.card__header img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.card__body {
    padding: 24px;
}
.card__body:hover {
    background: #a4c4b8;
}

.card__body .tit {
    font-size: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.card__body .desc {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #666;
    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;
    }
}

textType 입니다

textType

/*textType*/
#textType > h2 {
    color: #A6B8C4;
}

.text__inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text{
    width: 32%;
    background: #f5f5f5;
    margin-bottom: 2%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: background 0.4s;
}
.text:hover {
    background: #A6C4B8;
}
.text__title{
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    padding-top: 75px;
    margin-bottom: 10px;
}
.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;
    color: #666;
    margin-bottom: 20px;
    /* 세줄효과 추가 */
}
.text_btn{
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    text-underline-position: under;
}
@media (max-width:960px) {
    .text {
        width: 49%;
    }
}
@media (max-width:600px) {   
    .text__title {
        font-size: 20px;
    }
    .text__desc {
        font-size: 16px;
    }
}
@media (max-width:480px) {
    .text {
        width: 100%;
    }
}

footerType 입니다

footerType

/* footerType */
.footer__menu {
    display: flex;
    margin-bottom: 70px;
}
.footer__menu > div {
    width: 16%;
}
.footer__menu > div 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 입니다

스크롤 이동은javascript를 사용하여 스크롤 이동에 따른 위치를 확인하여 메뉴바의 변화를 만들었습니다.
header__menu의 a 태그를 선택하여 forEach문을 사용하여 요소를 가져와 클릭했을 떄
getAttribute 메서드를 사용하여 href의 속성을 가져와서 smooth를 사용해 부드럽게 화면이 전환되도록 하였습니다.
그리고 scrollTop값의 기준을 class: position을 부여하여 기준을 만들어주고 scroll 했을때 생기는 이벤트를 만들어
scrollTop값을 구했습니다. 위에서 선택자 bgColor을 생성하여 요소를 forEach문으로 탐색하여 scrollTop의 값과 el의 offsetTop 값을 비교하였습니다.
offsetTop값에 오차가 생겨서 -1000을 해주었고 scrollTop값이 더 크다면 class 값에 active를 제거해주고 아니라면 active를 추가해 주었습니다.

javascript

const bgColor = document.querySelectorAll(".position");
    window.addEventListener("scroll",() => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    
    bgColor.forEach((el, i) => {
        if(scrollTop >= el.offsetTop-1000) {
            document.querySelectorAll(".header__menu li").forEach((li) => {
                li.classList.remove("active")
            }) 
            document.querySelector(`.header__menu li:nth-child(${i+1})`).classList.add("active");
        }  
    });
});

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

document.querySelector(".swiper-button-stop").addEventListener("click", () => { //슬라이더 스탑버튼 클릭시 재생버튼이 나옴
    swiper.autoplay.stop();
    btnstart.style.display = "block";
    btnstop.style.display = "none";
});
document.querySelector(".swiper-button-play").addEventListener("click", () => { //슬라이더 재생버튼 클릭시 정지버튼이 나타난다
    swiper.autoplay.start();
    btnstart.style.display = "none";
    btnstop.style.display = "block";
});
btnHam.addEventListener("click", () => {  //햄버거 메뉴 클릭시 active 클래스의 유무를 조절  
    btnHam.classList.toggle("active");     //햄버거 메뉴 클릭시 active 클래스를 추가해서 움직이도록 한다.
    btnMenu.classList.toggle("active");    //햄버거 아이콘 클릭시 메뉴바를 조절한다. 
    document.body.classList.toggle("fixed") //화면을 스크롤할때를 조절한다.ㄴ
});

btnMenuList.forEach((list)=>{                  //사이드 메뉴 리스트 클릭시 
    list.addEventListener("click", () => {
        document.body.classList.remove("fixed"); //화면을 스크롤 할 수 있도록 fixed제거 
        btnMenu.classList.remove("active"); // 사이드 메뉴를 집어 넣어준다.
        btnHam.classList.remove("active");  //햄버거 메뉴를 비활성화 시켜준다.
        console.log(btnMenu)
    })
})
window.addEventListener("resize", () => {
    let width = window.innerWidth;
    if(width > 1300) {  //화면의 크기가 1300px 보다 크면 
        document.body.classList.remove("fixed");    //스크롤도 활성화 시켜준다.
        btnMenu.classList.remove("active"); // 튀어나온 메뉴바를 집어 넣어준다,
        btnHam.classList.remove("active"); //active를 제거해 주어서 햄버거 메뉴를 비활성화 시키고
    }
});

---

swiper 입니다

swiper을 사용하여 sliderType을 구현했습니다.
demo를 불러와서 사용하였기 때문에 어렵지 않았습니다.
화살표를 마우스 클릭으로 넘기고 드래그해서 넘길 수 있도록 하였습니다.

swiper

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="desc">
                <span>DEVELOPER</span>
                <h3>space</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>DEVELOPER</span>
                <h3>space</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>DEVELOPER</span>
                <h3>space</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>

결과

깃허브 소스 보기