CSS 속성 제어

1. 속성값 일고 변경/추가하기

• HTML 태그 요소에 적용된 특정 속성값을 얻기 위해서는 css() 함수를 사용
  $("요소").css("속성이름", "값");
  $("요소").css({
  "속성이름" : "값",
  "속성이름" : "값",
  "속성이름" : "값"
  });
  

2. CSS 클래스의 적용 여부 알기

• HTML 태그 요소의 특정 클래스 적용 여부는 hasClass() 메서드의 리턴값(boolean)으로 파악할 수 있음
  let 변수 = $("요소").hasClass("클래스 이름");

3. 클래스의 적용과 해제

• 요소의 특정 css클래스를 적용할 경우, addClass() 함수를 사용
• 두 개 이상의 클래스를 한 번에 적용할 경우 공백으로 구분하여 지정
  $("요소").addClass("클래스이름");
• HTML 태그 요소에 적용된 특정 CSS 클래스를 제거할 경우 removeClass()함수를 사용
• 두 개 이상의 클래스에 대한 처리일 경우 공백으로 구분
  $("요소").removeClass("클래스이름");

4. toggleClass();

• HTML 태그 요소에 CSS 클래스에 대한 적용과 해제를 자동으로 반복하고자 할 경우, toggleClass() 함수를 사용
• 두 개 이상의 CSS 클래스를 동시에 처리할 경우 공백으로 구분
  $("요소").toggleClass("클래스이름");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style type="text/css">
        .box1 {
            margin: 10px auto; border: 5px solid #ccc; padding: 30px; text-align: center;
        }

        .box2 {
            margin: 10px auto; border: 10px solid #ff00ff; background-color: #ff0; 
            padding: 25px; text-align: left; 
        }
    </style>
</head>
<body>
    <div id="box" class="box1"><h1>테스트 영역 입니다.</h1></div>
    <input type="button" id="btn1" value="(폰트) red" />
    <input type="button" id="btn2" value="(폰트) green" />
    <input type="button" id="btn3" value="(폰트) blue" />
    <input type="button" id="btn4" value="(배경) red" />
    <input type="button" id="btn5" value="(배경) green" />
    <input type="button" id="btn6" value="(배경) blue" />
    <input type="button" id="btn7" value="width=50%" />
    <input type="button" id="btn8" value="width=auto" />
    <input type="button" id="btn9" value="box1 클래스 적용" />
    <input type="button" id="btn10" value="box2 클래스 적용" />
    
    <script>
        $("#btn1").click(function(){
            $('#box').css("color", "tomato");
        });
        $("#btn2").click(function(){
            $('#box').css("color", "green");
        });
        $("#btn3").click(function(){
            $('#box').css("color", "powderblue");
        });

        // #btn0과 #btn10 -> #box에 적용되어있는 class 토글 처리
        $("#btn9, #btn10").click(function(){
            $("#box").toggleClass("box1 box2")
        });
    </script>
</body>
</html>

5. this의 용법

• $(this)는 현재 이벤트가 발생한 단 하나의 요소

6. this를 부정하는 not(this)

• 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킴
  

7. 여러 패턴 확인하기

-.btn 버튼을 갖고 있는 요소 중에서 #mybtn만 제외
$(".htn").not($("#mybtn")).css(...);

• 버튼 태그 중에서 세번째 요소만 제외
  $(".btn").not(".btn:eq(2)").css(...);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        /** 기본 초기화 */
        *               { padding: 0; margin: 0; }
        ul              { list-style: none;}
        .pull-left      { float: left; }
        .clearfix:after { content: ''; display: block; float: none; clear: both; }
        .hide           { display: none; }
        
        /** 탭 박스의 기본 크기와 중앙 정렬 및 상하 여백 */
        .tab { width: 500px; margin: 20px auto; }

        /** 개별 버튼에 대한 기본 크기와 가로 정렬 */
        .tab-button-item { width: 100px; height: 40px; }

        /** 현재 활성 탭의 배경 이미지 별도 처리 */
        .tab-button-item-link.selected { background: url("img/tab_selected.jpg"); }

        /** 탭 버튼의 기본 배경 처리와 글자 형태 처리 */
        .tab-button-item-link {
            background: url("img/tab.jpg");
            display: block;
            color: #222;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
        }

        /** 내용영역의 태두리처리 및 상단으로 -1px 이동시킴.
         *  버튼 영역과 1px 겹치게 처리해서 활성 탭이 뚫려 있는 효과 연출 */
        .tab-panel {
            border: 1px solid #9FB7D4;
            position: relative;
            top: -1px;
            padding: 20px 10px;
        }

        /** 탭 버튼의 초기화 및 레이어 띄우기 > 내용영역과 1px 겹쳐져야 한다. */
        .tab-button {
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- 탭의 전체 박스 -->
    <div class="tab">
        <!-- 탭 버튼 영역 -->
        <ul class="tab-button clearfix">
            <li class="tab-button-item pull-left">
                <a class="tab-button-item-link selected" href="#tab-page-1">HTML5</a>
            </li>
            <li class="tab-button-item pull-left">
                <a class="tab-button-item-link" href="#tab-page-2">jQuery</a>
            </li>
            <li class="tab-button-item pull-left">
                <a class="tab-button-item-link" href="#tab-page-3">Bootstrap3</a>
            </li>
        </ul>
        <!-- 내용영역 -->
        <div class="tab-panel">
            <div id="tab-page-1"><h3>탭 페이지 1</h3></div>
            <div id="tab-page-2" class="hide"><h3>탭 페이지 2</h3></div>
            <div id="tab-page-3" class="hide"><h3>탭 페이지 3</h3></div>
        <div>
    </div>
    <script>
         $(".tab-button-item-link").click(function(e){
            // href 페이지 이동 방지
            e.preventDefault();

            // 클릭된 요소(=this) 를 제외한 나머지(=not this)에게 selected 클래스 제거
            $(".tab-button-item-link").not(this).removeClass("selected");
            
            // 클릭된 요소에게 selected 클래스 적용
            $(this).addClass("selected");

            let target = $(this).attr('href');
            $(target).removeClass('hide');
            $(".tab-panel > div").not($(target)).addClass('hide');
        });
    </script>
</body>
</html>