자바스크립트 알림창 박스 만들기, ChatGPT 코딩 선생님

 

 

마케팅 때문에 네이버 블로그에 글을 써보기 시작했지만, 글이 길어지니까 보기 싫어졌습니다. 멋있게  만들어진 웹사이트에서는 버튼 누르면 뿅 하고 움직이는 게 많았는데, 이런 건 어떻게 만들어지는 건지 궁금했습니다. 지루하지 않게 글을 읽게 만들려면, 글 중간중간에 신기한 장난감을 배치해 놔야 좋을 것 같습니다. HTML, CSS, 자바스크립트를 몇 번 공부해 봤으니, 이제 티스토리 블로그 HTML 모드에서 놀아봐야겠습니다. 뭐가 되고 뭐가 안되는지 테스트해봐야겠습니다. 겸사겸사 인간 선생님께 배운 걸 ChatGPT 선생님께도 물어봐야겠습니다.

 

일단 ChatGPT 선생님, 이미지 첨부하게 그림 하나 내놓으세요.

 

고양이 그려달라고 말한 적 없는데, 귀여운 척 하시는군요. 애교로 봐드리겠습니다.

 

자바스크립트 알림창 박스 만들기

 

요즘 ChatGPT가 코딩 다 해준다고 하길래, 대뜸 ChatGPT부터 실행해 봤는데 머리에 든 게 없으니 뭘 시켜야 할지도 모르습니다. 그래서 인간 선생님 코딩 교육 중에 제일 재밌어 보이는 걸로 발 담갔다 나왔습니다. HTML, CSS, 자바스크립트 배우고 나니, Node.js, firebase, pthon 이런 언어들도 재밌어지네요. 멀쩡한 직업 놔두고 나 이런 거 배우고 이런 거 할 줄 알게 됐다 티 내고 다니니 이상한 놈처럼 보이는 것 같습니다. 그냥 티스토리 HTML 모드에서 놀고 글 쓰고 해야겠습니다. 

 

onclick 은 HTML 태그에 다 넣을 수 있음!

 

<div class="alert-box">
    내 취미는 코딩. 딥러닝까지 얼마 안 남았다!
</div>

<button onclick="document.querySelector('.alert-box').style.display = 'none'; ">
	닫기
</button>

<button onclick="document.querySelector('.alert-box').style.display = 'block'; ">
	열기
</button>

<style>
    .alert-box {
        background-color: skyblue;
        padding: 20px;
        color: white;
        border-radius: 5px;
    }
</style>

 

인간 선생님의 가르침을 한글로 적은 다음 ChatGPT 선생님한테 테스트해봐야겠습니다. 

 

'닫기 버튼 누르면 alert-box 라는 클래스 찾아서 안 보이게 해 줘. 열기 버튼 누르면 alert-box라는 클래스 찾아서 보이게 해 줘.'라고 일 시키면 될 것 같습니다.

 

HTML 태그에 onclick="" 이라고 적고 그 안에 코드를 넣으면, 클릭했을 때 자바스크립트 코드가 실행됩니다. document.querySelector('.alert-box') 라고 적으면, class="alert-box" 라고 적은 부분을 찾아줍니다. 이어서 .style.display = 'none'이라고 적어주면, 안 보이는 스타일이 완성됩니다( .style.display = 'block' 이라고 적어주면 보이는 스타일이 완성됩니다).

 

티스토리 HTML 모드에 복사 붙여넣기 해보면 재밌을 거 같습니다.

 

내 취미는 코딩. 딥러닝까지 얼마 안 남았다!

 

아이 힘들어.

 

ChatGPT 코딩 선생님

 

ChatGPT 코딩 선생님은 항상 답변이 시원시원하십니다.

---

 

"물론이죠! 아래는 HTML과 JavaScript를 사용하여 ‘닫기’ 버튼을 누르면 ‘alert-box’ 클래스를 가진 요소를 숨기고, ‘열기’ 버튼을 누르면 다시 보이게 하는 코드입니다"

 

	<style>
		.alert-box {
			display: none;
			/* 여기에 alert-box 스타일 추가 */
		}
	</style>

	<button onclick="toggleAlertBox('block')">열기</button>
	<button onclick="toggleAlertBox('none')">닫기</button>

	<div class="alert-box">
		<!-- 여기에 alert 내용 추가 -->
		Alert box 내용이 여기에 들어갑니다.
	</div>

	<script>
		function toggleAlertBox(display) {
			var alertBox = document.querySelector('.alert-box');
			alertBox.style.display = display;
		}
	</script>

 

‘열기’ 버튼을 누르면 toggleAlertBox('block') 함수가 호출되어 ‘alert-box’ 클래스를 가진 요소가 보이게 됩니다. 반대로 ‘닫기’ 버튼을 누르면 toggleAlertBox('none') 함수가 호출되어 해당 요소가 숨겨집니다. 스타일과 alert box 내용은 필요에 따라 자유롭게 수정하실 수 있습니다. 도움이 되셨길 바랍니다!

---

 

이라고 설명해 주시는군요. 자바스크립트 공부하고 보니까 알아는 먹겠는데, 인간 선생님이 더 친절하게 잘 설명해 주셨다고 생각합니다. ChatGPT 선생님은 그냥 코딩 노예하시는 게 낫겠습니다. 

 

결론

 

티스토리 HTML 모드에서 onclick으로 자바스크립트 코드 넣는 거 잘 동작하는 거 확인. 글 쓰면서 종종 써먹어 봐야겠습니다. ChatGPT 선생님이 자꾸 function 문법, 변수 문법, 파라미터 문법 사용하시니까 다음 글들은 이 내용으로 정리해 봐야겠습니다. 이제 딥러닝 공부하러 가자.