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. 궁금한 것이 있어요. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇..

요약 요약 내용 계속 보기 요약 내용 계속 보기 요약 내용 계속 설명보기 요약 내용 계속 설명보기 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..

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

{company_name} var company_data = { "{company_name}" : "SOME COMPANY", }; document.querySelector("div").innerHTML = company_data["{company_name}"]; {company_name}를 화면에 렌더링하는 것 외에는 아무 것도 수행하지 않습니다. 대신 {company_name} 플레이스 홀더를 JavaScript 파일의 데이터로 대체하여 일부를 화면으로 렌더링해야합니다. 재사용 할 수 없죠. 이 시점에서 그가 바라는 바는 이런 종류의 템플릿이 자동으로 발생한다는 것입니다. HTML의 내용과 일치하는 키를 객체에 제공하면 해당 HTML의 내용이 자동으로 교체됩니다. 원시 웹 기술에서는 그렇게 작동하지 ..

× 위와 같이 a 버튼으로 이벤트를 주는 것에 대해서 어떻게 생각하시나요? 왜 나쁜가요? 위 a 태그는 href가 없으므로 실제로는 링크가 아닙니다 (닫기 버튼은 링크가 아님). 말할 것도 없이, 누락 된 href에 대한 태그에 대해서 포커스를 맞출 수도 없습니다. 게다가, 위의 x 기호는“곱하기”또는“시간”으로 읽힐거에요... 전혀 SEO 설명에도 도움이되지 않습니다. 대신에 무엇을 사용할 것인가요? × 위와 같이 좋은 패턴으로 사용합시다. 아이콘을 넣고 싶을 때는? Close × 스크린 리더는 단지 Close, Button이라고만 읽힐 것입니다. (aria-hidden 속성이 있기 때문에) bootstrap 등을 사용할 경우에는 font-awesome을 사용할 수도 있겠지요. 부가적으로, 버튼에 대한..

, , 혼동이 올 수 있는 태그입니다. Blockquotes 흐름 요소 (즉, "블록 수준"요소)로서 인용 부호 안에 다른 요소가 포함될 수 있습니다. 예를 들어, 문제없이 단락(태그)을 넣을 수 있습니다. 인용 부호는 디자인의 장식 요소가 아닌 인용 용도로만 사용되어야합니다. 또한 화면 판독기 사용자가 인용 부호 사이를 이동할 수 있으므로 접근성을 지원합니다. 따라서 미학에만 사용되는 인용구 요소는 실제로 사용자를 혼란스럽게 할 수 있습니다. 확장 된 인용의 범위를 벗어나는 장식적인 것이 필요하다면 클래스가있는 div가 갈 길입니다. Quoting with Q 태그는 인라인 따옴표 입니다. 많은 최신 브라우저는 자동으로 따옴표에 의사 요소로 인용 부호를 추가하지만 이전 브라우저에는 fallback이 필..

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