반응형
자바스크립트에서 스타일을 적용하는 방법은 다양하지만, 가장 기본적인 방식은 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>
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| Javascript: 자바스크립트로 원의 넓이와 둘레 계산기 (2) | 2025.07.27 |
|---|---|
| Javascript: 자바스크립트는 html 문서 아무 위치에나 삽입 할 수 있습니다 (0) | 2025.07.05 |
| Javascript: 자바스크립트 역사 (발전) (0) | 2025.06.28 |
| Javascript: 자바스크립트 소개 (0) | 2025.06.26 |