[HTML/CSS] 간단한 반응형 웹(헤더) 만들기 + Toggle 이벤트 기능 (JavaScript활용)

[HTML/CSS] 간단한 반응형 웹(헤더) 만들기 + Toggle 이벤트 기능 (JavaScript활용)

2023. 1. 3. 00:35ㆍWeb

일상생활속에서 웹사이트를 사용하다보면

웹사이트의 사이즈에 따라 사이트 구도들의

변화들을 본 적이 있을 것이다.

웹페이지를 어느 정도 제작할 수 있게 되었다면

반응형 웹도 한 번 만들어보자.

아래 동영상은 이번 글의 주제인 반응형 웹의 영상이다.

우선 기본적으로 HTML과 CSS로

웹페이지 구도와 스타일을 만들어 놓았다.

웹페이지는 이전에 완성했거나 연습했던

페이지로 이어서 구현해 내면 된다.

우선 사이트의 전반적인 HTML과 CSS에 대한 코드는

맨 마지막에 첨부해 놓았으니 참고하면 좋을 것 같다.

그럼 반응형 웹을 만들어 보자.

[CSS]

먼저 반응형 웹을 구현하기 위해

CSS에 미디어 쿼리를 사용했다.

if조건문과 유사한 개념이라고 생각하면

이해하기 쉬울 것이다.

@media (조건) { } 이런 구조로 시작을 해서

{ }부분에 조건이 발생했을 때의 변화될

웹페이지의 스타일을 정하면 된다

보는 바와 같이 나는

max-width:1000px이라는 조건을 걸었다.

조건 그대로 width의 최대 폭이

1000px이 되었을 때 발생하게 설정을 해놓은 것이다.

미디어 쿼리안에 코드는 기존에 웹페이지를

CSS로 스타일을 만들어 놓은 것 처럼

조건에 달하였을 때 보여질

객체와 클래스의 스타일을 적용해 놓자.

일반적으로는 width 폭이 좁혀지는 만큼

스마트폰처럼 column 식의 구도가

사용자가 보기에 편리하다.

기존에 적용했던 가상클래스(ex :hover)가 있다면

미디어쿼리 안에서도 자동으로 적용이 되니

따로 또 설정할 필요는 없다.

참고로 나는 토글기능을 구현할 것이기 때문에

토글 기능이 활성화 되었을 때의 스타일도

같이 미디어쿼리에 작성하였다.

여기까지가 정말 간단한 반응형을 웹을 구현하는 것인데

나는 여기서 추가적으로 아래 이미지처럼

메뉴요소를 숨기고 토글을 클릭하면

메뉴가 나타나도록 해보았다.

이 부분도 알면 전혀 어렵지 않으니

한 번 토글 기능도 구현해보자

오른쪽 상단에 토글 아이콘은 반응형에서

갑자기 생긴 것이 아니다.

기존에 HTML로 웹페이지를 제작할 때 <nav>태그에

'SIGN IN' 앵커의 오른쪽에 배치해놓고

반응형웹에서만 사용하기 위해

display를 'none'으로 설정해놓은 것이다.

이제 토글 아이콘을 클릭했을 때

메뉴요소의 활성화를 위해

자바스크립트를 사용해보자

자바스크립트의 역할이 필요하다고 해서

어려운 코드와 이해가 필요한 건 아니다.

우선, 보는 바와 같이 토글키의 이벤트함수를

실행하였을 때 활성화가 될 요소들의

문서객체를 불러오면 된다

필요한 문서객체를 불러오려면

먼저 HTML코드에 자바 스크립트를 연동해주어야한다.

그리고 document.querySelector(' ');로

( )안에 문서객체,클래스,id 등의 요소를 불러와

이벤트기능을 사용하기 위해 각각의 변수에 넣어준다.

그리고 addEventListener를 사용해서

toggle을 클릭하였을 경우, 함수를 호출하여

menu와 sign_in이 'active'가 되도록

코드를 작성한다.

여기까지 자바스크립트의 역할의 전부이다.

그럼 이제 마지막으로 활성화가 되었을 경우,

스타일을 만들기 위해 CSS로 가보자.

[css]

이 코드는 반응형에서 구현할 코드이기 때문에

앞에 작성해놓은 미디어 쿼리 문법안에

토글 스타일에 필요한 코드를 작성하면 된다.

앞서 display:none을 적용해 놓았던

.nav_toggle 클래스를 display해주자.

인라인으로 설정해놓았기 때문에

display는 'block'으로 해놓으면 된다.

그리고 활성화를 시켜줄 나머지

두 요소에 active클래스로 생성해서

