반응형
홈페이지 상에서 가끔 자주 묻는 질문 등의 페이지에 들어가면
토글 메뉴의 UI를 많이 볼 수 있다.
은근 홈페이지를 제작할 때 많이 쓰는 토글 메뉴를 만들기 위해서는
주로 라이브러리를 이용해서 작성을 했는데
이번 HTML5 태그로만 만들 수 있다고해서 이에 대해 설명해보려고 한다.
1️⃣HTML details & summary Tag
흔히 말하는 아코디언 메뉴를 작성하려면,
사용자가 먼저 볼 수 있는 타이틀과 클릭했을 때 보일 세부 내용으로 이루어진다.
- <details> 해당 태그안에는 클릭했을 때 보일 세부내용을 작성할 수 있다.
- <summary> 클릭 전 보여질 타이틀 내용을 작성할 수 있다.
위의 예시처럼 만들려면 아래와 같은 코드를 이용하면 된다.
<details>
<summary>자주묻는 질문1</summary>
여기에 자세한 내용을 작성합니다.
</details>예전에 Javascript로 구현을 하려면 코드가 길어졌지만
이제는 HTML만으로 바로 구현이 가능해졌다.
2️⃣details & summary 태그 브라우저 지원
해당 태그는 IE edge 버전에서 부터 사용이 가능하니 참고하길 바란다.
3️⃣details & summary css 적용하기
<html>
<head>
<style>@font-face {
font-family: 'LeferiPoint-WhiteObliqueA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: LeferiPoint-WhiteObliqueA;
}
details {
border-bottom: 1px solid #efefef;
color: #666;
font-size: 16px;
padding: 15px;
}
details[open] summary {
font-weight: 800;
}
details > summary {
color: #333;
font-size: 24px;
padding: 15px 0;
}
</style>
</head>
<body>
<details>
<summary>1. 토글 메뉴를 작동하려면 클릭해주세요.</summary>
여기에 자세한 내용이 보입니다. 토글 안에 내용을 작성해보세요.
</details>
<details>
<summary>2.토글 메뉴를 작동하려면 클릭해주세요.</summary>
여기에 자세한 내용이 보입니다. 토글 안에 내용을 작성해보세요.
</details>
</body>
</html>
해당 태그는 당연히 CSS적용도 가능하다.
만약 오픈되었을 때 다른 css를 적용하고 싶을 땐 details[open] 속성을 이용해주면 된다.
반응형
'FrontEnd' 카테고리의 다른 글
| 서버리스 컴퓨팅이란? - 서버리스 개념과 AWS Lambda(람다) 서비스 알아보기 (0) | 2022.07.03 |
|---|---|
| [Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기 (0) | 2022.04.27 |
| HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css) (1) | 2022.02.13 |
| [Axios] catch에서 error message 객체로 return 받기 (0) | 2022.01.28 |
| 한 끗 차이로 퀄리티가 올라가는 프론트앤드 개발자의 기술 (0) | 2022.01.16 |