HTML의 태그들(7)

● <details> 태그

세부 사항을 선택적으로 보여주는 태그이다
<details> 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며,
그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다
이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다

● <summary> 태그

요약을 표시하는데 사용하는 태그이다
<details> 태그로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다
"요약 - 세부"라는 관계를 제대로 전달하기 위해서는 <details> 태그 다음에 곧바로 <summary> 태그가 이어져야 한다

---

실행 코드
<details>
    <summary>summary 태그는 details 태그 바로 밑에 와야할까요?</summary>
    <p>   네!</p>
</details>

실행 결과

summary 태그는 details 태그 바로 밑에 와야할까요?

   네!

● <datalist> 태그

<input> 태그에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용한다
<datalist> 태그는 사용자가 <input> 태그에 데이터를 입력할 때 미리 정의된 옵션을 드롭 다운 리스트로 보여줌으로써
자동 완성 기능을 제공한다

<input> 태그에 list 속성 값으로 <datalist> 태그의 id 속성 값을 명시하면, 해당 <datalist> 태그에서 미리 정의한
옵션들을 <input> 태그에서 사용할 수 있다

ex) 당신의 취미는 무엇인가요?

● <frameset> 태그

문서의 레이아웃을 구성하기 위해 사용되는 프레임들의 집합을 정의할 때 사용한다
<frameset> 태그는 하나 이상의 <frame> 태그를 포함하며, 각각의 <frame> 태그는 서로 다른 문서를 포함할 수 있다

frameset 태그의 속성

• cols : frame 개체의 너비를 지정한다
  ex) cols=" 200, * " => 프레임을 좌우로 나눈 다음 왼쪽 프레임의 크기를 200픽셀로,
  오른쪽 프레임은 나머지 크기를 차지하도록 설정한다
• rows : frame 개체의 높이를 지정한다
  ex) rows=" 200, * " => 프레임을 상하로 나눈 다음 상단 프레임의 크기를 200픽셀로,
  하단 프레임은 나머지 크기를 차지하도록 설정한다

frame 태그의 noresize 속성 : 프레임의 크기를 변경하지 못하도록 한다

● <mark> 태그

중요한 텍스트임을 알려주고 강조할 때 사용하는 태그이다
형관펜과 비슷한 효과(위에 텍스트에 회색줄이 <mark> 태그의 효과이다)

● <time> 태그

일반 텍스트로 보이는 날짜와 시간 정보를 진짜 날짜, 시간 정보임을 html에게 알려주기 위해 사용한다
<time>2020년 6월 16일 오후 10시 40분</time>

● <meter> 태그

현재의 점수나 수치를 표시할 때 사용한다
주어진 범위나 %의 데이터량을 표시한다
<meter value="80" max="100">80%</meter>
80%

● <progress> 태그

작업의 진행도를 표시할 때 사용한다
<progress value="5" max="10">50%</progress>
50%