한글자마다 span 추가하는 방법이 있을까요?

한글자마다 span 추가하는 방법이 있을까요?

QA

한글자마다 span 추가하는 방법이 있을까요?

본문

안녕하세요. 퍼블리싱하다가 css로 글자에 애니메이션을 넣을려고하는데요.

 

예를 들어서

 

<p><?php echo $view['wr_1'] ?></p> 

를 통해 값을 불러오면

 

뷰페이지에

안녕하세요 라는 텍스트값이 출력됩니다.

 

여기서 저의 질문은

한글자마다 span을 추가하고싶은데요.

 

우선 결과값은 

<p>안녕하세요</p> 이렇게 나오는데

 

제가 원하는것은

<p>

<span>안</span><span>녕</span><span>하</span><span>세</span><span>요</span>

</p>

 

입니당 ㅜ.ㅜ 검색을 많이 해보았지만 방법을 통 모르겠어서

혹시나 한글자마다 span을 자동으로 넣어주는 스크립트가 있을지해서 여쭤봅니다.ㅜㅜ

 

 

#js

이 질문에 댓글 쓰기 :

답변 3

아래처럼 innerText 를 이용하여 "눈"으로 확인합니다.

 

<p id=myP>안녕하세요</p>
<script>
myP.innerText = "<span>" + myP.innerText.split("").join("</span><span>") + "</span>";
</script>

 

눈으로 확인했으면 innerHTML 로 뿌려줍니다.

 

<p id=myP>안녕하세요</p>
<script>
myP.innerHTML = "<span>" + myP.innerText.split("").join("</span><span>") + "</span>";
</script>

 

글자수는 100개 1000개라도 상관 없습니다.

 

아니면... p 에 id를 주지 않고 아래처럼 해도 되구요. 안녕하세요 대신 php 변수를 넣어주면 되겠지요.

 

<script>
document.write("<p><span>" + ('안녕하세요').split('').join('</span><span>') + "</span></p>");
</script>

클래스 등과는 다르게 아이디는 동급계열에서 오직 하나만 기능하기 때문에 그냥 맨몸뚱아리 호출이 가능합니다
제가 웹에 입문할 때부터 주욱 그래 왔어요.
그래서 때에 따라서는 this["myP"] 로 불러도 됩니다.

예를들어 for 문으로 1부터 9까지 돌리면서
this['my' + i].style.width = '300px';
라고 하면 my1 부터 my9 까지 모두 가로가 300 이 되죠

한글자마다 태그를 넣는 스크립트는 따로 제공되어지는 부분이 아니고요

해당 부분은 별도로 스크립트를 짜서 구현을 해야 할 부분으로 보여집니다.

참고로 문자열을 배열로 만들어서 태그를 추가해 적용해 주는 함수를 만들어 처리해야 할듯 보여집니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 109,734 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT