20.11.12

1. Header HTML

 

<header>
        <div class="container">
            <nav class="nav">
                <div class="menu-toggle">
                    <i class="fas fa-bars"></i>
                    <i class="fas fa-times"></i>
                </div>
                <a href="index.html" class="logo"><img src="img/Logo.png" alt="logo"></a>
                <!-- nav 부분 -->
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Reservations</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">News</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

 

2. Hero HTML

    <section class="hero" id="hero">
        <div class="container">
            <h2 class="sub-headline">
                <span class="first-letter">W</span>elcome
            </h2>
            <h1 class="headline">The Tasty Food</h1>
            <div class="headline-description">
                <div class="speparator">
                    <div class="line line-left"></div>
                    <div class="asterisk"><i class="fas fa-asterisk"></i></div>
                    <div class="line line-right"></div>
                </div>
                <div class="single-animation">
                    <h5>Ready to be opened</h5>
                    <a href="#" class="btn cta-btn"></a>
                </div>
            </div>
        </div>
    </section>

 

 

---

 

1. Global style CSS

/* Global styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-font: "Source Sans Pro", sans-serif;
  --second-font: "Herr Von Muellerhoff", cursive;
  --body-font: "Noto Sans KR", sans-serif;
  --main-font-color: #252525;
  --second-font-color: #c59d5f;
  --body-font-color: #515151;
}

html {
  font-family: var(--body-font);
  font-size: 10px;
  color: var(--body-font-color);
  scroll-behavior: smooth;
}

section {
  padding: 3.9rem 0;
}

img {
  width: 100%;
  max-width: 100%;
}

a {
  text-decoration: none;
}

p {
  font-size: 1.6rem;
}

.container {
  width: 100%;
  max-width: 122.5rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}

알게 된 부분

 

html {
  font-size: 10px; 각각 스타일을 줄 때 rem 으로 적용하기 위함.
  scroll-behavior: smooth; 스크롤에 부드러운 속성을 줌. 
}

 

section {
  padding: 3.9rem 0;
}

img {
  width: 100%;
  max-width: 100%; 요소의 최대 너비를 설정.
}

 

 

 

2. header CSS

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.nav {
  height: 7.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*.nav을 7.2rem 높이를 주고 가운데로 모읍니다.*/

.menu-toggle {
  color: #fff;
  font-size: 2.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.5rem;
  cursor: pointer;
  z-index: 1500;
}

/*햄버거 모양 토글 클래스. position: absolute 을 주고 top: 50%로 위치 선정.
right: 2.5rem; 오른쪽으로 rem을 줌.*/

.fa-times {
  display: none;
}

/*X모양 이미지. 평소엔 보이지 않게 none해둔다.*/

.nav-list {
  list-style: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100vh;
  background-color: var(--body-font-color);
  padding: 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 1250;
  transform: translateX(-100%);
  transition: transform 0.5s;
}

/*flex:세로로 정렬한 뒤, 공간을 일정하게 주어서 간격을 띄워준다. (height 설정 덕분)
transform은 x를 눌렀을 때 사라지게 만드는 효과.*/

.nav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s;
}

.nav-item {
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

/*목록 아랫줄에 밑줄을 2px 줌*/

.nav-link {
  display: block;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 2px;
  margin-right: -2px;
  transition: color 0.5s;
}

/* letter-spacing 자간 설정*/

.nav-link:hover {
  color: var(--second-font-color);
}

/*여기서부터 open js 토글*/
.open .fa-times {
  display: block;
}

.open .fa-bars {
  display: none;
}

/*open이 되면 X가 보이고, 햄버거가 보이지 않게 함.*/

.open .nav-list {
  transform: translateX(0);
}

/*위에 설정해둔 transform: translateX(-100%);을 반대로 적용한 값*/

.open .nav::before {
  opacity: 1;
  transform: scale(1);
}

 

참고 사이트 : okayoon.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EA%B0%9D%EC%B2%B4-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%9C%84%EC%B9%98%ED%95%98%EA%B8%B0

CSS를 이용해 객체 가운데 위치하기!

 

//open on&off 만들기

const selectElement = function (element) {
    return document.querySelector(element);
};

let menuToggler = selectElement('.menu-toggle');
let body = selectElement('body');

menuToggler.addEventListener('click', () => {
    body.classList.toggle('open');
});

참조: developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList

velog.io/@moonsemi1230/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94Review-classList

[자바스크립트 스터디]Review - classList

 

 

3. hero css

.hero {
  width: 100%;
  height: 100vh;
  background: url("img/main_img.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  text-align: center;
}

.sub-headline {
  font-size: 8.5rem;
  font-family: var(--second-font);
  color: var(--second-font-color);
  font-weight: 100;
  line-height: 0.4;
  letter-spacing: 2px;
}

.first-letter {
  text-transform: uppercase;
  font-size: 10.3rem;
}

.headline {
  color: #fff;
  font-size: 3.8rem;
  font-family: var(--main-font);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.2rem;
  margin-top: 0.4rem;
  margin-right: -0.5rem;
}

.speparator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  width: 100%;
  max-width: 16rem;
  height: 0.25rem;
  background-color: #fff;
  position: relative;
}

.line-right::before,
.line-left::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0.6rem solid transparent;
}

.line-right::before {
  border-right-color: white;
  right: 0;
}

.line-left::before {
  border-left-color: white;
  left: 0;
}

.asterisk {
  font-size: 1.2rem;
  color: var(--second-font-color);
  margin: 0 1.6rem;
}

.headline-description h5 {
  color: white;
  font-size: 1.4rem;
  font-weight: 100;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  letter-spacing: 3px;
  margin-right: -3px;
}

.btn {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: -2px;
}

.cta-btn {
  font-size: 1.1rem;
  background-color: white;
  padding: 0.9rem 1.8rem;
  color: var(--body-font-color);
  border-radius: 0.4rem;
  transition: background-color 0.5s;
}

.cta-btn:hover,
.cta-btn:focus {
  color: #fff;
  background-color: var(--second-font-color);
}

이런 느낌임

 

 

가상요소?