Front End Develop Front End Develop

IE가 더 이상 서비스하지 않는 브라우저가 되고 나서, 우리는 다양한 HTML5 요소와 CSS를 사용해서 스타일링할 수 있게 되었습니다. 그 중에서 details 요소는 특히, IE에서 전혀 지원하지 않는 요소였는데요. Can I Use(https://caniuse.com/?search=details)에서 확인해보면 더 이상 걱정하지 않아도 될 정도의 서비스 범위를 가지고 있는 것으로 확인됩니다. details 요소를 사용해서 자주 사용하는 Q&A 컴포넌트를 만들어보도록 하겠습니다. Q&A는 주로 아코디언(Accordion)이라는 UI 컴포넌트로 만들게 됩니다. Q. 궁금한 것이 있어요. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇..

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..

HTML없이는 웹을 상상할 수 없습니다. 웹 개발자가 되려면 가장 먼저 배워야 할 것입니다. 그러나 여전히 일부 사람들이 HTML의 힘을 과소평가하는 것을 봅니다. 다른 특별한 기능들을 알지 못하기 때문입니다. 1. Datalist 이 태그는 미리 정의된 옵션 목록을 지정하고 사용자가 옵션을 더 추가할 수 있도록 합니다. autocomplete(자동 완성) 기능을 제공하기 때문에 자동완성 기능으로 원하는 옵션을 얻을 수도 있습니다. Choose your fruit : 2. Details Details 태그는 사용자에게 주문형 세부 정보를 제공합니다. 따라서 이 태그는 주문형 정보가있는 목차를 표시하려는 경우에 사용할 수 있습니다. 열리면 확장되어 내용이 표시됩니다. Summary 태그는 표시되는 Deta..

일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover 속성 때문인데.. 이를 해결하기 위해서 object-fit으로 해결하실 수 있습니다. 이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다. 그리고 또한 다른 부수효과를 얻을 수 있는데요. SEO 친화적 이미지 접근성 친화적 이미지(alt="" 속성 사용) CMS-generated 이미지, CDN과 함께 잘 동작함 이미지 최적화를 위한 srcset과 함께 잘 작동 .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다. 이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 ..