html 웹 문서에 css와 javascript를이용해서 자동 문장 만들기

 

html 페이지에 CSS와 JavaScript 이용 TEXT 바꾸기

홈페이지나 블로그 혹은 티스토리 페이지에 공통으로 들어가는 문장을 한 번에 만드는 내용입니다. 예를 들면 "from : 홍길동" 같은 문구를 티스토리에는 서식을 이용해서 만 들수 있습니다.

 

CSS로 예제는 내용을 추가하는 형식이라 기존 html 문서에 아무 내용도 없어야 합니다. 기존 내용이 있다면 뒤에 추가되는 형식입니다. 예를 들면 "홍길동"이 기존 문장이면 CSS에서 "블로그입니다"를 입력하면 "홍길동 블로그입니다"식으로 출력됩니다. 따라서 한 번에 문장을 다 바꾸고 싶으면 해당 위치에 빈공간이어야 합니다.

 

자바스크립트(javascript) 형식은 div에 있는 내용을 바꿔치기하는 형식입니다. 따라서 기존 html에 저장된 문장을 바꿀 수 있습니다. 어쨌든 두 가지를 적절히 이용하면 되겠습니다.

▷ CSS + html 이용하여 문장 추가하기 예제 소스 

 

HTML 내용
<div class="txt_add"> </div>

CSS 내용
.txt_add:after{content:"이 내용이 추가됨"; }

 

첫 번째 코드는 html에 삽입하고 두 번째 코드는 CSS에 입력하면 됩니다.

 

:after 가상 요소를 사용하여 텍스트를 추가할 수 있습니다. 위 예제는 txt_add 클래스를 가진 요소 뒤에 CSS::after 가상 요소를 사용하여 내용을 추가했습니다. 이를 통해서 html 내용을 변경하지 않고 텍스트를 자동으로 추가할 수 있습니다.

▷ JavaScript + html 이용하여 페이지 문서 내용 바꾸기 예제 소스  

 

HTML 예제
<div id="changing-text">
내용이 자동으로 바뀝니다.
</div>

JavaScript 예제
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("changing-text").textContent = 
"이 javascript 내용으로 바뀜";
});</script>

위 코드는 페이지가 로드될 때 자바스크립트를 사용하요 <div> 요소의 텍스트를 바꿉니다. 필요에 따라 자바스크립트 코드에서 내용을 수정하여 내용을 바꿀 수 있습니다.