HTML12 HTML5 <details> 태그를 사용해서 Q&A 만들기 IE가 더 이상 서비스하지 않는 브라우저가 되고 나서, 우리는 다양한 HTML5 요소와 CSS를 사용해서 스타일링할 수 있게 되었습니다. 그 중에서 details 요소는 특히, IE에서 전혀 지원하지 않는 요소였는데요. Can I Use(https://caniuse.com/?search=details)에서 확인해보면 더 이상 걱정하지 않아도 될 정도의 서비스 범위를 가지고 있는 것으로 확인됩니다. details 요소를 사용해서 자주 사용하는 Q&A 컴포넌트를 만들어보도록 하겠습니다. Q&A는 주로 아코디언(Accordion)이라는 UI 컴포넌트로 만들게 됩니다. Q. 궁금한 것이 있어요. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇.. 2023. 10. 9. Shadow Root와 상속에 대하여 요약 요약 내용 계속 보기 요약 내용 계속 보기 요약 내용 계속 설명보기 요약 내용 계속 설명보기 HTML로 위와 같이 마크업을 하면, details는 위와 같은 Shadow DOM 구성을 가지고 있기 때문에 아래와 같이 가상돔의 내용이 보여지게 됩니다. #shadow-root (user-agent) 세부정부 reveal reveal 요약 요약 내용 계속 보기 요약 내용 계속 보기 개발자 도구의 요소검사(F12)에서 위와 같은 Shadow DOM들을 보신적이 있으실 겁니다. 여기서 신기한 점은 CSS를 다음과 같이 선언해도 box-sizing: border-box가 적용되지 않고 content-box로 적용된다는 점입니다. * { box-sizing: border-box; } 이유 → shadow roo.. 2021. 9. 21. strong 태그와 em 태그의 차이 SEO를 고려한 시멘틱 마크업을 하기에 있어 strong 태그와 em 태그를 문맥상 강조할 때 많이 사용하실텐데요. 차이점은 다음과 같습니다. strong em 중요성, 긴급성, 심각성을 알리는 경우 그 부분을 강조하는 데 사용 문장 내에서 특정 문맥의 강조할 때 사용 이 중에서 중요성이라는 항목이 가장 모호할텐데요. 강조의 정도에 있어서는 em은 strong보다는 덜 강합니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#%3Cem%3E_vs._%3Cstrong%3E : The Strong Importance element - HTML: HyperText Markup Language | MDN The HTML element indi.. 2021. 6. 27. 당신이 모르는 유용한 HTML5 기능 4 가지 HTML없이는 웹을 상상할 수 없습니다. 웹 개발자가 되려면 가장 먼저 배워야 할 것입니다. 그러나 여전히 일부 사람들이 HTML의 힘을 과소평가하는 것을 봅니다. 다른 특별한 기능들을 알지 못하기 때문입니다. 1. Datalist 이 태그는 미리 정의된 옵션 목록을 지정하고 사용자가 옵션을 더 추가할 수 있도록 합니다. autocomplete(자동 완성) 기능을 제공하기 때문에 자동완성 기능으로 원하는 옵션을 얻을 수도 있습니다. Choose your fruit : 2. Details Details 태그는 사용자에게 주문형 세부 정보를 제공합니다. 따라서 이 태그는 주문형 정보가있는 목차를 표시하려는 경우에 사용할 수 있습니다. 열리면 확장되어 내용이 표시됩니다. Summary 태그는 표시되는 Deta.. 2021. 1. 30. 이전 1 2 3 다음
