HTML12 Template 엘리먼트 사용 {company_name} var company_data = { "{company_name}" : "SOME COMPANY", }; document.querySelector("div").innerHTML = company_data["{company_name}"]; {company_name}를 화면에 렌더링하는 것 외에는 아무 것도 수행하지 않습니다. 대신 {company_name} 플레이스 홀더를 JavaScript 파일의 데이터로 대체하여 일부를 화면으로 렌더링해야합니다. 재사용 할 수 없죠. 이 시점에서 그가 바라는 바는 이런 종류의 템플릿이 자동으로 발생한다는 것입니다. HTML의 내용과 일치하는 키를 객체에 제공하면 해당 HTML의 내용이 자동으로 교체됩니다. 원시 웹 기술에서는 그렇게 작동하지 .. 2020. 7. 25. 닫기 이벤트 버튼에 대하여.. button vs a × 위와 같이 a 버튼으로 이벤트를 주는 것에 대해서 어떻게 생각하시나요? 왜 나쁜가요? 위 a 태그는 href가 없으므로 실제로는 링크가 아닙니다 (닫기 버튼은 링크가 아님). 말할 것도 없이, 누락 된 href에 대한 태그에 대해서 포커스를 맞출 수도 없습니다. 게다가, 위의 x 기호는“곱하기”또는“시간”으로 읽힐거에요... 전혀 SEO 설명에도 도움이되지 않습니다. 대신에 무엇을 사용할 것인가요? × 위와 같이 좋은 패턴으로 사용합시다. 아이콘을 넣고 싶을 때는? Close × 스크린 리더는 단지 Close, Button이라고만 읽힐 것입니다. (aria-hidden 속성이 있기 때문에) bootstrap 등을 사용할 경우에는 font-awesome을 사용할 수도 있겠지요. 부가적으로, 버튼에 대한.. 2020. 5. 31. <blockquote>, <q>, <cite> 올바르게 사용하기 , , 혼동이 올 수 있는 태그입니다. Blockquotes 흐름 요소 (즉, "블록 수준"요소)로서 인용 부호 안에 다른 요소가 포함될 수 있습니다. 예를 들어, 문제없이 단락(태그)을 넣을 수 있습니다. 인용 부호는 디자인의 장식 요소가 아닌 인용 용도로만 사용되어야합니다. 또한 화면 판독기 사용자가 인용 부호 사이를 이동할 수 있으므로 접근성을 지원합니다. 따라서 미학에만 사용되는 인용구 요소는 실제로 사용자를 혼란스럽게 할 수 있습니다. 확장 된 인용의 범위를 벗어나는 장식적인 것이 필요하다면 클래스가있는 div가 갈 길입니다. Quoting with Q 태그는 인라인 따옴표 입니다. 많은 최신 브라우저는 자동으로 따옴표에 의사 요소로 인용 부호를 추가하지만 이전 브라우저에는 fallback이 필.. 2020. 3. 15. HTML5 <PICTURE> 태그 일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover 속성 때문인데.. 이를 해결하기 위해서 object-fit으로 해결하실 수 있습니다. 이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다. 그리고 또한 다른 부수효과를 얻을 수 있는데요. SEO 친화적 이미지 접근성 친화적 이미지(alt="" 속성 사용) CMS-generated 이미지, CDN과 함께 잘 동작함 이미지 최적화를 위한 srcset과 함께 잘 작동 .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다. 이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 .. 2019. 10. 17. 이전 1 2 3 다음
