Menu Slider & Modal (1) - HTML

본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. 

https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 

20 Web Projects With Vanilla JavaScript

 

 

0.

 

페이지 기본 모습

 

 

 

toggle 버튼 눌렸을 때 옆에 나타나는 메뉴 슬라이더 (<nav> 태그)

 

 

 

Sign Up 버튼을 눌렸을 때 나타나는 모달창

 

 

 

 

1. 메뉴 슬라이더 <nav>

<nav>
      <div class="logo">
        <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="user" />
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>

 

 

nav 태그 속

1. 로고가 들어갈 div

- 로고..라고 했지만 사람 이미지이고, randomuser.me/api에서 가져왔다.

2. 메뉴

- 메뉴늘 늘 ul>li

 

 

 

2. header

    <header>
      <button id="toggle" class="toggle">
        <i class="fa fa-bars fa-2x"></i>
      </button>

      <h1>My Landing Page</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, amet!
      </p>

      <button class="cta-btn" id="open">Sign Up</button>
    </header>

우선 메뉴 슬라이더를 위한 toggle Button이 들어갈 <button> 태그.

아이콘은 fontawesome에서 가져왔다.

 

그리고 제목이 들어갈 <h1>

간단한 <p>

Sign up <button>

(sign up 버튼의 class 이름이 "cta-btn"이라고 되어있는데, 여기서 cta는 "call to action"의 약자다. 

말 그대로 사용자의 행동(action)을 부르는(call) 버튼이라는 뜻으로

쇼핑몰에서 자주 보는 "Buy NOW!" 같은 버튼이 CTA의 대표적인 예)

 

 

 

 

3. 본문

 <div class="container">
      <h2>What is this landing page about?</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia iure
        accusamus ab consectetur eos provident ipsa est perferendis architecto.
        Provident, quaerat asperiores. Quo esse minus repellat sapiente, impedit
        obcaecati necessitatibus.
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente optio
        officia ipsa. Cum dignissimos possimus et non provident facilis saepe!
      </p>

      <h2>Tell Me More</h2>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque
        delectus explicabo qui reprehenderit? Aspernatur ad similique minima
        accusamus maiores accusantium libero autem iusto reiciendis ullam
        impedit esse quibusdam, deleniti laudantium rerum beatae, deserunt nemo
        neque, obcaecati exercitationem sit. Earum.
      </p>

      <h2>Benefits</h2>
      <ul>
        <li>Lifetime Access</li>
        <li>30 Day Money Back</li>
        <li>Tailored Customer Support</li>
      </ul>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse quam
        nostrum, fugiat, itaque natus officia laborum dolorum id accusantium
        culpa architecto tenetur fuga? Consequatur provident rerum eius ratione
        dolor officiis doloremque minima optio dignissimos doloribus odio
        debitis vero cumque itaque excepturi a neque, expedita nulla earum
        accusamus repellat adipisci veritatis quam. Ipsum fugiat iusto pariatur
        consectetur quas libero dolor dolores dolorem, nostrum ducimus
        doloremque placeat accusamus iste, culpa quaerat consequatur?
      </p>
    </div>

크게 중요한 내용은 아니고.. 홈페이지 형식을 갖추기 위해.

 

 

 

 

4. Modal

<!-- Modal -->
    <div class="modal-container" id="modal">
      <div class="modal">
      
        <button class="close-btn" id="close">
          <i class="fa fa-times"></i>
        </button>
        
        <div class="modal-header">
          <h3>Sign Up</h3>
        </div>
        
        <div class="modal-content">
          <p>Register with us to get offers, support and more</p>
          <form class="modal-form">
            <div>
              <label for="name">Name</label>
              <input type="text" id="name" placeholder="Enter Name" class="form-input"/>
            </div>
            <div>
              <label for="email">Email</label>
              <input type="email" id="email" placeholder="Enter Email" class="form-input"/>
            </div>
            <div>
              <label for="password">Password</label>
              <input type="password" id="password" placeholder="Enter Password" class="form-input"/>
            </div>
            <div>
              <label for="password2">Confirm Password</label>
              <input type="password" id="password2" placeholder="Confirm Password" class="form-input"/>
            </div>
            <input type="submit" value="Submit" class="submit-btn" />
          </form>
        </div>
      </div>
    </div>

 

가장 중요한 Modal

나중에 display:fixed를 할 것이기 때문에 HTML 어디에 위치하든 큰 상관은 없지만 가장 아래 부분에 넣었다.

 

가장 바깥을 눌러싸고 있는 modal-container <div>

-Modal 창 뒤, 화면 전체를 덮는 흐린 배경을 넣어줄 것

- 가장 위에 들어갈 Sign Up과 close button

- modal-content <div> 안에는 간단한 소개 <p>

- form 태그를 넣고 각 <label> <input>쌍을 하나의 div로 묶었다. (마지막 input button은 혼자)