HTML 코드 중복 처리 질문입니다.

Question

웹 개발은 처음이라 강의 보면서 배우고 있습니다.동시에 작은 웹프로젝트를 진행할려고 하는데 HTML 레이아웃 구성에서 코드 중복처리를 어떻게 처리하는 것이 표준에 가깝고 효율적인지 알고싶습니다.기존에는 각각의 리스트 아이템에 앵커를 이용해서 page1/2/3을 이동하다가타이틀 및 메뉴영역에는 공통요소라 다음과 같이 처리를 하였는데 웹표준에 위배된다거나 혹은 추후에 문제가 될만한 소지가 있나요?문제가 된다면 괜찮은 코드중복 처리방법을 좀 알려주시면 감사하겠습니다.//메뉴입니다. click이벤트를 통해서 컨텐츠영역을 변경합니다.//컨텐츠 영역입니다. //https://www.w3schools.com/lib/w3.js 의//w3.includeHTML() 메소드를 이용해서 컨텐츠 영역의 HTML만 변경합니다.

//baseScript/js 파일function includeJs(jsFilePath){ var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js);}includeJs("https://www.w3schools.com/lib/w3.js"); //리스트아이템 클릭시 태그변경 후 HTML 포함작업 var textConstant = document.getElementById("textConstant");textConstant.addEventListener("click", function(){ var ele = document.getElementById("content"); ele.setAttribute("w3-include-html", "frag_constant.html"); w3.includeHTML();}); var textJavascript = document.getElementById("textJavascript");textJavascript.addEventListener("click", function(){ var ele = document.getElementById("content"); ele.setAttribute("w3-include-html", "frag_javascript.html"); w3.includeHTML();}); var textOperator = document.getElementById("textOperator");textOperator.addEventListener("click", function(){ var ele = document.getElementById("content"); ele.setAttribute("w3-include-html", "frag_operator.html"); w3.includeHTML();});

유리세계 · Accepted Answer

id와 attribute를 동적으로 받는 함수를 하나 만드시면 되겠네요

협군 · Answer

레퍼런스를 보세요.

Earthian_ · Answer

유리세계 답변 감사합니다. 용어를 잘 모른 상태에서 두서없이 쓴 글이라 질문내용이 애매했던 것 같습니다.HTML 문서 일부 컨텐츠를 각각 메뉴의 클릭이벤트에 동적으로 로드 할경우 이벤트 이전에는 컨텐츠의 내용이 HTML에 포함되지 않는데 이를 검색엔진에서 크롤링 할 수 있나요? 라는 질문이었습니다.제가 다시 봐도 본문이 이상하네요.

Earthian_ · Answer

협군 답변 감사합니다. 용어를 잘 모른 상태에서 두서없이 쓴 글이라 질문내용이 애매했던 것 같습니다.HTML 문서 일부 컨텐츠를 각각 메뉴의 클릭이벤트에 동적으로 로드 할경우 이벤트 이전에는 컨텐츠의 내용이 HTML에 포함되지 않는데이를 검색엔진에서 크롤링 할 수 있나요? 라는 질문이었습니다.제가 다시 봐도 본문이 이상하네요.

HTML 코드 중복 처리 질문입니다.

4개의 답변

#include 목록