KDT 5th 웹개발자 입문 수업 19일차 - 2

랜딩 페이지 제작

1. 영상 고르기

https://pixabay.com/videos/

2. 폰트 세팅

구글 폰트의 import 방식으로 scss에 @import 로 넣어주기

3. _reset.scss 구현

margin, padding 0

ul, ol list-style none

a text-decoration none

 

 

4. Header 부분

<header>
    <h1>
      <a href="#">KDT</a>    
    </h1>
    <ul id="gnb">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">HOBBY</a></li>
      <li><a href="#">COMMUNICATION</a></li>
      <li><a href="#">EFFORT</a></li>
    </ul>
    <ul class="sns">
      <li><a href="#"><i class="fa-solid fa-thumbs-up"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-slack"></i></a></li>
    </ul>
    <a href="#" class="btn-menu"><i class="fa-solid fa-bars"></i></a>
  </header>
  
    <figure>
    <video src="./video/dog-77510.mp4" autoplay muted loop></video>
  </figure>

랜딩페이지므로 헤더만 있으면 된다.

 

 

5. SCSS를 사용하여 스타일 시트 작성하기

// Variable
$font-color : white;

// Common
body {
  background-color: black;
  
  a {
    color: $font-color;
  }
}

// Header
header {
  width: 100%;
  border-bottom: 1px solid #999;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 5vw;

  h1 a {
    font : bold 30px/50px 'Permanent Marker', cursive;
    color : $font-color;
  }

  #gnb {
    display: flex;

    li {
      margin: 0 20px;

      a {
        font : 700 16px/1 'Noto Sans KR', sans-serif;
        letter-spacing: 1px;
      }
    }
  }
  
  .sns {
    display: flex;

    li {
      margin: 0 7px;

      a {
        font-size: 20px;
      }
    }
  }

  .btn-menu {
    display: none;
  }
}

Variable

Common

Header 영역으로 나눠서 작성

 

ul의 수평 정렬은 display flex를 사용

 

 

6. 비디오 넣기

멀티미디어 컨텐츠의 경우 <figure> 태그와 <video> 태그의 scr에 영상 삽입

특히 video 태그에서 object-fit은 이미지의 background-size와 동일한 속성이다.

 

 

<반응형>

7. 메뉴가 잘리는 영역 파악 -> 햄버거 메뉴

개발자 도구를 사용하여 메뉴가 잘리기 시작하는 넓이값을 바탕으로 반응형 작업 및 일반적 크기(핸드폰, 태블릿)에 맞춰 작업

미디어쿼리 사용

@media screen and (max-width: 968px) {
  header {
    #gnb {
      display: none;

    }

    .sns {
      display: none;
    }

    .btn-menu {
      display: block;
      
    }
  }

  figure {
    .text {

      p {
        font-size: 10vw;
      }
    }
  }
}

gnb와 sns 부분을 햄버거 메뉴 안으로 넣어줘서 반응형 작업을 한다.

그리고 반응형에서 텍스트의 크기를 키워준다.

 

 

햄버거 메뉴 안에 ul태그를 줘서 메뉴를 그대로 수직정렬로 만들어준다.

 

 

8. 햄버거 버튼에 JS 기능 구현

hide클래스를 classList로 넣어주고 빼주며 조절

const subBtn = document.querySelector("#sub .btn-menu");
const subMenu = document.querySelector("#sub .sub-menu");

subBtn.addEventListener('click', function(){
  if(subMenu.classList.contains('hide') === true) {
    subMenu.classList.remove('hide');
  } else {
    subMenu.classList.add('hide');
  }
});

 

완성

https://fastidious-sunshine-6e5e88.netlify.app/

LandingPage