728x90
반응형
✨ 이걸 왜 배워야 할까?
HTML과 CSS만으로는 정적인 웹페이지밖에 만들 수 없어.
"버튼을 눌렀을 때 팝업을 띄운다",
"탭을 클릭하면 내용이 바뀐다",
"스크롤하면 애니메이션이 나타난다" 같은 동적인 기능은 JavaScript 없이는 절대 불가능해.
그리고 이건 바로 프론트엔드 개발자의 핵심 기술이기도 해!
이번엔 실무에서 많이 쓰이는 세 가지 인터랙션을 실습해보자:
- 버튼 누르면 텍스트 바꾸기
- 탭 메뉴 구현하기
- 모달 창 열고 닫기
🧪 1. 버튼 누르면 텍스트가 바뀌는 기능
🎯 목표
“안녕하세요” 버튼을 누르면 → “반가워요!”로 바뀌게 하기
<!DOCTYPE html>
<html>
<head>
<title>버튼 인터랙션</title>
</head>
<body>
<h2 id="greeting">안녕하세요 😊</h2>
<button onclick="changeText()">클릭해보세요</button>
<script>
function changeText() {
document.getElementById("greeting").innerText = "반가워요! 👋";
}
</script>
</body>
</html>📌 innerText는 HTML 요소의 텍스트를 바꿔주는 JavaScript 속성이야.
🧪 2. 탭 메뉴 만들기
🎯 목표
"소개", "경력", "연락처" 버튼을 누르면 아래 내용이 바뀌는 탭 구현
<!DOCTYPE html>
<html>
<head>
<title>탭 기능</title>
<style>
.tab-content {
display: none;
}
.active {
display: block;
}
button {
margin-right: 10px;
}
</style>
</head>
<body>
<h2>내 정보</h2>
<button onclick="showTab('about')">소개</button>
<button onclick="showTab('career')">경력</button>
<button onclick="showTab('contact')">연락처</button>
<div id="about" class="tab-content active">
<p>저는 웹 개발을 배우는 중입니다.</p>
</div>
<div id="career" class="tab-content">
<p>현재 3개월차 개발자 지망생입니다.</p>
</div>
<div id="contact" class="tab-content">
<p>Email: test@example.com</p>
</div>
<script>
function showTab(tabId) {
const contents = document.querySelectorAll('.tab-content');
contents.forEach((el) => el.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
}
</script>
</body>
</html>📌 .tab-content는 기본적으로 숨기고, 클릭한 요소만 .active 클래스를 줘서 보여주는 방식이야.
🧪 3. 모달 창 열고 닫기
🎯 목표
버튼을 누르면 화면 중앙에 팝업(모달)이 뜨고, 닫기 버튼을 누르면 사라짐
<!DOCTYPE html>
<html>
<head>
<title>모달창 만들기</title>
<style>
.modal {
display: none;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -30%);
background-color: white;
padding: 30px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
border-radius: 8px;
z-index: 10;
}
.modal.active {
display: block;
}
.overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 5;
}
.overlay.active {
display: block;
}
</style>
</head>
<body>
<button onclick="openModal()">모달 열기</button>
<div id="overlay" class="overlay" onclick="closeModal()"></div>
<div id="modal" class="modal">
<p>이것은 모달창입니다 🧙♀️</p>
<button onclick="closeModal()">닫기</button>
</div>
<script>
function openModal() {
document.getElementById("modal").classList.add("active");
document.getElementById("overlay").classList.add("active");
}
function closeModal() {
document.getElementById("modal").classList.remove("active");
document.getElementById("overlay").classList.remove("active");
}
</script>
</body>
</html>
📌 오버레이 영역 클릭 시 닫히게 만들었고, classList.add/remove()로 보이게/숨기게 컨트롤했어.
💡 JavaScript DOM 조작 핵심 개념 정리
문법설명
| getElementById() | 특정 ID를 가진 HTML 요소 가져오기 |
| innerText | 요소의 텍스트 변경 |
| classList.add() / .remove() | 클래스 추가/제거로 스타일 조작 |
| onclick, addEventListener | 사용자 이벤트 연결 |
✅ 마무리하며
HTML은 구조, CSS는 스타일, 그리고 JavaScript는 웹페이지에 생명을 불어넣는 역할을 해요.
이 세 가지가 어우러지면, 우리가 평소 사용하는 인터랙티브한 웹사이트들이 만들어지는 거죠.
오늘 배운 버튼, 탭, 모달은 실무 UI의 기본 요소들이고, 앞으로 배울 **프레임워크(React, Vue)**의 동작 원리를 이해하는 데도 큰 도움이 될 거예요.
728x90
반응형
'IT관련정보 > [개발_입문]' 카테고리의 다른 글
| 💡 6편. 개발자 포트폴리오 제대로 만드는 법 – GitHub, 이력서, 개인 프로젝트까지 (1) | 2025.04.10 |
|---|---|
| 💡 5편. 코딩만 잘해선 부족하다! Git & GitHub으로 협업하는 개발자 되기 (0) | 2025.04.10 |
| 💡 [IT 입문자를 위한 기술 지도]3편. HTML 태그 마스터하기 + CSS로 예쁜 레이아웃 만들기 실습 (2) | 2025.04.09 |
| 💡 [IT 입문자를 위한 기술 지도]2편. HTML/CSS/JavaScript 기초 실습 – 나만의 웹페이지 직접 만들기! (1) | 2025.04.09 |
| 💡 [IT 입문자를 위한 기술 지도]1편: 개발자, 어디부터 시작해야 할까? (1) | 2025.04.09 |