HTML, CSS 및 JavaScript를 사용하여 아코디언 메뉴를 만드는 방법

19233 단어 webdevcssjavascripttutorial
HTML, CSS 및 JavaScript를 사용하여 세련되고 동적인 웹 요소를 만들 수 있습니다. 그런 종류의 요소 중 하나가 아코디언 메뉴입니다.

이 튜토리얼에서는 간단한 아코디언 메뉴를 만들 것입니다.



아코디언이란 무엇입니까?



UI 디자인에서 아코디언은 세로로 쌓인 정보 목록입니다. 각 목록에는 해당 콘텐츠를 가리키는 레이블이 지정된 헤더가 있습니다. 콘텐츠는 기본적으로 숨겨져 있습니다. 특정 레이블을 클릭하면 해당 내용이 확장됩니다.

자주 묻는 질문 목록을 보관하는 아코디언의 매우 일반적인 사용 사례 중 하나입니다. 질문을 클릭하면 해당 답변이 전환됩니다.

Codepen에서 이 프로젝트의 코드를 얻을 수 있습니다.

HTML, CSS 및 JS를 사용하여 아코디언을 만드는 방법



마크업을 정의하는 것으로 시작합니다. VSCode와 같은 IDE를 사용하고 있고 emmet이 설치되어 있는 경우 새 index.html 파일을 만들고 !를 입력한 다음 Enter를 입력합니다. 이것은 프로젝트에 대한 HTML 상용구 코드를 생성해야 합니다.

또는 다음 코드를 index.html에 복사할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="app.js" type="text/javascript"></script>
</body>
</html>


폴더 구조는 간단합니다. 아코디언이라는 폴더를 생성하겠습니다. 폴더 안에 index.html, styles.css 및 app.js의 세 가지 파일을 만듭니다. 또한 위에서 관찰한 대로 모든 파일을 HTML marjup에 연결합니다.

아코디언용 HTML 마크업



아코디언용 HTML도 매우 간단할 것입니다.

<body>


  <div class="accordion-body">
  <div class="accordion">
    <h1>Frequently Asked Questions</h1>
    <hr>
    <div class="container">
      <div class="label">What is HTML</div>
      <div class="content">Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document. HTML is very simple to learn and use.</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">What is CSS?</div>
      <div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. CSS is popularly called the design language of the web.
</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">What is JavaScript?</div>
      <div class="content">JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third of the web trio.</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">What is React?</div>
      <div class="content">React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. </div>
    </div>
    <hr>
    <div class="container">
      <div class="label">What is PHP?</div>
      <div class="content">PHP is a server-side and general-purpose scripting language that is especially suited for web development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an acronym.</div>
    </div>
    <hr>
    <div class="container">
      <div class="label">What is Node JS?</div>
      <div class="content">Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm</div>
    </div>
    <hr>
  </div>
  </div>

  <script src="index.js" type="text/javascript"></script>
</body>


이 시점에서 우리 페이지는 맨손으로 보일 것입니다.



CSS를 사용하여 아코디언 스타일링



아코디언은 당연히 좋아야 합니다. CSS를 사용할 시간입니다.

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

/* Sets the background color of the body to blue. Sets font to Rubik */

body {
  background-color: #0A2344;
  font-family: 'rubik', sans-serif;
}

/* Aligns the heading text to the center. */

h1 {
  text-align: center;
}

/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */

.accordion {
  width: 800px;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
}


이러한 스타일을 모두 적용하면 아코디언이 다음과 같이 보일 것입니다.



이제 내부 작업을 시작해야 합니다. 먼저 각 컨테이너(레이블과 콘텐츠를 모두 포함)를 상대 위치에 배치합니다. 즉, 이제 부모를 기준으로 자식의 위치를 ​​지정할 수 있습니다.

.accordion .container {
  position: relative;
  margin: 10px 10px;
}

/* Position the labels relative to the .container. Add padding to the top and bottom and increase font size. Also make it's cursor a pointer */

.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}


지금 차이점을 확인하세요



다음 작업은 각 목록 끝에 작은 '+' 기호를 추가하는 것입니다.::before 선택자를 사용하여 이를 달성할 것입니다.::before 및::after 선택자는 지정된 요소의 앞뒤에 내용을 배치하는 데 사용됩니다.

여기서는 레이블 앞에 '+'를 삽입합니다. 그러나 오프셋 속성 'top'과 right를 사용하여 맨 오른쪽 모서리에 배치합니다.


/* Position the plus sign 5px from the right. Center it using the transform property. */\

.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}

/* Hide the content (height: 0), decrease font size, justify text and add transition */

.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 780px;
  overflow: hidden;
  transition: 0.5s;
}

/* Add a horizontal line between the contents */

.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}


이제 우리 앱은 이전보다 훨씬 좋아 보일 것입니다.



자바스크립트 가져오기



이 시점에서 우리의 아코디언은 거의 정적입니다. 클릭할 때 콘텐츠를 표시하도록 하려면 일부 JavaScript를 가져와야 합니다.

app.js 파일로 이동하여 다음을 입력합니다.

const accordion = document.getElementsByClassName('container');

for (i=0; i<accordion.length; i++) {
  accordion[i].addEventListener('click', function () {
    this.classList.toggle('active')
  })
}


이 스크립트는 'container'라는 클래스 이름으로 모든 목록에 액세스합니다.

그런 다음 목록을 반복합니다. 각 컨테이너에 대해 이벤트 리스너를 추가하기만 하면 됩니다. 클릭되면 해당 요소에서 "활성"클래스를 토글하려고 합니다.

이제 우리는 이 효과를 테스트할 것입니다. 레이블이 있는 첫 번째 컨테이너What is HTML를 클릭하고 DevTool(Windows의 Chrome용 F12)을 열고 요소 탭 내부에서 검사합니다.

등록된 활성 클래스를 찾아야 합니다.



요소를 다시 클릭하면 요소에서 active 클래스가 제거됩니다.

앱 완성



마지막으로 해야 할 일이 있습니다. 스타일시트 내에서 활성 클래스를 생성해야 합니다. JavaScript가 컨테이너의 클래스를 토글하면 아코디언이 어떻게 보일지 정의합니다.


/* Unhides the content part when active. Sets the height */

.accordion .container.active .content {
  height: 150px;
}

/* Changes from plus sign to negative sign once active */

.accordion .container.active .label::before {
  content: '-';
  font-size: 30px;
}


이것은 결국 우리의 앱입니다.



마무리



팔로우해주셔서 감사합니다. 이 튜토리얼에서 유용한 정보를 얻으셨기를 바랍니다.

이런 콘텐츠에 관심이 있다면 제 블로그에 매일 만들어 둡니다.

좋은 한 주 되세요.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

코드 쓰기 원격 실행
SD 카드 전압 스위칭 부분 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage