자바스크립트_Javascript
Javascript: 자바스크립트로 CSS를 사용하는 간단한 예제
enjoy-country-life
2025. 7. 26. 13:24
반응형
자바스크립트에서 스타일을 적용하는 방법은 다양하지만, 가장 기본적인 방식은 HTML 요소의 style 속성을 직접 수정하는 것입니다. 아래에 간단한 예제를 한 개 소개합니다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 스타일 예제</title>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
<button onclick="changeStyle()">스타일 바꾸기</button>
<script>
function changeStyle() {
const title = document.getElementById("title");
title.style.color = "white"; // 글자색 흰색
title.style.backgroundColor = "blue"; // 배경색 파랑
title.style.padding = "20px"; // 안쪽 여백
title.style.borderRadius = "10px"; // 둥근 테두리
title.style.fontFamily = "Arial"; // 글꼴
}
</script>
</body>
</html>
반응형