1 분 소요

2022. 06. 16. 수업내용 정리

클래스 설정


  • 클래스 설정

    HTML 요소의 class 속성은 여러 개의 class 값을 가질 수 있습니다.

    제이쿼리는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공합니다.

    이를 통해 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있습니다.


    1. .addClass()

    2. .removeClass()

    3. .toggleClass()

    4. .hasClass()



    • 클래스의 추가 및 제거

      .addClass() 메소드로 클래스를 간단히 추가하고, .removeClass() 메소드로 클래스를 손쉽게 제거할 수 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Style</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.lined { 
			text-decoration: line-through;
			color: lightgray;
		}
	</style>
	<script>
		$(function() {
			$("#addBtn").on("click", function() {
				// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함.
				$("#first, #third").addClass("lined");
			});
			$("#removeBtn").on("click", function() {
				// id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함.
				$("#first, #third").removeClass("lined");
			});
		});
	</script>
</head>
    
<body>
    
	<h1>클래스의 추가 및 제거</h1>
	<p id="first">이 단락에 클래스를 추가해 보아요!</p>
	<p>이 단락에는 클래스를 추가하지 않아요!</p>
	<p id="third">이 단락에 클래스를 추가해 보아요!</p>
	<button id="addBtn">클래스 추가</button>
	<button id="removeBtn">클래스 제거</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼


      클래스 추가 버튼 입력 ▼

      image-20220617101005592

      클래스 제거 버튼 입력 ▼

      image-20220617101121634

      단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것입니다.

      또한, .toggleClass() 메소드를 이용하여 클래스의 추가와 제거를 번갈아 시행할 수도 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Style</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.lined { 
			text-decoration: line-through;
			color: lightgray;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.
				$("#first, #third").toggleClass("lined");
			});
		});
	</script>
</head>
    
<body>
    
	<h1>클래스의 토글</h1>
	<p id="first">이 단락에 클래스를 추가해 보아요!</p>
	<p>이 단락에는 클래스를 추가하지 않아요!</p>
	<p id="third">이 단락에 클래스를 추가해 보아요!</p>
	<button>클래스 토글</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220617101430076

      클래스 토글 버튼 입력 ▼

      image-20220617101458906



    • 클래스의 확인

      .hasClass() 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Style</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				// id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.
				var result = $("#target").hasClass("lined");
				$("#text").html(result);
			});
		});
	</script>
</head>
    
<body>
    
	<h1>클래스의 확인</h1>
	<p id="target" class="lined">hasClass() 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있습니다.</p>
	<button>클래스 확인</button>
	<p id="text"></p>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220617101616235

      클래스 확인 버튼 입력 ▼

      image-20220617101653420

태그:

카테고리:

업데이트:

댓글남기기

참고

Tip03

1 분 소요

CLI Command 정리 명령어 간단 정리..