JavaScript란? 초보자를 위한 쉽고 자세한 설명

GoGoComputer·2025년 1월 30일

JavaScript 개발자 자바스크립트 프로그래머

javaScript study

목록 보기

1/10

아직 JavaScript가 무엇이고, 왜 필요한지 감이 잘 안 오실 수 있습니다. 그래서 이번에는 가능한 한 쉽고 자세하게, 길게 풀어서 설명해 드리겠습니다. 차근차근 따라와 보세요!

1. 자바스크립트(JavaScript)란 무엇일까요?

1) '동적 약형 언어'라는 말의 의미

동적(dynamic): 코드가 실행되는 시점(런타임)에서 많은 것들이 결정된다는 뜻입니다. 예를 들어, 변수의 자료형이 고정되어 있지 않고, 실행 중에 유연하게 바뀔 수 있습니다.
약형(weakly typed): 변수의 자료형을 엄격히 구분하지 않는 언어라는 의미입니다. 예를 들어, 숫자를 문자열처럼 바꿔서 사용할 수 있기도 하고, 특별한 선언 없이도 변수가 자동으로 자료형을 바꿀 수 있습니다.

2) 런타임에 컴파일된다?

자바스크립트 코드는 우리가 작성한 그대로 바로 '인터프리트(해석)'되는 것이 전통적인 방식이었습니다. 하지만 요즘의 자바스크립트 엔진(예: 구글 크롬의 V8, 파이어폭스의 스파이더몽키 등)은 내부적으로 JIT(Just In Time) 컴파일 기법을 사용해서 코드를 실행 시점에 빠르게 기계어로 바꾼 뒤 수행합니다. 이를 흔히 '런타임에 컴파일된다'고도 표현합니다.

3) 왜 JavaScript가 생겼을까?

과거에는 웹페이지가 굉장히 정적이었습니다. 화면에 표시되는 정보가 바뀌려면 무조건 새로운 페이지를 서버에서 받아야 했죠.
JavaScript는 웹페이지가 '서버를 다시 거치지 않고도' 브라우저 안에서 직접 화면의 일부를 바꾸거나, 사용자의 입력에 즉각 반응하고, 애니메이션 등을 구현할 수 있도록 도와줍니다. 이렇게 웹페이지를 더 '동적'이고 '반응적'으로 만들어 주는 도구로서 탄생했습니다.

4) JavaScript vs Java

둘은 완전히 다른 언어입니다.
이름만 비슷할 뿐, 문법과 철학, 동작 방식이 크게 다릅니다.
원래 JavaScript는 탄생 당시 LiveScript라는 이름이었는데, 당시 인기 있던 Java의 이름을 일부러 따서 'JavaScript'로 바꿔 홍보 효과를 노렸습니다.
이 때문에 초보자 분들이 “JavaScript가 Java 기반인가?” 오해를 많이 하시지만, 공통점은 거의 없으니 안심하셔도 됩니다.

2. 웹페이지와 JavaScript의 관계

1) 전통적인 웹 동작 방식

사용자가 웹브라우저(크롬, 사파리, 엣지 등)를 실행합니다.
브라우저 주소창에 URL을 입력하거나, 검색 결과를 클릭합니다.
브라우저는 서버에 “이 페이지를 달라!”고 요청(리퀘스트)합니다.
서버는 HTML 파일(및 필요한 CSS, 이미지 등)을 찾아서 응답(리스폰스)합니다.
사용자의 브라우저가 이 HTML을 해석해 화면에 표시합니다.

이 방식은 서버에서 새로운 정보나 페이지를 받아오려면 항상 브라우저 → 서버로 요청을 다시 보내야 했습니다. 예를 들어, 상품 주문 페이지에서 '주문하기' 버튼을 누르면, 서버가 주문 데이터를 처리하고, 그 결과를 포함한 새로운 HTML 페이지를 돌려주는 식이죠.

2) JavaScript가 가져온 변화

