HTML
HTML Head 요소
| Tag | Description |
|---|---|
| <head_> | 문서에 대한 정보를 정의 |
| <title_> | 문서의 제목을 정의합니다 |
| <base_> | 페이지의 모든 링크에 대한 기본 주소 나 기본 대상을 정의 |
| <link_> | 문서 와 외부 자원 사이의 관계를 정의 |
| <meta_> | HTML 문서에 대한 메타 데이터를 정의 |
| <script_> | 클라이언트 측 스크립트를 정의 |
| <style_> | 문서의 스타일 정보를 정의 |
<meta charset="UTF-8">
<title>Practical Exam - Accordion</title>
<link rel="stylesheet" href="./accordion_1.css">
<script src="./accordion_1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" >
HTML body 요소
만들고자 하는 사진에 맞춰서 구성한 기본 틀
<body>
<div>
<h3>
<small>
</small>
</h3>
<button></button>
<table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<caption>
</caption>
</table>
</div>
</body>양 쪽이 화면에 너무 붙어있으니까 class="container"를 쓰면 가운데로 이동
- table-bordered : 테이블 선을 보여줌
- table-striped : 테이블이 색이 격자로 다르게 보여줌
- table-dark : Dark 모드인 테이블로 바꿈
- table-hover : 테이블에 마우스를 가져다놓으면 색이 바뀜
세부 내용 넣기 전
<tbody class="text-center">
<tr>
<td>1</td>
<td class="text-left" width="50%"> What is Lorem Ipsum?</td>
<td>이용안내</td>
<td>2023.02.01</td>
<td>84</td>
</tr>
</tbody>세부 내용 넣기 후
(기본 구조)
<tr>
<td>1</td>
<td class="text-left" width="50%">
<div>
<p>What is Lorem Ipsum?</p>
<div>
<p> </p>
<p> </p>
</div>
</div>
</td>
<td>이용안내</td>
<td>2023.02.01</td>
<td>84</td>
</tr>(각 클래스 이름 선언해줌.)
<tr>
<td>1</td>
<td class="text-left" width="50%">
<div class="panel-faq-container">
<p class="panel-faq-title">
What is Lorem Ipsum?
</p>
<div class="panel-faq-answer">
<p>Answer (1) ↓</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</td>
<td>이용안내</td>
<td>2023.02.01</td>
<td>84</td>
</tr>CSS
기본 구성
(이때, html 코드에서 button태그에서 id를 안쓰고 class를 써서 JS 코드 쓸 때 오류도 생기고, CSS 반영이 안됐음.. 잘 보고 작성하기!)
html, body{
font-family: Arial, Helvetica, sans-serif;
margin:0
}
.panel-faq-container{
margin-bottom: -14px;
}
.panel-faq-title{
color:aqua;
cursor: pointer;
}
.panel-faq-answer{
height: 0;
overflow: hidden;
}
#btn-all-close{
margin-bottom: 10px;
border: none;
cursor:pointer;
padding:10px 25px;
float: right;
background-color: cornflowerblue;
color: blue;
}
#btn-all-close:hover{
background-color: aquamarine;
color: aliceblue;
transition: all .35s;
}
.active{
}JS
window.onload = () => {
const panelFaqContainer = document.querySelectorAll('.panel-faq-container');
console.log(panelFaqContainer);
let panelFaqAnswer=document.querySelectorAll('.panel-faq-answer');
console.log(panelFaqAnswer);
const btnAllClose=document.getElementById("btn-all-close");
console.log(btnAllClose);
for(let i=0;i<panelFaqContainer.length;i++){
panelFaqContainer[i].addEventListener('click', function(){
console.log("클릭중.."+i);
panelFaqAnswer[i].classList.add('active');
});
}
btnAllClose.addEventListener('click', function(){
console.log("버튼 클릭..");
for(let i=0;i<panelFaqAnswer.length;i++){
panelFaqAnswer[i].classList.remove('active');
}
});
}
I believe in myself.