-
Template 엘리먼트 사용HTML 2020. 7. 25. 12:37
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="test.css"> <script src="data.js"></script> </head> <body> <section> <div>{company_name}</div> </section> </body> </html>var company_data = { "{company_name}" : "SOME COMPANY", }; document.querySelector("div").innerHTML = company_data["{company_name}"];{company_name}를 화면에 렌더링하는 것 외에는 아무 것도 수행하지 않습니다.
대신 {company_name} 플레이스 홀더를 JavaScript 파일의 데이터로 대체하여 일부를 화면으로 렌더링해야합니다.
재사용 할 수 없죠.
이 시점에서 그가 바라는 바는 이런 종류의 템플릿이 자동으로 발생한다는 것입니다.
HTML의 내용과 일치하는 키를 객체에 제공하면 해당 HTML의 내용이 자동으로 교체됩니다.
원시 웹 기술에서는 그렇게 작동하지 않습니다.
여러가지 방법들이 있습니다.
- Handlebars or Mustache 사용하기
- <template>
- Web Component
- Nunjucks
- Pug
일반적으로 서버 측 또는 빌드 중에 템플릿을 작성하는 것이 이상적이라고 말하고 싶습니다.
그러나 그 조언을 잠시 무시하기 위해, 핸들바를 사용하여 클라이언트 측에서 수행하는 예는 다음과 같습니다.
출처 : https://css-tricks.com/what-ya-need-there-is-a-bit-of-templating/
'HTML' 카테고리의 다른 글
strong 태그와 em 태그의 차이 (0) 2021.06.27 당신이 모르는 유용한 HTML5 기능 4 가지 (0) 2021.01.30 닫기 이벤트 버튼에 대하여.. button vs a (0) 2020.05.31 <blockquote>, <q>, <cite> 올바르게 사용하기 (0) 2020.03.15 HTML5 <PICTURE> 태그 (0) 2019.10.17