j쿼리ㅣ- 없이 나만의 태그 만들기

안녕하세요!

혹시 여러분들 중에 html을 하면서 나만의 태그를 만들고 싶다는 생각을 하신 분이 있나요?

js로 어찌어찌해서 만들 순 있지만... 불편한 점은 "-"가 필수적으로 들어가야 한다는 겁니다.

(안 그러면 오류를 뿜습니다 ㅋㅋ)

 

그럼 왜 -를 넣어야 할까요?

바로 웹표준 때문인데요,

-를 넣지 않고 커스텀 태그를 만들면 나중에 html에 추가될 태그들과 이름이 겹칠 수 있기 때문에,

-를 넣는거랍니다.

 

하지만... 그렇긴 해도 -를 넣는 게 여간 불편한 게 아닙니다.

단축키처럼 사용하려고 나만의 태그를 만드는 건데... -라뇨...ㅠㅠ

---

본론

 

---

그래서 준비했습니다!

j쿼리로 - 없이 나만의 태그를 만들어보겠습니다.

let mytag = "나만의 태그의 이름";
$(mytag).each(function (index, item) {
    let r;
    let s = $(this).html();//나만의 태그 안에 있는 값
    let pp = "";//나만의 태그의 모든 속성
    $(this).each(function() {//나만의 태그의 모든 속성을 추출하는 과정
        $.each(this.attributes, function() {
        if(this.specified) {
                pp = `${pp} ${this.name}="${this.value}"`;
            }
        });
    });
    let con = `태그의 역할`;
    $(this).html(con);//태그 역할을 넣음
    r = $(this).contents();//나만의 태그의 흔적을 삭제
    $(this).replaceWith(r);
});

이것만 보시고 바로 복붙 하지 마시고요...ㅋㅋㅋ
사용법을 들으셔야죠!

 

mytag에 나만의 태그 이름을 넣으시고요,

let con에 나만의 태그가 어떤 역할을 하는지 적으셔야 합니다.

 

예를 들어 veryimportant 태그를 만들고 싶다! 하시면

mytag 값은 "veryimportant"로 하면 되는 거고요,

 

veryimportant 태그의 역할을 <p>겁나 중요합니다.<p>로 하고 싶으시면,

let con = `<p>겁나 중요합니다.</p>` 라고 하시면 되는 겁니다!

그럼 자동으로 <veryimportant></veryimportant>가 <p>겁나 중요합니다.</p> 로 바뀌게 됩니다.

 

 

 

그럼 유용한 것들을 함께 알아볼까요?

 

 

${s} 는 나만의 태그 안에 있는 값으로,

<sans>라라랄ㄹ</sans> 에서 ${s}는 라라랄ㄹ가 됩니다.

만약 <sans>라라랄ㄹ</sans>를 <h1>라라랄ㄹ</h1> 로 변환하고 싶다면

let con = `<h1>${s}</h1>`라고 하면 되는거죠.

 

 

${pp} 는 나만의 태그의 모든 속성으로,

<sans style="margin-top:10px" alt="히히힛">라라랄ㄹ</sans> 에서 ${pp}는

style="margin-top:10px" alt="히히힛" 이 됩니다.

 

이렇게 하면 속성 값을 나만의 태그를 변환한 태그에도 쉽게 적용할 수 있습니다.

예를 들어 <sans></sans>가 <img src="프로필.png">의 역할을 할 때

<sans alt="프로필" style="margin-top:10px"></sans>에서 alt="프로필" alt="프로필" style="margin-top:10px"을

<img src="프로필.png"> 에 <img src="프로필.png" ${pp}>로 적용시킬 수 있는 거죠.

 

 

 

아, 그리고 이 코드는 나만의 태그를 다른 태그로 "변환" 하기 때문에

html을 실행했을 때 나만의 태그의 흔적이 사라지게 되는데요,

나만의 태그의 흔적도 남기고 싶다! 하시는 분은 

r = $(this).contents();//나만의 태그의 흔적을 삭제
$(this).replaceWith(r);

부분을 지우시면 됩니다!

다만 실행했을 때 나오는 나만의 태그의 흔적이 쓸모가 있을지...?

 

 

 

제가 말하는 실력이 별로여서 이해가 안 된 부분이 있으실 수 있습니다 😅

이해가 안 되신 부분이 있거나 코드에 오류가 있다면,

댓글로 남겨주시면 초스피드 답변드리겠습니다! 

 

 

 

 

감사합니다~ 구독과 좋아요는 큰 힘이 됩니다 😃