220222 - html

8. Html interactive content

### details, summary : 모든 브라우저에서 지원하지 않는다. 사용 전 브라우저 체크가 필요.

-details : 열고 닫는 인터렉션이 가능. 토글되는 형태, open 속성을 사용하면 열린상태를 기본으로 보여준다.(기본값은 닫혀있음)

- summary: style 작성시 transition 을 주면 인터렉션 적용이 가능하다.

<details>
    <summary>loading…</summary>
    <p>이미지 다운로드 중</p>
    <p>사운드 다운로드 중</p>
</details>

 

### dialog : 윈도우상의 모달이 노출, 혹은 버튼을 통해 박스레이아웃이 노출되는 것을 브라우저의 기본 효과로 보여주는 요소(모달창과 비슷). 기본적으로는 노출이 되지 않기 때문에 버튼을 눌렀을때 노출을 시키거나 혹은 open 속성을 활용해야 노출이 가능하다. 브라우저 지원율이 낮아 사용전 브라우저 체크를 해야한다.

<dialog>
    <h1> add to cart</h1>
    <p>주문하신 상품이 맞습니까?</p>
</dialog>

 

9. 알아두면 유익한 html 관련 사이트

• https://validator.w3.org/nu/ : 작성한 html 의 문법이 잘못되었는지 확인해주고, 좋은 방향으로 문서를 작성할 수 있도록 도와줌
• https://caniuse.com : 브라우저 벤더사들이 직접 업로드하고 있음. 내가 현재 사용할 수 있는 요소와 사용 불가능한 요소를 확인할 수 있다.
• https://developer.mozilla.org/ : 모질라에서 운영하는 기술 문서. 각 브라우저 벤더들이 오픈소스로 참여함. Html, css, javascript 관련 기술을 가장 정확하게 제공한다
• https://css-tricks.com : css 정보공유사이트. Html, css 를 폭 넓고 깊이 있게 다루고 있다.
• https://alistapart.com : 웹 관련 전반적인 기술과 전략을 다루는 사이트
• https://web.dev : 구글 크롬팀에서 운영하는 웹 기술 소개 블로그

---

초보자를 위한 HTML 강의 정리

https://inf.run/eATy

초보자를 위한 HTML 기초 - 인프런 | 강의