HTML5에 details태그가 추가되었다.
간단하게 추가적인 정보를 표시할 때 상당히 유용하게 쓸 수 있을 것 같다.
기본적인 틀은 아래와 같다.
<details>
<summary>제목</summary>
<p>추가적인 내용</p>
</details>
위와 같이 작성하면 아래와 아래와 같이 맨 왼쪽에 화살표가 추가된 형태로 나온다.
여기서 화살표를 눌러보면 추가적인 내용이라고 쓴 부분이 나온다.
다시 화살표를 누르면 없어진다.
여기서 details태그의 속성으로 onToggle 속성을 줄 수 있다.
해당 속성은 화살표가 클릭될 때 마다 발생하는 이벤트를 지정해줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var test = () => {
alert("toggle");
}
</script>
</head>
<body>
<details onToggle=test()>
<summary>제목</summary>
<p>추가적인 내용</p>
</details>
</body>
</html>
참고로 => 는 ES6부터 지원되는 화살표 함수(Arrow function) 이다.
var test = () => {
alert("toggle");
}
위 함수를 ES5 스타일로 바꿔보면 아래와 같다.
function test() {
alert("toggle");
}
이렇게 작성을 하면 화살표를 클릭할때마다 test함수가 실행된다.
onToggle속성은 details 태그 뿐만 아니라 다른 태그의 속성으로도 줄 수 있다.
자세한 내용은 아래 주소 참고.
details : https://www.w3schools.com/tags/tag_details.asp
onToggle : https://www.w3schools.com/jsref/event_ontoggle.asp
'Coding > Etc' 카테고리의 다른 글
| each child in an array or iterator should have a unique key prop 오류 해결방법 (0) | 2018.02.09 |
|---|---|
| The virtual environment was not created successfully because ensurepip is not available. 오류해결 (0) | 2018.02.02 |
| React.js Redux로 컴포넌트 여러개 연결하는 방법 (0) | 2018.01.30 |
| [React.js] 구글 Firebase 연동하는 방법 (0) | 2018.01.27 |
| [React.js] react-native-elements 설치하는 방법 (0) | 2018.01.26 |