JavaScript는 이미 로드된 웹페이지를 통째로 새로 받아오지 않아도, 브라우저 안에서 HTML 내용을 즉시 바꿀 수 있습니다.
사용자가 버튼을 클릭하면, 클릭한 순간에 화면 일부만 동적으로 변경해주는 식입니다.
예: 메뉴가 접히고 펼쳐진다거나, 입력한 데이터를 실시간으로 확인한다거나.
서버와 통신도 비동기(Asynchronous) 방식으로 할 수 있습니다. Ajax나 fetch 같은 기능을 써서 백그라운드에서 데이터를 받아온 뒤, 화면만 바꿔줄 수 있게 된 거죠.
이렇게 새 요청 → 새 페이지 전체 로드 라는 오래된 흐름을 줄여, 사용자 경험(UX)이 훨씬 부드러워지고 빠르게 느껴집니다.

3. 브라우저 말고도 실행된다고?

JavaScript는 원래 브라우저 전용 언어처럼 보였지만, 사실은 브라우저가 아닌 다른 환경에서도 실행할 수 있습니다.
예: Node.js, Deno 등
Node.js를 이용하면 JavaScript로 서버를 만들 수도 있고, 다양한 시스템 도구나 애플리케이션을 만들 수도 있습니다.
즉, JavaScript는 지금은 단지 “웹페이지용 스크립트”가 아니라, 범용 프로그래밍 언어로도 널리 쓰이고 있습니다.

4. 정리해 보면

JavaScript는
- 동적 약형 언어입니다. 변수나 자료형을 엄격하게 관리하기보다는, 실행 도중에 바뀔 수 있습니다.
- 브라우저, 서버, 다양한 환경에서 실행될 수 있습니다.
- 웹페이지를 더 반응적이고 동적으로 만들기 위해 처음 탄생했습니다.
웹페이지에서의 역할
- HTML과 CSS가 웹페이지의 구조, 스타일을 결정한다면, JavaScript는 사용자 입력에 맞춰 ‘즉각적으로’ 화면 일부를 수정하거나 추가 기능을 수행하여 인터랙션을 담당합니다.
- 더 이상 페이지 전체를 리로드할 필요 없이, 부분 업데이트가 가능해집니다.
Java와는 별개
- 이름만 비슷할 뿐, 문법도 철학도 다릅니다.
- LiveScript 시절에 자바의 인기 덕을 보고자 이름을 잠시 'JavaScript'로 바꿨을 뿐이죠.

5. 앞으로 JavaScript를 배울 때

기본 문법부터 시작해보세요.
변수 선언, 조건문, 반복문, 함수, 객체(Object), 배열(Array) 등을 익히시면 좋습니다.
브라우저에서 실행될 때는 어떻게 HTML 요소(문서 객체 모델, DOM)를 선택하고 조작하는지를 배워야 합니다.
- 예: document.getElementById("…")
이벤트 처리(버튼 클릭, 키보드 입력 등)와 같은 동적인 동작을 구현하는 방법을 배워보세요.
데이터를 서버와 주고받는 Ajax, fetch API 등을 익히면, 페이지를 새로고침하지 않고도 서버에서 데이터를 가져와 표시할 수 있습니다.
Node.js 같은 환경에서는 파일 읽기, 서버 통신, 데이터베이스 연동 등 다양한 백엔드 작업을 JavaScript로 처리할 수도 있습니다.

결론

JavaScript는 웹페이지를 단순히 '보고 끝내는' 것이 아니라, 사용자와의 실시간 상호작용을 가능케 해 준 언어입니다.
HTML과 CSS가 정적인 구조와 디자인을 담당한다면,
JavaScript는 ‘움직임’과 ‘반응’, ‘동적 기능’을 담당한다고 생각하시면 이해하기 쉽습니다.

이제부터 JavaScript를 배우실 때, 다음과 같은 점을 기억하시면 좋습니다:

