안녕하세요 오늘은 HTML/CSS/JavaScript 를 활용하여 새로 드롭다운 메뉴를 만들어 볼게요.
우선 사용할 HTML 태그는 table, tr, td 태그입니다.
- <table> 태그:
- 목적: 웹 페이지에 테이블을 만들 때 사용합니다. <table> 태그는 테이블의 시작과 끝을 나타내며, 테이블의 전체적인 구조를 정의합니다.
- 자식 요소: <tr> (테이블 행), <th> (테이블 헤더 셀), <td> (테이블 데이터 셀), <thead>, <tbody>, <tfoot> 등을 자식 요소로 포함할 수 있습니다.
- <tr> 태그 (Table Row):
- 목적: 테이블의 개별 행을 나타냅니다. 각 <tr> 태그는 테이블의 한 행을 대표하며, 하나 이상의 <td> 또는 <th> 요소를 포함할 수 있습니다.
- 자식 요소: 주로 <td> (테이블 데이터 셀) 또는 <th> (테이블 헤더 셀) 태그를 자식 요소로 가집니다.
- 배치: <table> 태그 내에 순차적으로 배치되어 테이블의 행을 구성합니다.
- <td> 태그 (Table Data):
- 목적: 테이블의 개별 셀에 데이터를 표시하기 위해 사용됩니다. 각 <td> 태그는 테이블의 한 셀을 대표하며, 텍스트, 이미지, 리스트, 다른 테이블 등 다양한 콘텐츠를 포함할 수 있습니다.
- 속성: colspan (한 셀이 여러 열에 걸쳐 표시되도록 함), rowspan (한 셀이 여러 행에 걸쳐 표시되도록 함) 등의 속성을 사용할 수 있습니다.
- 배치: <tr> 태그 내에 위치하여 테이블의 행을 구성하는 개별 셀을 형성합니다.
코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
/* 테이블 스타일링 */
table {
width: 80%; /* 테이블의 너비를 화면의 80%로 설정 */
margin: 20px auto; /* 상하 여백 20px, 좌우 중앙 정렬 */
border-collapse: collapse; /* 셀 사이의 테두리를 하나로 합침 */
box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 테이블에 그림자 효과 추가 */
}
/* 셀 스타일링 */
td {
padding: 10px; /* 셀 안의 여백 설정 */
border: 1px solid #ddd; /* 셀 테두리 설정 */
text-align: center; /* 셀 내용 가운데 정렬 */
}
/* 드롭다운 토글 행 스타일링 */
.dropdown-toggle {
background-color: #f9f9f9; /* 배경색 설정 */
}
/* 드롭다운 토글 행에 마우스 오버 시 스타일링 */
.dropdown-toggle:hover {
background-color: #f1f1f1; /* 마우스 오버시 배경색 변경 */
}
/* 드롭다운 콘텐츠 행 스타일링 */
.dropdown-content {
display: none; /* 기본적으로 숨김 */
background-color: #fafafa; /* 배경색 설정 */
}
/* 드롭다운 콘텐츠 내 셀 스타일링 */
.dropdown-content td {
font-size: 0.9em; /* 글꼴 크기 설정 */
color: #666; /* 글꼴 색상 설정 */
text-align: left; /* 글꼴 왼쪽 정렬 */
}
/* 드롭다운 콘텐츠 내 세부 정보 스타일링 */
.dropdown-content-details {
padding-top: 10px; /* 상단 여백 */
padding-bottom: 10px; /* 하단 여백 */
}
</style>
</head>
<body>
<table>
<!-- 드롭다운 토글 행 -->
<tr class="dropdown-toggle">
<td>행 1</td>
</tr>
<!-- 드롭다운 콘텐츠 행 -->
<tr class="dropdown-content">
<td colspan="1">
<div class="dropdown-content-details">추가 정보 1-1</div>
<!-- 추가 정보 세부 사항들 -->
<div class="dropdown-content-details">추가 정보 1-2</div>
<div class="dropdown-content-details">추가 정보 1-3</div>
<div class="dropdown-content-details">추가 정보 1-4</div>
<div class="dropdown-content-details">추가 정보 1-5</div>
<div class="dropdown-content-details">추가 정보 1-6</div>
</td>
</tr>
<tr class="dropdown-toggle">
<td>행 2</td>
</tr>
<tr class="dropdown-content">
<td>추가 정보 2</td>
</tr>
<tr class="dropdown-toggle">
<td>행 3</td>
</tr>
<tr class="dropdown-content">
<td>추가 정보 3</td>
</tr>
<tr class="dropdown-toggle">
<td>행 4</td>
</tr>
<tr class="dropdown-content">
<td>추가 정보 4</td>
</tr>
<tr class="dropdown-toggle">
<td>행 5</td>
</tr>
<tr class="dropdown-content">
<td>추가 정보 5</td>
</tr>
<tr class="dropdown-toggle">
<td>행 6</td>
</tr>
<tr class="dropdown-content">
<td>추가 정보 6</td>
</tr>
</table>
<script>
// 드롭다운 기능을 위한 자바스크립트
document.querySelectorAll('.dropdown-toggle').forEach(item => {
// 모든 드롭다운 토글 행에 대한 클릭 이벤트 리스너 추가
item.addEventListener('click', () => {
const nextRow = item.nextElementSibling; // 다음 행 선택
// 드롭다운 콘텐츠 행의 표시 여부를 토글
if (nextRow.style.display === 'table-row') {
nextRow.style.display = 'none'; // 이미 표시 중이면 숨김
} else {
nextRow.style.display = 'table-row'; // 숨겨져 있으면 표시
}
});
});
</script>
</body>
</html>
결과입니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 슬라이드쇼 만들기 (0) | 2024.02.16 |
|---|---|
| [HTML/CSS] 탭 메뉴 만들기 (0) | 2024.02.07 |
| [HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 (0) | 2024.01.29 |
| [HTML/CSS] 다크모드 구현하기 (0) | 2024.01.20 |
| [HTML/CSS] tailwind를 사용해서 간단한 todo 리스트 만들기 (0) | 2024.01.16 |