JavaScript - CSS 변경

안녕하세요, 여러분! 오늘은 흥미로운 JavaScript 세계로 접어들어 JavaScript가 어떻게 동적으로 CSS를 변경할 수 있는지 배울 것입니다. 마법의 지팡이를 흔들어 webpage의 모습을瞬시에 변화시킬 수 있는 능력을 상상해 보세요 - 이제 그 능력을 열릴 것입니다! 그러므로, 상징적인 지팡이(키보드)를 손에 들고 시작해 보세요!

JavaScript로 CSS 변경하기

JavaScript는 우리에게 HTML 요소들의 CSS를 조작할 수 있는 강력한 도구를 제공합니다. 이 능력으로 우리는 사용자의 동작이나 다른 이벤트에 반응하는 동적인, 상호작용적인 웹 페이지를 만들 수 있습니다.

기본: CSS 속성에 접근하고 수정하기

먼저 기본기를 시작해 보겠습니다. JavaScript를 사용하여 CSS를 변경하려면 먼저 수정하고 싶은 요소를 선택해야 합니다. getElementById(), querySelector(), 또는 getElementsByClassName()와 같은 메서드를 사용하여 이를 할 수 있습니다.

다음은 간단한 예제입니다:

// 요소 선택
let myElement = document.getElementById('myDiv');

// 배경색 변경
myElement.style.backgroundColor = 'blue';

이 예제에서 우리는 ID가 'myDiv'인 요소를 선택하고 그 배경색을 파랑으로 변경하고 있습니다. 간단하죠?

하지만 기다리세요, 더 있습니다! 여러 속성을 동시에 변경할 수 있습니다:

let myElement = document.getElementById('myDiv');
myElement.style.backgroundColor = 'blue';
myElement.style.color = 'white';
myElement.style.padding = '10px';
myElement.style.borderRadius = '5px';

기억하세요, JavaScript를 사용하여 CSS를 변경할 때, kebab-case 대신 camelCase를 사용합니다. 그래서 background-color은 backgroundColor로 변합니다.

클래스 변경하기

occasionally, it's more efficient to change entire classes rather than individual properties. JavaScript allows us to do this too!

let myElement = document.getElementById('myDiv');

// 클래스 추가
myElement.classList.add('highlight');

// 클래스 제거
myElement.classList.remove('old-class');

// 클래스 토글 (없으면 추가, 있으면 제거)
myElement.classList.toggle('active');

이 접근 방식은 미리 정의된 스타일을 동적으로 적용하거나 제거하려는 경우 특히 유용합니다.

이벤트가 발생할 때 요소의 스타일 변경

이제 더 흥미로운 부분으로 넘어가겠습니다! 클릭, 마우스 오버, 키 입력과 같은 이벤트에 응답하여 스타일을 변경할 수 있습니다.

클릭 이벤트

다음은 버튼이 클릭될 때 색상을 변경하는 예제입니다:

let myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
this.style.backgroundColor = 'red';
this.style.color = 'white';
});

버튼이 클릭될 때마다 빨간색으로 변하고 텍스트 색상이 하얀색이 됩니다. 마법이죠?

마우스 오버 및 마우스 아웃 이벤트

Hover 효과를 만들어 보겠습니다:

let myDiv = document.getElementById('myDiv');

myDiv.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.1)';
this.style.transition = 'transform 0.3s';
});

myDiv.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});

이제 마우스를 div에 올리면 크기가 약간 커지고 마우스를 떼면 원래 크기로 돌아갑니다. 마치 div가 숨을 쉬는 것처럼!

HTML 요소의 CSS를 동적으로 변경하기

occasionally, we need to change styles based on certain conditions or user inputs. This is where JavaScript truly shines in manipulating CSS.

사용자 입력에 따라 스타일 변경

간단한 테마 스위처를 만들어 보겠습니다:

let themeSelect = document.getElementById('themeSelect');
let body = document.body;

themeSelect.addEventListener('change', function() {
switch(this.value) {
case 'light':
body.style.backgroundColor = 'white';
body.style.color = 'black';
break;
case 'dark':
body.style.backgroundColor = 'black';
body.style.color = 'white';
break;
case 'blue':
body.style.backgroundColor = 'lightblue';
body.style.color = 'darkblue';
break;
}
});

이 코드는 사용자가 테마를 선택하면 페이지의 색상이 변경됩니다. 마치 사용자가 웹사이트에 대한 칠하는 붓을 주는 것처럼!

애니메이션된 스타일 변경

스타일 변경 사이의 부드러운 전환을 만들 수도 있습니다:

let growButton = document.getElementById('growButton');
let myDiv = document.getElementById('myDiv');

growButton.addEventListener('click', function() {
myDiv.style.transition = 'all 0.5s ease-in-out';
myDiv.style.width = (myDiv.offsetWidth + 50) + 'px';
myDiv.style.height = (myDiv.offsetHeight + 50) + 'px';
});

버튼이 클릭될 때마다 div가 각 축에서 50ピクセル 커지며 부드러운 애니메이션을 가집니다.

JavaScript로 CSS 변경하는 방법

여기에서 논의한 주요 메서드를 요약한 표입니다:

메서드	설명	예제
직접 스타일 조작	개별 CSS 속성 변경	element.style.property = 'value'
classList.add()	요소에 CSS 클래스 추가	element.classList.add('className')
classList.remove()	요소에서 CSS 클래스 제거	element.classList.remove('className')
classList.toggle()	요소에서 CSS 클래스 토글	element.classList.toggle('className')
setAttribute()	'style' 포함한 모든 속성 설정	element.setAttribute('style', 'property: value;')

이 기술을 마스터하려면 연습이 중요합니다. 이 예제를 구현해 보고 실험해 보세요, 그러면 곧 프로처럼 동적인, 상호작용적인 웹 페이지를 만들 수 있을 것입니다!

결론적으로, JavaScript의 CSS 조작 능력은 반응형, 상호작용형 웹 경험을 만드는 데 많은 가능성을 열어줍니다. 간단한 색상 변경에서 복잡한 애니메이션까지, 그 힘은 여러분 손에 있습니다. 그러므로 실험하고 창의력을 발휘하세요! 행복한 코딩, 미래의 웹 마법사 여러분!

Credits: Image by storyset