본문 바로가기
Programming/Javascript

[19일차] JavaScript로 스타일 변경하기 (CSS 조작)

by tech-living 2024. 11. 25.

 

목차

  1. JavaScript로 CSS 조작이란?
  2. CSS 조작 기본 방법
    •   2.1 style 속성으로 스타일 변경
    •   2.2 CSS 클래스 추가 및 제거
  3. 다양한 CSS 스타일 조작하기
    •   3.1 여러 스타일 속성 한 번에 적용
    •   3.2 CSS 변수 조작
  4. 실습: 버튼 클릭으로 배경색 변경
  5. 연습문제
  6. 연습문제의 답

1. JavaScript로 CSS 조작이란?

JavaScript를 사용하여 HTML 요소의 스타일을 동적으로 변경할 수 있습니다.
이를 통해 다음과 같은 작업이 가능합니다:

  • 버튼 클릭 시 텍스트 색상 변경
  • 특정 이벤트 발생 시 레이아웃 업데이트
  • 애니메이션 효과 추가

2. CSS 조작 기본 방법

JavaScript로 CSS를 변경하는 주요 방법은 style 속성과 CSS 클래스 추가/제거입니다.

2.1 style 속성으로 스타일 변경

element.style.property를 사용하여 특정 스타일 속성을 변경할 수 있습니다.
CSS 속성 이름은 camelCase로 사용합니다.

예제: 텍스트 색상 변경

const element = document.querySelector("#text");
element.style.color = "blue"; // 텍스트 색상을 파란색으로 변경
element.style.fontSize = "20px"; // 텍스트 크기를 20px로 변경

2.2 CSS 클래스 추가 및 제거

CSS 클래스는 스타일의 집합을 정의하므로, 클래스를 추가/제거하면 여러 스타일을 한 번에 적용할 수 있습니다.

  • classList.add("클래스명"): 클래스 추가
  • classList.remove("클래스명"): 클래스 제거
  • classList.toggle("클래스명"): 클래스 추가/제거 전환

예제: 배경색 토글

const element = document.querySelector("#box");
element.classList.toggle("highlight");

CSS 코드

.highlight {
  background-color: yellow;
  border: 2px solid black;
}

3. 다양한 CSS 스타일 조작하기

3.1 여러 스타일 속성 한 번에 적용

element.style.cssText를 사용하면 여러 스타일을 한 번에 설정할 수 있습니다.

예제: 여러 스타일 적용

const element = document.querySelector("#text");
element.style.cssText = "color: green; font-size: 24px; font-weight: bold;";

3.2 CSS 변수 조작

CSS 변수는 document.documentElement.style.setProperty를 사용하여 변경할 수 있습니다.

예제: CSS 변수 변경

:root {
  --main-color: blue;
}
document.documentElement.style.setProperty("--main-color", "red");

4. 실습: 버튼 클릭으로 배경색 변경

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 조작 실습</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 50px;
    }
    #box {
      width: 200px;
      height: 200px;
      margin: 20px auto;
      background-color: lightgray;
    }
    #box.red {
      background-color: red;
    }
    #box.blue {
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>배경색 변경</h1>
  <div id="box"></div>
  <button id="redBtn">빨간색</button>
  <button id="blueBtn">파란색</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript 코드

const box = document.querySelector("#box");
const redBtn = document.querySelector("#redBtn");
const blueBtn = document.querySelector("#blueBtn");

redBtn.addEventListener("click", () => {
  box.classList.remove("blue");
  box.classList.add("red");
});

blueBtn.addEventListener("click", () => {
  box.classList.remove("red");
  box.classList.add("blue");
});

로컬에서 바로 실행할 경우 아래와 같이 보안으로 인해 "표시된 파일은 로컬 또는 공유 파일입니다." 나타납니다.

해결방법으로 몇 가지가 있지만, 일반적으로는 웹서버를 실행해서 실행하는 방법이 있습니다. 그러나 설치하기 귀찮을 수 있기 때문에 Python에서 제공해 주는 python3 -m http.server 8000로 간단하게 실행해서 하는 방법이 있습니다.

다음으로는 크롬에 접근권한을 허용옵션을 주어 실행하는 방법이 있습니다. 윈도우 커맨드 창에서 chrome.exe --allow-file-access-from-files 실행하는 두 번째 방법이 있습니다.

세 번째로는 Visual Code의 Extentions에서 Live Server를 실행하는 방법이 있습니다. 여기서는 세 번째 방법을 이용해 보겠습니다.

단독 파일을 호출하면 작업폴더를 불러와야 한다고 알람을 준비니다. 그래서 html, js 파일을 저장할 폴더를 만들어 2개의 파일을 옮겨 놓고 visual code에서 Open Folder 선택해서 생성한 폴더를 선택합니다. 그러면 신뢰하는 한다고 선택하고 계속진행합니다.

테스트 코드를 완성과 live server가 설치가 되었다면 하단에 Go Live 항목이 생깁니다. 클릭하면 웹서버가 동작하며 소스코드를 웹브라우저에서 확인할 수 있습니다.

"Go Live"를 클릭하면 기본 웹브라우저에 실행 결과가 나타납니다.

5. 연습문제

  1. 문제 1
    버튼을 클릭하면 텍스트의 색상이 랜덤으로 변경되도록 만들어보세요.
  2. 문제 2
    버튼 클릭 시 글꼴 크기가 커지거나 작아지는 효과를 토글로 구현해 보세요.

6. 연습문제의 답

아래는 질문하신 내용을 올바르게 마크다운 형식으로 작성한 코드입니다.

1. 문제 1의 답

const text = document.querySelector("#text");
const button = document.querySelector("#randomColorBtn");

button.addEventListener("click", () => {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  text.style.color = randomColor;
});

2. 문제 2의 답

JavaScript 코드

const text = document.querySelector("#text");
const toggleButton = document.querySelector("#toggleSizeBtn");

toggleButton.addEventListener("click", () => {
  text.classList.toggle("large");
});

CSS 코드

.large {
  font-size: 30px;
}

'Programming > Javascript' 카테고리의 다른 글

[21일차] JavaScript 프로젝트 - 간단한 웹 앱 만들기 (To-Do List) -기본 마지막 편  (2) 2024.11.27
[20일차] 기본 애니메이션 효과 주기  (0) 2024.11.26
[18일차] 간단한 입력 폼 만들기 (HTML과 JS로)  (0) 2024.11.24
[17일차] 이벤트 처리와 이벤트 리스너  (2) 2024.11.23
[16일차] HTML 요소 선택 및 수정 (document.querySelector 등)  (0) 2024.11.22

관련글

티스토리툴바