💚chatGPT이용하기
수업시간에 새로운것을 알았는데 이건 학원일기에만 적기에 너무 아까워서 따로 보관하려고 한다.
챗gpt를 깨닫게 된 계기
퀴즈를 풀다가 배우지 않은 내용이 나왔다.
여기서 버튼을 누르면 흰 배경이 검은 배경으로 다시 토글을 누르면 흰 배경으로 바뀌도록 하는 문제였다.
html코드
<!-- css 넣기 -->
<style>
* {
padding: 0;
margin: 0;
margin: 0 auto;
}
#container {
width: 1200px;
background-color: beige;
margin: 0 auto;
text-align: center;
padding: 20px;
}
button {
width: 100%;
height: 50px;
margin-top: 10px;
font-size: 2em;
}
.dark {
color: white;
background-color: black;
}
.light {
color: black;
background-color: beige;
}
</style>
</head>
<body>
<div id="container">
<h1 id="content">JS classList</h1>
<!-- TODO: 연습문제 : .dark 클래스 있으면 .light 적용하고
없으면 dark 클래스를 적용하세요
-->
<!-- 힌트 : contain(), toggle() -->
<button onclick="setToggle()">토글</button>
</div>
<script src="./js/quiz_11.js"></script>
</body>html에서는 dark와 light클래스에 위와같은 속성들을 주었지만 button태그에는 아무 클래스가 없었다.
배우지않은 내용
- 그래서 나는 태그에 클래스가 을때 그 태그에 클래스를부여하는 js태그가 있는지 궁금했다.
- 또 원래 클래스에서 다른 클래스로 클래스를 바꿀수 있는지도 궁금하였다.
해결방법
구글링을 하면서 방법을 찾았는데 답이 잘안나왔다.
그때 문득 chatGPT가 떠올랐고 질문을 다음과 같이 했다.
https://chat.openai.com/share/5bdce45c-c22e-4fb5-8185-51c14e4c11c6
이렇게 물어보니 챗지피티가 배우지 않은 속성을 잘 찾아주었고 나는 그것들을 이용해서 if조건문을 이용해서 버튼을 누를때마다 색이 바꿀수 있도록 할 수 있었다.
js코드
function setToggle() {
let content = document.querySelector("#content");
if (!content.classList.contains('dark')) {
content.classList.toggle('dark');
}else{
content.classList.toggle('light');
};
};-
먼저 #content의 속성을 바꿔야해서 #content에 접근해주었다.
-
그리고 만약 #content의 속성이 아무것도 없으면 dark속성을 주고싶어 위와 같이 조건을 주었다.
여기서 chatGPT덕에 알게된 속성이 있다. 바로 classList.contains와 toggle(add와 remove도 있다.)이다. classList는 해당태그의 클래스에 접근하는 것으로 contains의 경우에는 괄호안의 이름으로 되어있는 클래스를 포함하는지 확인 할 수있게 한다. (나머지는 유추가능할것이다.)
- 마지막으로 속성이 다크일경우 light속성을 주기위해 else를 위와 같이 주었다.
결과
잘 실행되었다.
느낀점
html, css, js는 속성들이 워낙 많아서 필요한 속성들을 구글링을 잘해야한다. 그런데 이것은 쉬운 일이 아니다. 오늘도 js에서 필요한속성을 구글에서 찾는다고 힘이 들었다. 그런데 챗지피티를 이용하니 단번에 알려주었다. 시간과 노력을 아낀 셈이다.
물론 기본적인 지식이 없다면 물어볼 수가 없으니 기본적인 지식은 필요하지만 이것을 잘 이용하면 코딩실력도 빨리 늘고 코딩도 쉽게 할수 있을거 같다.
필요한 속성을 알고 싶거나, 말로는 설명이 되는데 이걸 코드로 작성하기 어렵다면 chatGPT에게 물어보는것도 좋은것 같다. 물론 여기서 끝나면 실력이 늘지 않을 것이다. chatGPT에게 설명을 해달라고 하면 자세하게 설명을 해주니 왜이렇게 되는지 깨닫고 어떻게 접근하는 것이 좋은지를 파악하는것이 실력향상에 도움이 될거같다.
