html 페이지에 CSS와 JavaScript 이용 TEXT 바꾸기
홈페이지나 블로그 혹은 티스토리 페이지에 공통으로 들어가는 문장을 한 번에 만드는 내용입니다. 예를 들면 "from : 홍길동" 같은 문구를 티스토리에는 서식을 이용해서 만 들수 있습니다.
CSS로 예제는 내용을 추가하는 형식이라 기존 html 문서에 아무 내용도 없어야 합니다. 기존 내용이 있다면 뒤에 추가되는 형식입니다. 예를 들면 "홍길동"이 기존 문장이면 CSS에서 "블로그입니다"를 입력하면 "홍길동 블로그입니다"식으로 출력됩니다. 따라서 한 번에 문장을 다 바꾸고 싶으면 해당 위치에 빈공간이어야 합니다.
자바스크립트(javascript) 형식은 div에 있는 내용을 바꿔치기하는 형식입니다. 따라서 기존 html에 저장된 문장을 바꿀 수 있습니다. 어쨌든 두 가지를 적절히 이용하면 되겠습니다.
▷ CSS + html 이용하여 문장 추가하기 예제 소스
HTML 내용
<div class="txt_add"> </div>
CSS 내용
.txt_add:after{content:"이 내용이 추가됨"; }
<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 id="changing-text">
내용이 자동으로 바뀝니다.
</div>
JavaScript 예제
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("changing-text").textContent =
"이 javascript 내용으로 바뀜";
});</script>
위 코드는 페이지가 로드될 때 자바스크립트를 사용하요 <div> 요소의 텍스트를 바꿉니다. 필요에 따라 자바스크립트 코드에서 내용을 수정하여 내용을 바꿀 수 있습니다.
이 내용이 스크립트 내용으로 바뀝니다.
'Web' 카테고리의 다른 글
| 네이버 스토어팜 도메인연결 해결 (0) | 2015.09.15 |
|---|---|
| 옥션 반품 때, 반품보류 해결 방법 (0) | 2015.09.13 |
| 아이폰 아이패드 사파리에서 html5 width 값 버그 해결 (0) | 2015.07.15 |
| 다음 블로그 검색 문제 (0) | 2015.07.03 |
| 네이버 내 댓글 확인 - 댓글 덧글 공감 포함 (1) | 2014.08.20 |
| 나눔고딕 웹폰트 적용과 굵기 지정 (2) | 2014.08.18 |
| 네이버 블로그 태그 검색 노출관계? (0) | 2014.07.29 |
| 티스토리 이미지 폴더 안의 경로 찾기 (0) | 2014.06.16 |
| 블로그 API 사용하기 (0) | 2014.04.10 |
| 티스토리 스킨 배포합니다. (12) | 2014.04.08 |
