const navBarItems = document.getElementById("navbar-items");
const toggleButton = document.getElementById("navbar-toggle");
const navbarOpenToggler = () => {
navBarItems.style.display =
navBarItems.style.display === "block" ? "none" : "block";
};
toggleButton.addEventListener("click", navbarOpenToggler);이 부분을 다음과 같이 간단하게 만들 수 있다.
$("#navbar-toggle").on("click", function () {
$("#navbar-items").toggle();
}); <body>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<script>
$(".item").html("hello");
</script>
</body>.html은 안에 들어가 있는 텍스트를 괄호 속의 문자열로 바꿔 주는 것이다.
.css('color', 'red')를 하면 색깔도 바뀐다.
그럼 onClick같은 건 어떻게 구현할까?
<body>
<button id="test-btn">버튼</button>
<script>
$("#test-btn").on("click", function () {});
</script>
</body>이렇게 하면 된다.
<body>
<div
id="box"
style="width: 200px; height: 100px; background: #4caf50"
></div>
<button id="btn">애니메이션 실행</button>
<script>
$("#btn").click(function () {
$("#box")
.slideUp(400)
.slideDown(400)
.fadeOut(400)
.fadeIn(400)
.animate({ width: "300px", height: "150px" }, 500);
});
</script>
</body>이렇게 간단한 애니메이션 코드를 넣을 수도 있다만 CSS 를 사용하는 것을 우선적으로 하자.
그럼 CSS를 어떻게 하냐고?
<body>
<button id="open">열기</button>
<div class="root">
<div class="modal">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<script>
$("#open").click(function () {
$(".modal").addClass("show");
});
$("#close").click(function () {
$(".modal").removeClass("show");
});
</script>
</body>이렇게 addClass, removeClass 하면 된다.
.modal {
background-color: pink;
padding: 24px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.modal.show {
opacity: 1;
pointer-events: auto;
}'코딩' 카테고리의 다른 글
| Zustand를 사용한 Todo List 만들기 (0) | 2025.08.05 |
|---|---|
| Zustand 사용 원칙과 예제 (0) | 2025.08.05 |
| Zustand 공부 시작 (0) | 2025.08.04 |
| HTML + JS + CSS 간단한 토글 Navigation Bar 만들기 (0) | 2025.07.29 |
| HTML + CSS + JS 알림 창 만들기 (0) | 2025.07.28 |
댓글