웹페이지에 생동감을 불어넣는 방법: 자바스크립트 효과

강조 효과 추가하기

document.querySelector("#title").style.fontWeight = "bold";

제목을 강조하기 위해 font-weight 속성을 변경하는 자바스크립트 코드입니다.

이미지 교체하기

let image = document.querySelector("#image");
image.src = "new_image.jpg";

id가 “image”인 요소의 src 속성을 변경하여 이미지를 교체하는 자바스크립트 코드입니다.

페이지 스크롤하기

window.scrollTo(0, 500);

스크롤 위치를 가로축 0, 세로축 500px로 설정하여 페이지를 이동하는 자바스크립트 코드입니다.

텍스트 외곽선 추가하기

document.querySelector("#text").style.textOutline = "1px solid black";

id가 “text”인 요소의 텍스트 외곽선을 1px 두께의 검은색으로 추가하는 자바스크립트 코드입니다.

요소 숨기기 보여주기

let element = document.querySelector("#element");
element.style.display = "none";

id가 “element”인 요소를 display 속성값을 “none”으로 설정하여 숨기거나 “block”으로 설정하여 보여주는 자바스크립트 코드입니다.

자바스크립트 효과로 웹페이지에 생동감을 불어넣어, 사용자들에게 더 나은 브라우징 경험을 제공할 수 있습니다.