웹페이지는 서버가 보내주는 HTML에 기반을 두지만, 그 후의 변경과 인터랙션을 JavaScript가 도맡아서 처리한다.
JavaScript는 더 이상 브라우저만의 언어가 아니고, 백엔드나 모바일 앱 개발 등에서도 활용 범위가 넓어졌다.
JavaScript는 Java와 달리 문법, 철학, 타입 관리 방식이 확연히 다르다.

이렇게 전반적인 개념을 조금 길게, 쉽게 풀어봤습니다. 이제 어느 정도 “아, JavaScript가 이런 언어구나!” 하고 감이 잡히셨기를 바랍니다. 앞으로 구체적인 예제 코드나 실습을 통해, 실제로 웹페이지가 어떻게 동적으로 변하는지 체험해 보시면 훨씬 이해가 빠를 거예요.

이해가 잘 되셨길 바라며, 더 궁금한 점이 있다면 언제든 질문해 주세요!

아직 낯선 내용이 많아 보이실 수 있지만, 이제 이 예시를 통해 “JavaScript를 실제 웹페이지에 어떻게 적용하는지”를 조금 더 구체적으로 이해해 보겠습니다. 설명이 길지만 천천히 따라와 보세요!

1. 폴더와 파일 구조 살펴보기

여러분께서 받으신 예시 프로젝트에는 다음과 같은 구성요소가 있습니다.

index.html 파일
assets 폴더
- images 폴더 (이미지가 들어 있음)
- styles 폴더 (CSS 파일들이 들어 있음)
- scripts 폴더 (JavaScript 파일이 들어 있음)
info 폴더 (따로 만들어둔 HTML 파일들이 들어 있음)

이 외에도 .gitignore나, 편집기 관련 설정 파일 등이 있을 수 있지만,
이들은 버전 관리나 편집기 설정을 위한 것으로 웹페이지 자체와는 무관합니다.
그러니 무시하셔도 괜찮아요.

1) index.html 파일

프로젝트의 ‘메인 페이지’라고 볼 수 있습니다.
이 파일을 더블클릭하거나, 브라우저에 드래그 앤 드롭해서 열면 웹브라우저가 실행되고, HTML 구조와 연결된 CSS 스타일(및 JavaScript)을 통해 실제 웹페이지가 보이게 됩니다.

2) assets 폴더

styles 폴더: app.css 등의 스타일(CSS) 파일을 보관합니다.
images 폴더: 웹페이지에서 사용할 이미지(프로필 사진 등)가 들어 있습니다.
scripts 폴더: 실제 JavaScript 코드가 들어 있는 app.js 파일이 있습니다.

3) info 폴더

dynamic.html, weakly-typed.html 등 추가 설명을 담은 개별 HTML 파일들이 들어 있습니다.
원래는 이 파일들을 링크로 연결해, 사용자가 클릭하면 새 페이지로 이동하게 만들 수 있습니다.

2. 웹페이지의 기본 동작 (전통적인 방식)

원래 웹페이지에서 특정 링크를 클릭하면,
클릭된 링크의 경로(예: info/dynamic.html)로
브라우저가 다시 서버에 요청을 보냅니다.
서버는 해당 HTML 파일을 찾아서 브라우저로 돌려주고,
브라우저는 새 페이지 전체를 새로 띄우게 됩니다.

예: index.html 페이지에서 dynamic.html 링크를 클릭 → 서버에 새 요청 → dynamic.html 전체가 응답으로 옴 → 브라우저가 새로운 페이지를 표시

이 방식도 전혀 문제가 없지만,
사용자 입장에서는 페이지가 전환되면서 끊기는 느낌이 있을 수 있고,
페이지 전환 로딩 때문에 기다려야 하는 경우가 생길 수도 있습니다.

3. “오버레이”와 JavaScript의 등장

1) 오버레이(Overlay)란?

새 페이지를 불러오는 대신, 현재 보고 있는 페이지 위에 덧씌워져서 새로운 내용을 보여주는 기술입니다.
흔히 “팝업창” 혹은 “모달(Modal) 창” 형태로 표현됩니다.

