HTML을 사용하여 아코디언과 같은 Bootstrap을 만드는 방법 | CSS | 자바스크립트

10730 단어 miniprojectaccordionjavascriptwebdev
무슨 일이야!
모두 잘 지내고 계시길 바랍니다.
내 작은 프로젝트의 대부분에서 가능한 한 CSS/JavaScript용 라이브러리를 사용하지 않으려고 노력합니다. 그 이유는 내 코드를 더 잘 제어할 수 있기 때문입니다. 저는 많은 개발자들이 작은 것에도 도구/라이브러리를 사용하는 것을 보았습니다. 사용에 반대하는 것이 아니라 개인적인 선택에 달려 있습니다.
오늘 저는 일반 JavaScript를 사용하여 아코디언을 만드는 방법에 대해 이야기하고 싶습니다. 생각보다 간단합니다. 그래서 다이빙을 할 수 있습니다.
  • 먼저 아코디언이라는 이름의 폴더를 만듭니다. 원하는 대로 이름을 지정할 수 있지만 저는 간단하게 유지하고 싶습니다.
  • 이 아코디언 폴더 안에 css 및 js 폴더와 index.html 파일을 두 개 더 만듭니다.
  • 이제 css 폴더 안에 style.css 파일과 js 폴더 안에 script.js 파일을 두 개 더 만들어 보겠습니다.
    파일 및 폴더 구조가 모두 설정되었습니다.

    • index.html로 시작하자

    <!DOCTYPE html>
 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css" />

  <title>Accordions</title>
</head>
<body>
  <header>
    <h1>Accordions using HTML CSS and JavaScript.
  </header>
    <main>      
    <section class="container">

    </section>
    </main>
</body>
<script src="js/script.js"></script>
</html>


    위는 스타일 시트와 자바 스크립트 파일을 연결하고 html의 아이콘에 대한 fontawesome cdn 링크를 추가하고 제목을 추가한 프로젝트의 기본 상용구입니다.
  • 이제 클래스 컨테이너가 있는 섹션 내부에 3개의 섹션을 생성하고 클래스 아코디언을 지정하려고 합니다.
  • 그리고 이 각 섹션 내부에 클래스 텍스트가 있는 div 요소와 아코디언의 제목이 될 클래스 아이콘이 있는 또 다른 div를 포함할 클래스 제목이 있는 또 다른 섹션을 만들고 싶습니다.
  • 마지막으로 클래스 아코디언을 사용하여 섹션 내부에 섹션을 하나 더 만들고 정의 클래스를 지정합니다.

    • 우리의 코드는 다음과 같을 것입니다.

    <section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>    

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>


    이제 명확해지길 바랍니다. 스타일링 부분으로 가보겠습니다.

    style.css에 다음 코드를 붙여넣습니다.

    @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
header h1 {
  background: coral;
  color: #fff;
  text-align: center;
  padding: 10px;
}
body {
  background: #f6f6f6;
}
main {
  width: 90%;
  min-height: calc(100vh - 90px);
  margin: 10px auto;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
main section.container {
  padding: 15px 25px;
}
h3 {
  margin-top: 10px;
}
section.accordion {
  margin-top: 10px;
}
section.accordion .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: coral;
  padding: 10px;
  cursor: pointer;
}
section.accordion .heading div.text {
  flex: 10;
  font-weight: 600;
}
section.accordion .heading div.icon {
  flex: 1;
  text-align: center;
}
section.accordion.active .heading,
section.acordion.active .icon {
  color: #fff;
}
section.accordion .heading div.icon i {
  font-size: 1.5em;
  cursor: pointer;
}
section.accordion.active .definition {
  display: block;
  transition: display 0.3s ease-in;
}
section.accordion .definition {
  display: none;
  padding: 10px;
  transition: display 1s ease-in-out;
}


    이제 브라우저에서 index.html을 열면 아래와 같이 보일 것입니다.



    script.js를 열고 JavaScript 코드 작성을 시작하겠습니다.

    
let accIcons = document.querySelectorAll(".accordion .icon i")

accIcons.forEach((accIcon) => {
  addEventListener("click", expand)
})

function expand(e) {  e.target.parentNode.parentNode.parentNode.classList.toggle("active");
}


    코드를 이해하려고 노력합시다.
  • 첫 번째 줄에서 모든 아이콘을 가져와 가변 accIcons 에 배치합니다.
  • 두 번째 줄에서 모든 아이콘에 클릭 이벤트를 추가하고 있습니다. 이 이벤트는 클릭 시 확장
    • 이라는 기능을 실행합니다.
  • 이 함수는 대상 아코디언에서 활성 클래스를 토글합니다. 그리고 이 이벤트는 캐럿 다운 아이콘을 클릭할 때마다 발생합니다.

    • 여기에 2가지 기능을 더 추가하고 싶습니다.
  • 모두 접기
  • 모두 확장

    • index.html을 열고 버튼 2개를 만들고 스타일을 추가합니다.

    아래 컨테이너<h3>에 아래 코드를 작성합니다.

    <div class="btns">
   <button class="collapseAll" id="collapseAll"> 
       Collapse All
   </button>
   <button class="expandAll" id="expandAll">
       Expand All
   </button>
</div>


    스타일을 지정할 수 있습니다.

    div.btns {
  margin-top: 20px;
  text-align: center;
}
button {
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 15px;
  font-size: 0.75em;
  outline: none;
  border: 0.5px solid black;
}
button#collapseAll {
  background: cyan;
}
button#expandAll {
  background: firebrick;
  color: #f3f3f3;
}


    이제 우리 웹페이지는 다음과 같아야 합니다.


    모두 접기 버튼을 클릭하면 모든 아코디언이 접혀야 합니다.
    모두 확장 버튼을 클릭하면 모든 아코디언이 확장되어야 합니다.
    script.js에 코드를 작성해 보겠습니다.

    let accordions = document.querySelectorAll(".accordion");
let expandBtn = document.querySelector("#expandAll");
let collapseBtn = document.querySelector("#collapseAll");

expandBtn.addEventListener("click", expandAll);
collapseBtn.addEventListener("click", collapseAll);

function collapseAll() {
  accordions.forEach((accordion) => {
    accordion.classList.remove("active");
  });
}

function expandAll() {
  accordions.forEach((accordion) => {
    accordion.classList.add("active");
  });
}


    여기서 무슨 일이 일어나고 있는지 이해합시다.
    우리는 클래스 아코디언으로 모든 아코디언을 잡고 아코디언에 배치합니다.
    다음으로 방금 만든 두 개의 버튼을 잡고 collapseBtn 및 expandBtn에 배치합니다.
    그런 다음 이 버튼 각각에 대해서도 클릭을 추가합니다. 그런 다음 다른 기능을 실행합니다.

    collapseBtn을 클릭하면 collapseAll 함수가 실행되어 classList.remove() 메서드를 통해 className 아코디언으로 모든 아코디언을 축소합니다.

    expandBtn을 클릭하면 expandAll 함수가 실행되어 classList.add() 메서드를 통해 className 아코디언으로 모든 아코디언을 확장합니다.

    코드펜에 대한 링크는 아래에 있으며 전체 코드가 있습니다. 의심이나 질문이 있으면 아래 토론에 자유롭게 게시하십시오.
    이 게시물이 마음에 드셨다면 이와 같은 더 멋진 콘텐츠를 위해 저를 팔로우하고 좋아요를 눌러주세요.

    링크: https://codepen.io/shameerchagani/full/vYpZZqL

    건배!!
    AWS Organizations데멘바아카운트가 削除できるようになった
    Prettier로 수입품을 빠르게 분류하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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