display로 나타나게 하면 된다.

이번엔 반응형 웹을 한 번 만들어보았다.

시간이 흐를수록 여러 디바이스가 웹을 지원하면서 뷰포트의 너비에 따라서

유연하게 배치를 하는 기술이 중요해지고 있다고 한다.

중요해지는 만큼 반드시 꼭 짚고 넘어가자

[전체코드-HTML]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://kit.fontawesome.com/4c16673fd2.js" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Crete+Round&family=PT+Serif&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/home.css">
  <script src="./js/page.js" defer></script>
</head>
<body>
  <nav>
    <div class="nav_logo">
      <i class="fa-brands fa-html5"></i>
      <a href="#">HTML5</a>
    </div>
    <div class="nav_menu">
      <ul>
        <a href="#">
          <li>Support</li>
        </a>
        <a href="#">
          <li>Tutorials</li>
        </a>
        <a href="#">
          <li>References</li>
        </a>
        <a href="#">
          <li>Exercises</li>      
        <a href="#">
          <li>Videos</li>    
      </ul>
    </div>
    <a class="sign_in" href="#">SIGN IN</a>
    <a href="#" class="nav_toggle"><i class="fa-solid fa-bars"></i></a>
  </nav>

  <main>
    <div class="main_title">
      <h1>HTML5 is?</h1>
    </div>
    <div class="sub_title">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, accusantium ad quis provident obcaecati ex necessitatibus nobis similique non iure, commodi fugit quae animi odio autem repellendus neque facilis Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque consequuntur eum dolorem, tempora excepturi dolore corporis fugiat. Illum sunt, eum, voluptatum velit asperiores itaque impedit, distinctio deleniti exercitationem ea eaque?
    </div>

    <section>
      <article class="section_item">
        <div class="item_subject">Free</div>
        <div class="item_price">$0<span> / mo</span></div>
        <div class="item_content">
          <ul>
            <p>
              <li>10 users included</li>
            </p>
            <p>
              <li>2 GB of storage</li>
            </p>
            <p>
              <li>Email support</li>
            </p>
            <p>
              <li>Help center access</li>
            </p>
          </ul>
        </div>
        <a href="#" class="item_enter">Sign up for free</a>
      </article>

      <article class="section_item">
        <div class="item_subject">Free</div>
        <div class="item_price">$0<span> / mo</span></div>
        <div class="item_content">
          <ul>
            <p>
              <li>10 users included</li>
            </p>
            <p>
              <li>2 GB of storage</li>
            </p>
            <p>
              <li>Email support</li>
            </p>
            <p>
              <li>Help center access</li>
            </p>
          </ul>
        </div>
        <a href="#" class="item_enter active">Sign up for free</a>
      </article>

      <article class="section_item">
        <div class="item_subject">Free</div>
        <div class="item_price">$0<span> / mo</span></div>
        <div class="item_content">
          <ul>
            <p>
              <li>10 users included</li>
            </p>
            <p>
              <li>2 GB of storage</li>
            </p>
            <p>
              <li>Email support</li>
            </p>
            <p>
              <li>Help center access</li>
            </p>
          </ul>
        </div>
        <a href="#" class="item_enter active">Sign up for free</a>
      </article>
    </section>
  </main>

  <footer>
    <div class="logo">
      <i class="fa-brands fa-html5"></i>
      <a href="">&copy; 2007-2023</a>
    </div>
    <div class="feature">
      <ul>
        <li><p>Top Tutorials</p></li>
        <li><p>HTML Tutorial</p></li>
        <li><p>CSS Tutorial</p></li>
        <li><p>JavaScript Tutorial</p></li>
        <li><p>PHP Tutorial</p></li>
      </ul>
    </div>
    <div class="feature">
      <ul>
        <li><p>HTML Reference</p></li>
        <li><p>CSS Reference</p></li>
        <li><p>JavaScript Reference</p></li>
        <li><p>Java Reference</p></li>
        <li><p>PHP Reference</p></li>
      </ul>
    </div>
    <div class="feature">
      <ul>
        <li><p>HTML Examples</p></li>
        <li><p>CSS Examples</p></li>
        <li><p>JavaScript Examples</p></li>
        <li><p>How To Examples</p></li>
        <li><p>PHP Examples</p></li>
      </ul>
    </div>
  </footer>
</body>
</html>

[전체코드-CSS]

:root{
  --text-color: rgb(238, 107, 107);
}
body{
  margin: 0;
  font-family: 'Abril Fatface', cursive;
  font-family: 'Crete Round', serif;
  font-family: 'PT Serif', serif;
}
a{
  text-decoration-line: none;
  color: var(--text-color);
}
nav{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px;
  border-bottom: 5px solid var(--text-color);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
nav .nav_logo i{
  font-size: 40px;
}
nav .nav_logo a{
  font-family: 'Abril Fatface', cursive;
  margin-left: 10px;
  font-size: 40px;
  color: var(--text-color)
}
nav .nav_logo a:hover{
  color: rgb(201, 25, 69)
}
nav .nav_menu{
  font-size: 20px;
  margin: 0 auto;
  font-weight: 900;
}
nav .nav_menu ul{
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav .nav_menu ul li{
  padding: 8px 20px;
}
nav .nav_menu ul li:hover{
  color: rgb(201, 25, 69);
}
nav .sign_in{
  margin-left: 10px;
  border: 3px solid var(--text-color);
  border-radius: 20px;
  padding: 15px;
  font-size: 20px;
  font-weight: 900;
}
nav .sign_in:hover{
  background-color: var(--text-color);
  color: white;
}
nav .nav_toggle{
  display: none;
}

/* main area */
main .main_title{
  padding: 10px 200px 10px 200px;
  text-align: center;
  font-size: 30px;
}
main .sub_title{
  padding: 20px 200px 10px 200px;
  text-align: center;
}
main section{
  display: flex;
  padding: 20px 200px 10px 200px;
  justify-content: center;
  margin: 20px auto;
}
main section .section_item{
  border: 2px solid black;
  border-radius: 20px;
  height: 350px;
  margin: 20px 40px;
  text-align: center;
}
main section .item_subject{
  width: 200px;
  text-align: center;
  border-bottom: 1px solid gray;
  padding: 10px;;
  font-size: 30px;
}
main section .item_price{
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
main section .item_price span{
  font-size: 20px;
  color: gray;
}
main section .item_content{
  margin-bottom: 30px;
}
main section .item_content ul{
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
main section .item_enter{
  border: 2px solid var(--text-color);
  border-radius: 30px;
  font-size: 20px;
  font-weight: 800;
  margin: 15px;
  padding: 10px;
}
main section .item_enter:hover{
  background-color: var(--text-color);
  color: white;
}
main section .item_enter.active{
  background-color: var(--text-color);
  color: white;
}
main section .item_enter.active:hover{
  background-color: rgb(235, 130, 81);
  border: 2px solid rgb(235, 130, 81);
  color: white;
}

/* footer area */
footer{
  display: flex;
  justify-content: space-around;
  margin: 30px 20px;
  border-top: 4px solid gray;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
footer .logo{
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
footer .feature ul{
  list-style-type: none;
}
footer .feature ul li:first-child{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
footer .feature ul li p{
  margin: 0;
}

@media screen and (max-width:1000px){
  body{
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
  nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
  }
  nav .nav_logo{
    position: absolute;
    left: 10px;
    top: 12px;
  }
  nav .nav_menu{
    display: none;
    text-align: center;
  }
  nav .nav_menu ul{
    flex-direction: column;
    margin-top: 20px;
    padding: 0;
  }
  nav .sign_in{
    display: none;
    margin: 0;
  }
  main .main_title{
    display: flex;
    justify-content: center;
  }
  main section{
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  main section .section_item{
    width: 250px;
  }
  main section .section_item .item_subject{
    width: 230px;
  }
  footer{
    flex-direction: row;
    align-items: center;
  }
  footer .feature ul{
    padding: 0;
  }

  /* 토글키 활성화 기능 */
  nav .nav_toggle{
    display: block;
    font-size: 30px;
    padding: 8px 12px;
    position: absolute;
    right: 10px;
    top: 12px;
  }
  nav .nav_menu.active{
    display: flex;
    margin: 50px 0;
  }
  nav .sign_in.active{
    display: block;
  }
}

[전체코드-JavaScript]

const toggle = document.querySelector('.nav_toggle');
const menu = document.querySelector('.nav_menu');
const sign_in = document.querySelector('.sign_in');

toggle.addEventListener('click', ()=>{
  menu.classList.toggle('active');
  sign_in.classList.toggle('active');
})

'Web' 카테고리의 다른 글

[HTML/CSS/JavaScript] 웹 이미지 슬라이드 효과 (자동&수동) (0)	2023.01.03
[HTML/CSS] 간단한 웹페이지 만들기 - 3 <footer> (0)	2022.12.30
[HTML/CSS] 간단한 웹페이지 만들기 - 2 <main> (0)	2022.12.27
[HTML/CSS] 간단한 웹페이지 만들기 - 1 <nav> (0)	2022.12.26

안되면 될때까지