2) 왜 오버레이인가?

전체 페이지를 바꾸지 않고, 필요한 정보만 브라우저 화면에 추가로 표시합니다.
사용자 입장에서는 현재 페이지에서 갑자기 창이 하나 뜨는 형태여서, 흐름이 끊기지 않고 직관적입니다.
웹 애플리케이션이 더 빠르고 부드럽게 느껴집니다.
오늘날 대부분의 모던 웹사이트에서는, 페이지 전체 리로드 없이 일부만 갱신하거나, 팝업 모달을 띄우는 UI가 매우 흔합니다.

3) 오버레이는 어떻게 만들까?

JavaScript가 필요합니다.
HTML이나 CSS만으로는 ‘어떤 동작(클릭 이벤트 등이 일어났을 때 어떻게 처리해야 하나)’을 정의하기가 어렵습니다.
JavaScript는 “버튼을 클릭하면 어떤 요소(창, 모달) 를 보여주자”라든지, “닫기 버튼을 누르면 다시 숨기자” 같은 동적인 로직을 직접 만들어냅니다.

4. 예시: index.html에 JavaScript 연결하기

이제 구체적인 예시를 살펴볼게요.

1) HTML에서 JavaScript 파일 불러오기

index.html 파일을 텍스트 편집기(메모장, VSCode 등)로 열어봅시다.
<head> 태그 안에 보통 CSS 파일을 불러오는 <link> 태그들이 있죠. 그 아래나 적절한 위치에 <script> 태그를 추가합니다. 예시:

<head>
  <link rel="stylesheet" href="assets/styles/app.css" />
  <!-- 여기에 스크립트 태그 추가 -->
  <script src="assets/scripts/app.js" defer></script>
</head>

src="assets/scripts/app.js":
이 경로(app.js)에 우리가 직접 작성한 JavaScript 코드가 들어 있습니다.
defer 속성:
브라우저가 HTML 해석을 끝낸 뒤에 JavaScript를 실행하게 해줍니다.
(초보 시절엔 굳이 깊이 이해하지 않아도 됩니다. “브라우저가 HTML 다 읽고 나서 JS 파일을 실행해 주는구나” 정도로만 알아두세요.)

2) 기존 링크를 “오버레이”로 전환하기

원래 dynamic.html이나 weakly-typed.html에 대한 링크는 이렇게 되어 있을 겁니다:

<a href="info/dynamic.html">dynamic</a>
<a href="info/weakly-typed.html">weakly typed</a>

이대로라면 클릭 시 새 페이지(dynamic.html)로 이동해 버립니다.
우리는 오버레이로 내용을 보여주고 싶으니, 다음과 같은 작업을 합니다.

href를 #(해시 기호) 로 바꿔, 새 페이지로 이동하지 않도록 만듭니다.
필요한 텍스트(즉, dynamic.html 안에 있는 내용을 가져올 텍스트)를 data-text 같은 커스텀 속성으로 붙입니다.
오버레이가 필요한 앵커 태그에 공통적으로 class="info-modal" 등을 부여합니다.

<a href="#" class="info-modal" data-text="여기에 dynamic.html의 텍스트...">dynamic</a>
<a href="#" class="info-modal" data-text="여기에 weakly-typed.html의 텍스트...">weakly typed</a>

예시처럼 dynamic.html 파일을 열어서 <p>...</p> 내용을 복사해, data-text="..." 안에 넣을 수도 있습니다.
단, HTML 태그나 줄바꿈 기호가 있으면 제대로 동작하지 않을 수 있으니, 그냥 텍스트만 삽입하는 게 좋습니다.

이렇게 하면, 클릭 시 JavaScript가 data-text에 담긴 내용을 읽어다가 모달창(오버레이)에 표시하게 만들 수 있습니다.

5. app.js는 뭘 하는 파일인가?

assets/scripts/app.js 파일을 열어보면, 초보자분께는 다소 낯선 문법들이 있을 겁니다.

예: document.querySelectorAll(...)
예: forEach, addEventListener
예: classList.add('open') 등등…

자세한 내용은 차근차근 배워가실 텐데, 지금은
“아, 이 파일 안에는 오버레이(모달) 요소를 화면에 띄우거나 숨기는 로직이 들어 있구나” 정도로만 이해해 주시면 돼요.

핵심 아이디어

HTML에서 <a href="#" class="info-modal" data-text="..."> 태그들을 찾는다.

사용자가 이 링크를 클릭하면, data-text에 들어 있는 내용을 기반으로 팝업(오버레이) 창을 생성하여 화면에 띄운다.

배경을 클릭하거나 닫기 버튼을 누르면, 다시 창을 없앤다.

6. 실행해 보면 어떻게 되나요?

index.html을 브라우저로 엽니다.
(이미 app.js를 <script> 태그로 불러온 상태라고 가정)
이제 화면에서 dynamic 이나 weakly typed 링크를 클릭하면,
- 전체 페이지 이동 없이,
- 화면 중앙에 팝업(오버레이/모달) 이 표시되면서,
- data-text에 담긴 내용이 팝업창 안에 표시될 것입니다.
모달 바깥쪽이나 닫기 버튼을 클릭하면 팝업이 사라집니다.

이것이 전통적인 페이지 전환과의 큰 차이점입니다.
서버로 가서 새 HTML 페이지를 가져오지 않고,
이미 로드된 페이지 안에서 JavaScript가 동적으로 화면을 변경하므로,
사용자 경험이 훨씬 자연스럽고 빠르게 느껴집니다.

7. 여기서 드러나는 JavaScript의 특징

여기까지 따라오셨다면,
“아, JavaScript가 이런 식으로 HTML에 새 기능을 붙이거나, 화면을 동적으로 변경할 수 있구나!”
라는 느낌을 잡으셨을 겁니다.

동적 약형 프로그래밍 언어
- 자바스크립트는 타입(자료형)을 엄격히 지정하지 않습니다.
- 실행 도중에 변수가 숫자가 되기도 하고 문자열이 되기도 합니다.
해석형(Interpreted) 언어이면서, 요즘은 런타임(JIT) 컴파일이 함께 이루어짐
- C나 Java 같은 언어는 코드를 작성하고 나서 컴파일 과정을 거친 뒤에 실행 파일이 만들어집니다.
- JavaScript는 대체로 실행 시점(브라우저가 페이지를 읽는 시점)에 곧바로 해석(또는 JIT 컴파일)되어 동작합니다.
호스팅(Hosted) 언어
- 즉, 브라우저라는 ‘호스트 환경’에서 동작할 수도 있고,
- Node.js와 같은 환경에서 서버 쪽 코드를 짤 수도 있습니다.
- 다양한 곳에서 JavaScript를 실행할 수 있다는 뜻입니다.
브라우저에서 DOM 제어
- DOM(Document Object Model)은 브라우저가 HTML을 해석해 만들어내는 트리 구조입니다.
- JavaScript는 DOM을 통해 HTML 요소(태그)들을 선택하고, 내용을 수정하며, 스타일을 바꾸고, 이벤트(클릭, 키보드 입력 등)에 반응하게 할 수 있습니다.

8. 결론 및 앞으로의 학습 방향

예시 프로젝트를 통해, JavaScript가 새 HTML 페이지를 불러오지 않고도
화면 일부를 동적으로 바꿀 수 있음을 확인했습니다.
오늘날 대부분의 웹사이트가 자바스크립트를 사용하는 이유는
이처럼 사용자 경험(UX)을 크게 향상시켜 주기 때문입니다.
앞으로 자바스크립트 문법과 DOM 조작, 이벤트 처리, 비동기 통신(AJAX, fetch) 등을 배워 가시면,
이런 동적 기능들을 직접 구현해 보실 수 있게 됩니다.

“동적, 약형, 해석형, 호스팅된 언어”란?

이 개념들은 아직 추상적으로 느껴질 수 있어요.
다음 단계에서 이 용어들을 하나씩 풀어서 이해하게 될 겁니다.

동적(Dynamic) 언어: 실행 시간(런타임)에 많은 것들이 결정됨.
약형(Weakly Typed) 언어: 변수 타입이 엄격하게 고정되지 않고 유연함.
해석형(Interpreted) 언어: 실행 시점에 코드를 바로 읽고 실행(또는 즉시 컴파일)함.
호스팅된(Hosted) 언어: 브라우저, Node.js 등 특정 환경(호스트)에서 동작하며, 환경별로 제공하는 기능을 활용함.

걱정하지 마세요! 개념만 들어두시고, 직접 코드 예제를 반복하다 보면
어느 순간 “아, 이걸 이렇게 표현하는 거였구나.” 하고 머릿속에 연결이 되실 겁니다.

정리

폴더 구조와 index.html, assets/scripts/app.js 파일을 연결해,
오버레이(모달) 형태로 내용을 표시하는 예시를 살펴봤습니다.
기존의 전통적인 “링크 → 새 페이지 로드” 방식을 대체하거나 보완하는 수단으로,
JavaScript가 동적으로 웹페이지를 바꾸는 모습을 확인했습니다.
이 과정을 통해 JavaScript란 무엇인가? 왜 필요한가? 에 대한 답을 조금 더 실제 사례로 이해할 수 있게 되었습니다.
이어서 “동적 언어, 약형 언어, 해석형 언어, 호스팅된 언어”가 어떤 의미인지,
그리고 실제로 JavaScript 문법을 어떻게 배우는지, 하나씩 익히면 됩니다.

이처럼 아주 간단한 예시 하나만으로도, JavaScript가 어떤 문제를 해결해주는지 알 수 있죠.
앞으로 배울 내용이 많지만,
“아, 우리는 이렇게 더 나은 사용자 경험을 제공하기 위해 JavaScript를 쓰는 거구나!”
라는 점을 기억하시면, 학습 동기가 훨씬 커지실 거예요.

이제부터 본격적으로 JavaScript 문법과 원리를 배워나가면서,
위와 같은 오버레이 외에도 애니메이션, 비동기 데이터 로딩, 사용자 입력 검증 등등
수많은 동적 기능들을 직접 만들어 보실 수 있습니다.

조금씩 해보시면서 부딪히고, 또 해결하다 보면 “JavaScript가 이렇게 편리한 도구였구나!” 하고 느끼실 날이 곧 오실 겁니다.

궁금한 점이나 막히는 부분이 생기면 언제든 질문해 주세요!

아래 예시는 “index.html”에서 클릭 시 새로운 페이지 전체를 로드하지 않고, 자바스크립트를 통해 오버레이(모달 창) 형태로 내용을 표시하도록 구현한 간단한 예시입니다.

예시 프로젝트 구성

폴더 구조 예시(최소한으로 구성):

my-example-project/
├─ index.html
├─ info/
│   ├─ dynamic.html
│   └─ weakly-typed.html
└─ assets/
    ├─ styles/
    │   └─ app.css
    └─ scripts/
        └─ app.js

주의: 실제로는 images 폴더나 기타 파일이 있을 수 있지만, 여기서는 핵심 코드만 담은 최소 예시 구조를 보여드립니다.

1) index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript Overlay Example</title>
  <!-- CSS 연결 -->
  <link rel="stylesheet" href="assets/styles/app.css" />
  <!-- 자바스크립트 연결 (defer 속성 주의) -->
  <script src="assets/scripts/app.js" defer></script>
