jQuery CSS 조작 (CSS Manipulation)
클래스 추가 및 제거 (Adding and Removing Classes)
소개
jQuery를 사용하면 DOM 요소에 CSS 클래스를 쉽게 추가하거나 제거할 수 있습니다. 이를 통해 동적인 스타일 변경이 가능합니다.
원리
jQuery는 클래스 조작을 위해 addClass(), removeClass(), toggleClass() 등의 메서드를 제공합니다. 이 메서드들은 선택한 요소의 클래스 목록을 변경합니다.
함수들
addClass(): 선택한 요소에 하나 이상의 클래스를 추가합니다.removeClass(): 선택한 요소에서 하나 이상의 클래스를 제거합니다.
예제들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 추가 및 제거</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 추가하거나 제거합니다.</p>
<button id="addClassButton">클래스 추가</button>
<button id="removeClassButton">클래스 제거</button>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("#textElement").addClass("highlight");
});
$("#removeClassButton").click(function(){
$("#textElement").removeClass("highlight");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 추가 및 제거</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 추가하거나 제거합니다.</p>
<button id="addClassButton">클래스 추가</button>
<button id="removeClassButton">클래스 제거</button>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("#textElement").addClass("highlight");
});
$("#removeClassButton").click(function(){
$("#textElement").removeClass("highlight");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 추가 및 제거</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 추가하거나 제거합니다.</p>
<button id="addClassButton">클래스 추가</button>
<button id="removeClassButton">클래스 제거</button>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("#textElement").addClass("highlight");
});
$("#removeClassButton").click(function(){
$("#textElement").removeClass("highlight");
});
});
</script>
</body>
</html>
클래스 토글 (Toggling Classes)
소개
클래스 토글은 특정 클래스가 요소에 존재하는지 여부에 따라 추가하거나 제거하는 기능입니다.
원리
toggleClass() 메서드는 클래스가 존재하면 제거하고, 존재하지 않으면 추가하는 방식으로 동작합니다.
함수들
toggleClass(): 선택한 요소의 클래스 존재 여부에 따라 클래스를 추가하거나 제거합니다.
예제들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 토글</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 토글합니다.</p>
<button id="toggleClassButton">클래스 토글</button>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("#textElement").toggleClass("highlight");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 토글</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 토글합니다.</p>
<button id="toggleClassButton">클래스 토글</button>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("#textElement").toggleClass("highlight");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 클래스 토글</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단에 클래스를 토글합니다.</p>
<button id="toggleClassButton">클래스 토글</button>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("#textElement").toggleClass("highlight");
});
});
</script>
</body>
</html>
인라인 스타일 변경 (Changing Inline Styles)
소개
jQuery를 사용하면 요소의 인라인 스타일을 직접 변경할 수 있습니다.
원리
css() 메서드를 사용하여 인라인 스타일 속성을 설정하거나 가져올 수 있습니다.
함수들
css(propertyName): 지정한 속성의 값을 가져옵니다.css(propertyName, value): 지정한 속성의 값을 설정합니다.
예제들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 인라인 스타일 변경</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 스타일을 변경합니다.</p>
<button id="changeStyleButton">스타일 변경</button>
<script>
$(document).ready(function(){
$("#changeStyleButton").click(function(){
$("#textElement").css("color", "blue");
$("#textElement").css("font-size", "20px");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 인라인 스타일 변경</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 스타일을 변경합니다.</p>
<button id="changeStyleButton">스타일 변경</button>
<script>
$(document).ready(function(){
$("#changeStyleButton").click(function(){
$("#textElement").css("color", "blue");
$("#textElement").css("font-size", "20px");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 인라인 스타일 변경</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 스타일을 변경합니다.</p>
<button id="changeStyleButton">스타일 변경</button>
<script>
$(document).ready(function(){
$("#changeStyleButton").click(function(){
$("#textElement").css("color", "blue");
$("#textElement").css("font-size", "20px");
});
});
</script>
</body>
</html>
CSS 속성 읽기 및 설정 (Reading and Setting CSS Properties)
소개
jQuery는 CSS 속성을 읽고 설정하는 기능을 제공하여 요소의 스타일을 동적으로 변경할 수 있게 합니다.
원리
css() 메서드를 사용하여 여러 속성을 동시에 설정하거나 특정 속성의 현재 값을 읽을 수 있습니다.
함수들
css(propertyName): 지정한 속성의 값을 가져옵니다.css(propertyName, value): 지정한 속성의 값을 설정합니다.css(properties): 여러 속성을 동시에 설정합니다.
예제들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery CSS 속성 읽기 및 설정</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 CSS 속성을 읽고 설정합니다.</p>
<button id="readCssButton">CSS 속성 읽기</button>
<button id="setCssButton">CSS 속성 설정</button>
<script>
$(document).ready(function(){
$("#readCssButton").click(function(){
alert("색상: " + $("#textElement").css("color"));
});
$("#setCssButton").click(function(){
$("#textElement").css({
"color": "green",
"font-size": "18px",
"background-color": "lightgray"
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery CSS 속성 읽기 및 설정</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 CSS 속성을 읽고 설정합니다.</p>
<button id="readCssButton">CSS 속성 읽기</button>
<button id="setCssButton">CSS 속성 설정</button>
<script>
$(document).ready(function(){
$("#readCssButton").click(function(){
alert("색상: " + $("#textElement").css("color"));
});
$("#setCssButton").click(function(){
$("#textElement").css({
"color": "green",
"font-size": "18px",
"background-color": "lightgray"
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery CSS 속성 읽기 및 설정</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="textElement">이 문단의 CSS 속성을 읽고 설정합니다.</p>
<button id="readCssButton">CSS 속성 읽기</button>
<button id="setCssButton">CSS 속성 설정</button>
<script>
$(document).ready(function(){
$("#readCssButton").click(function(){
alert("색상: " + $("#textElement").css("color"));
});
$("#setCssButton").click(function(){
$("#textElement").css({
"color": "green",
"font-size": "18px",
"background-color": "lightgray"
});
});
});
</script>
</body>
</html>