한글자마다 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을 자동으로 넣어주는 스크립트가 있을지해서 여쭤봅니다.ㅜㅜ
답변 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>
var myP = document.getElementById('myP');
위 코드 없이도 아이디 인식하나봐요.
새롭게 알았네요. 감사합니다.
클래스 등과는 다르게 아이디는 동급계열에서 오직 하나만 기능하기 때문에 그냥 맨몸뚱아리 호출이 가능합니다
제가 웹에 입문할 때부터 주욱 그래 왔어요.
그래서 때에 따라서는 this["myP"] 로 불러도 됩니다.
예를들어 for 문으로 1부터 9까지 돌리면서
this['my' + i].style.width = '300px';
라고 하면 my1 부터 my9 까지 모두 가로가 300 이 되죠
오~~호, 굿입니다.
( ^ ! ~) ====b
친절한 답변 정말 감사합니다. 잘되네요 감사드려요 복받으셔요 !!
7월에 공부한 걸, 12월 되니까 까맣게 잊어먹다니..... 이런이런...ㅡㅡ;
한글자마다 태그를 넣는 스크립트는 따로 제공되어지는 부분이 아니고요
해당 부분은 별도로 스크립트를 짜서 구현을 해야 할 부분으로 보여집니다.
참고로 문자열을 배열로 만들어서 태그를 추가해 적용해 주는 함수를 만들어 처리해야 할듯 보여집니다.