</head>
<body>

  <h1>예시 페이지</h1>
  <p>
    이 페이지에서 <strong>JavaScript</strong>로 오버레이(모달) 창을 띄우는 기능을 시연합니다.
  </p>

  <p>
    <!-- a 태그(링크)인데, href="#"로 설정하고,
         클릭 시 모달을 띄우기 위해 data-text 속성에 내용을 담습니다. -->
    <a 
      href="#" 
      class="info-modal" 
      data-text="여기는 dynamic.html의 텍스트라고 가정합니다. 
                JavaScript를 통해 이 내용이 모달에 표시됩니다."
    >
      dynamic
    </a>
    |
    <a 
      href="#" 
      class="info-modal" 
      data-text="여기는 weakly-typed.html의 텍스트라고 가정합니다.
                타입이 엄격하지 않고 유연한 자바스크립트 특징을 설명합니다."
    >
      weakly typed
    </a>
  </p>

  <p>
    원래라면 <code>info/dynamic.html</code>나 <code>info/weakly-typed.html</code>로 
    직접 이동했을 텐데,<br>
    이제는 새로운 페이지 전체를 불러오지 않고,<br>
    <strong>오버레이 창</strong>을 이용해 내용을 확인할 수 있습니다.
  </p>

</body>
</html>

href="#"로 지정하여 페이지 새로고침/이동을 막습니다.

data-text 속성에 표시할 텍스트(본문 내용)를 넣어두고,

class="info-modal"로 JavaScript가 인식할 수 있게 만듭니다.

2) app.css (CSS)

/* assets/styles/app.css */

/* 본문 기본 스타일 */
body {
  font-family: sans-serif;
  margin: 20px;
  line-height: 1.6;
}

/* 모달 배경(뒷배경) */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 반투명 검정색 배경 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 기본적으로 숨겨놓기 */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 다른 요소 위에 표시하기 위함 */
}

/* 모달 열림 상태에서 display를 바꿔줌 */
.modal-backdrop.open {
  display: flex;
}

/* 실제 모달 창 */
.modal {
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 닫기 버튼 */
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.modal-close:hover {
  color: red;
}

.modal-backdrop가 오버레이 배경을 담당합니다.

.modal-backdrop.open 클래스가 붙으면 display: flex;로 나타나도록 했습니다.

.modal은 실제 창(컨테이너) 역할을 하며, .modal-close는 X 버튼 스타일을 정의합니다.

3) app.js (JavaScript)

// assets/scripts/app.js

document.addEventListener('DOMContentLoaded', function() {
  // (1) .info-modal 클래스를 가진 모든 링크(앵커태그) 찾기
  const infoLinks = document.querySelectorAll('a.info-modal');

  // (2) 오버레이(배경) 역할을 할 div 생성
  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';

  // (3) 실제 모달 창(div) 생성
  const modal = document.createElement('div');
  modal.className = 'modal';

  // (4) 모달 닫기 버튼 생성
  const closeButton = document.createElement('button');
  closeButton.className = 'modal-close';
  closeButton.innerText = '✕'; // 또는 "닫기"

  // (5) 모달 안에 내용이 들어갈 영역(div) 생성
  const modalContent = document.createElement('div');

  // (6) 구조 조합: 모달 안에 (닫기버튼, 컨텐츠) -> 백드롭에 모달 -> body에 백드롭
  modal.appendChild(closeButton);
  modal.appendChild(modalContent);
  backdrop.appendChild(modal);
  document.body.appendChild(backdrop);

  // (7) 각 링크를 클릭했을 때 이벤트 처리
  infoLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      event.preventDefault(); // a 태그의 기본 동작(페이지 이동) 막기
      // data-text 속성값 읽어오기
      const text = link.getAttribute('data-text');
      // 모달에 해당 텍스트를 넣기
      modalContent.textContent = text;
      // 모달 열기 (backdrop에 .open 클래스 추가)
      backdrop.classList.add('open');
    });
  });

  // (8) 모달 닫기 동작
  // 배경을 누르면 닫히도록
  backdrop.addEventListener('click', function() {
    backdrop.classList.remove('open');
  });
  // 모달 자체를 클릭했을 땐 이벤트가 배경으로 전달되지 않도록(닫히지 않도록)
  modal.addEventListener('click', function(event) {
    event.stopPropagation();
  });
  // 닫기 버튼 누르면 모달 닫기
  closeButton.addEventListener('click', function() {
    backdrop.classList.remove('open');
  });
});

핵심 포인트

document.querySelectorAll('.info-modal')로 해당 링크들을 모두 가져옴

링크 클릭 시 event.preventDefault()로 페이지 이동을 막고,

data-text 속성에서 텍스트를 꺼내 모달 창 내용으로 넣음

.modal-backdrop에 .open 클래스를 붙여서 표시/숨김 제어

4) info 폴더 안의 예시 (선택사항)

실제로 info/dynamic.html 이나 info/weakly-typed.html을 따로 열어보면, 다음처럼 일반 HTML이 있을 수 있습니다. 이 예시에서는 페이지 이동 없이 data-text만 발췌해 사용하는 용도이므로, 꼭 필요하지는 않습니다. 그래도 참고용으로 보여드리면:

info/dynamic.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dynamic</title>
</head>
<body>
  <h2>Dynamic Page 예시</h2>
  <p>
    이 페이지는 JavaScript의 동적(Dynamic) 특성을 설명합니다. <br>
    하지만 오버레이로 보여주려면 data-text 속성에 직접 텍스트를 붙여넣고, <br>
    이 파일을 굳이 새로 열지 않아도 됩니다.
  </p>
</body>
</html>

info/weakly-typed.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Weakly Typed</title>
</head>
<body>
  <h2>Weakly Typed Page 예시</h2>
  <p>
    JavaScript는 약형(Weakly Typed) 언어이므로, 변수의 타입을 엄격히 고정하지 않고, <br>
    실행 도중에 유연하게 타입이 바뀔 수 있습니다.
  </p>
</body>
</html>

만약 직접 링크로 이동하려면 <a href="info/dynamic.html">dynamic</a> 처럼 원래대로 되돌리시면 됩니다.
하지만 현재 예시에서는 이 파일들을 새 페이지로 오픈하지 않고, data-text에 담아서 모달로만 띄우고 있습니다.

실행해 보기

이 구조 그대로 로컬에 파일/폴더를 만들어 둡니다.
index.html을 크롬, 사파리, 파이어폭스 등 브라우저로 열어보세요(더블클릭 혹은 드래그 앤 드롭).
페이지에 보이는 dynamic / weakly typed 링크를 클릭하면,
- 새로운 페이지로 이동하지 않고,
- 화면 중앙에 오버레이(모달 창) 가 뜨며,
- data-text에 넣어둔 내용이 표시됩니다.
뒷배경(회색 부분)을 클릭하거나, 오른쪽 상단의 ✕ 버튼을 누르면 창이 닫힙니다.

정리

index.html: 메인 페이지 (링크와 <script> 연결)
app.css: 모달(오버레이)와 관련된 간단한 스타일
app.js: 링크 클릭 시 오버레이를 띄우고, 닫을 수 있도록 동작을 제어
(선택) info/*.html: 원래 별도 페이지였으나, 예시에서는 data-text로 내용만 추출하여 사용

이 코드 구조를 통해, 새로운 HTML 페이지를 로드하지 않고도
JavaScript로 이미 로드된 페이지에 “동적”인 모달 창을 띄우는 방법을 이해하실 수 있습니다.

이렇게 자바스크립트를 통해 “화면 일부만 갱신”하거나 “오버레이 창을 띄우는 것”이,
요즘 모던 웹에서 사용자 경험을 개선하는 핵심 방법 중 하나입니다.

원하시는 대로 텍스트나 스타일을 변형하거나,
좀 더 복잡한 애니메이션 등을 추가해 보시며 연습해 보시면 좋습니다.

궁금하신 점이 있다면 언제든 질문해 주세요!

GoGoComputer

IT를 좋아합니다.

다음 포스트