Mingg's Diary

2024-11-25

w3.css Active 클래스 추가 JavaScript를 사용하여 현재 요소에 Active 클래스를 추가하는 방법을 알아보자. 활성 요소 1단계) HTML 추가 <div> 요소의 클래스를 “mystyle”에서 “newone”으로 변경한다. <div id=”myDIV”> <button class=”btn”>1</button> <button class=”btn active”>2</button> <button class=”btn”>3</button> <button class=”btn”>4</button> <button class=”btn”>5</button> </div> 2단계) CSS 추가 /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; } /* Style the active class (and buttons on mouse-over) */ .active, .btn:hover { background-color: #666; color: white; } 3단계) JavaScript…

2024-11-24

How To – 클래스 변경

w3.css 클래스 변경 JavaScript를 사용하여 요소의 클래스 이름을 변경하는 방법을 알아보자. 클래스 변경 1단계) HTML 추가 <div> 요소의 클래스를 “mystyle”에서 “newone”으로 변경한다. <div id=”myDIV” class=”mystyle”> This is a DIV element. </div> <script> function myFunction() { const element = document.getElementById(“myDIV”); // Get the DIV element element.classList.remove(“mystyle”); // Remove mystyle class from DIV element.classList.add(“newone”); // Add newone class to DIV } </script>

2024-11-23

How To – 클래스 제거

w3.css 클래스 제거 JavaScript를 사용하여 요소에서 클래스 이름을 제거하는 방법을 알아보자. 클래스 제거 1단계) HTML 추가 이 예제에서는 버튼을 사용하여 id=”myDIV”인 <div> 요소에서 “mystyle” 클래스를 제거한다. <button onclick=”myFunction()”>Try it</button> <div id=”myDIV” class=”mystyle”> This is a DIV element. </div> 2단계) CSS 추가 지정된 클래스 이름의 스타일을 지정한다. .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } 3단계) JavaScript 추가 id=”myDIV”를 가진 <div> 요소를 가져와서 해당 요소에서 “mystyle” 클래스를 제거한다. function myFunction() { var element = document.getElementById(“myDIV”); element.classList.remove(“mystyle”);…

2024-11-22

How To – 클래스 추가

w3.css 클래스 추가 JavaScript를 사용하여 요소에 클래스 이름을 추가하는 방법을 알아보자. 클래스 추가 1단계) HTML 추가 id=”myDIV”로 div 요소에 클래스 이름을 추가한다(이 예에서는 버튼을 사용하여 클래스를 추가한다). <button onclick=”myFunction()”>Try it</button> <div id=”myDIV”> This is a DIV element. </div> 2단계) CSS 추가 지정된 클래스 이름의 스타일을 지정한다. .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } 3단계) JavaScript 추가 id=”myDIV”를 가진 <div> 요소를 가져와서 여기에 “mystyle” 클래스를 추가한다. function myFunction() { var element = document.getElementById(“myDIV”); element.classList.add(“mystyle”); }

2024-11-20

How To – 클래스 토글

w3.css 클래스 토글 JavaScript를 사용하여 요소에 클래스 이름을 추가하거나 알아보자. 클래스 전환 1단계) HTML 추가 id=”myDIV”인 div 요소에 클래스 이름을 추가할지 여부를 전환한다(이 예에서는 버튼을 사용하여 클래스 이름을 전환한다). <button onclick=”myFunction()”>Try it</button> <div id=”myDIV”> This is a DIV element. </div> 2단계) CSS 추가 토글할 클래스 이름을 추가한다. .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } 3단계) JavaScript 추가 id=”myDIV”를 갖는 <div> 요소를 가져와 “mystyle” 클래스 사이를 전환한다. function myFunction() { var element = document.getElementById(“myDIV”); element.classList.toggle(“mystyle”);…

2024-11-19

워드프레스 Google Site Kit에서 site not found 나올 때

Google Site Kit에서 site not found 나올 때 Google Site Kit을 사용하다가 중단하고 다시 사용하려고 할 때 설정이 완료 되지 않고 설정을 다시 하라고 나올 수 있다. 이 때 설정하려고 들어가면 site not found 라고 나온다. Reason 이전에 등록된 사이트라서 그렇게 나오는 것으로 확인된다. Reset 1. WordPress 관리자 페이지 접속 2. 사이트 킷 > 설정 > Admin Settings > 3. Reset Site Kit 클릭 4. 지침에 따라 재설정 완료 하면 정상적으로 사용이 가능하다.

2024-11-18

How To – 텍스트 전환

w3.css 텍스트 토글/스왑 JavaScript로 텍스트를 전환하는 방법을 알아보자. 요소의 텍스트 전환 1단계) HTML 추가 <button onclick=”myFunction()”>Click Me</button> <div id=”myDIV”>Hello</div> 2단계) JavaScript 추가 function myFunction() { var x = document.getElementById(“myDIV”); if (x.innerHTML === “Hello”) { x.innerHTML = “Swapped text!”; } else { x.innerHTML = “Hello”; } }

2024-11-17

How To – 다크 모드 전환

w3.css 다크 모드 전환 CSS와 JavaScript를 사용하여 다크 모드와 라이트 모드를 전환하자. 클래스 전환 1단계) HTML 추가 디자인을 토글하려는 콘텐츠를 저장해야 하는 모든 요소를 사용하자. 우리의 예에서는 <body>단순성을 위해 다음을 사용한다. <body> 2단계) CSS 추가 <body> 요소의 스타일을 지정하고 토글을 위한 .dark-mode 클래스를 만든다. body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } 3단계) JavaScript 추가 <body> 요소를 가져와 .dark-mode 클래스 사이를 전환한다. function myFunction() { var element = document.body; element.classList.toggle(“dark-mode”);…

2024-11-16

How To – 숨기기 및 표시 전환

w3.css 숨기기 및 표시 전환 JavaScript를 사용하여 요소를 숨기거나 표시하자. 요소 토글(숨기기/표시) 1단계) HTML 추가 <button onclick=”myFunction()”>Click Me</button> <div id=”myDIV”> This is my DIV element. </div> 2단계) JavaScript 추가 function myFunction() { var x = document.getElementById(“myDIV”); if (x.style.display === “none”) { x.style.display = “block”; } else { x.style.display = “none”; } }

2024-11-15

How To – 좋아요/싫어요 버튼을 전환

w3.css 좋아요와 싫어요 전환 CSS와 JavaScript를 사용하여 좋아요/싫어요 버튼을 전환하자. 요소 토글(숨기기/표시) 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Use an element to toggle between a like/dislike icon –> <i onclick=”myFunction(this)” class=”fa fa-thumbs-up”></i> 2단계) JavaScript 추가 function myFunction(x) { x.classList.toggle(“fa-thumbs-down”); }