6. 자바스크립트와 css의 조합

1. 모달 창 생성 및 표시

   • 모달의 z-index 값은 백드롭보다 크도록 설정합니다.

   • HTML에 모달 창을 추가하고 display: none;로 초기화합니다.

   • 모달 창을 표시할 버튼 또는 요소를 선택하기 위해 JavaScript를 사용합니다.

2. JavaScript 파일 연동

   • HTML 파일에 <script src="파일명.js"></script>를 추가하여 JavaScript 파일을 연동합니다. 이것은 HTML 파일의 </body> 태그 바로 위에 추가하는 것이 좋습니다.

3. JavaScript로 요소 선택하기

   • JavaScript를 사용하여 요소를 선택하기 위해 document.querySelector('css 선택자') 또는 document.querySelectorAll('css 선택자')를 사용합니다. 이를 변수에 저장합니다.

4. 이벤트 리스너 추가

   • 버튼 또는 요소를 배열에 저장하고, for 루프를 사용하여 모든 버튼에 클릭 이벤트 리스너를 추가합니다.

   • 모달 창을 표시하려면 클릭 이벤트 리스너 함수 내에서 모달 창 요소의 display 속성을 'block'으로 변경합니다.

5. 모달 창 열고 닫기

   • 모달을 열려면 모달 요소의 클래스를 추가합니다. 예를 들어, classList.add('open')를 사용하여 'open' 클래스를 추가할 수 있습니다.

   • 모달을 닫으려면 'open' 클래스를 제거합니다. classList.remove('open')를 사용하여 'open' 클래스를 삭제합니다.

6. JavaScript에서 CSS 속성

   • JavaScript에서 CSS 속성을 조작할 때 CSS 속성 이름은 JavaScript에서는 camelCase 형식으로 변환됩니다. 예를 들어, border-radius는 JavaScript에서 borderRadius로 사용됩니다.

7. CSS 속성 설정

   • 요소의 스타일을 JavaScript에서 설정할 때, style 객체와 속성 이름을 문자열로 사용하여 설정할 수 있습니다. 예를 들어, element.style['border-radius']와 같이 -을 사용하여 설정 가능합니다.

이러한 방법을 활용하여 JavaScript를 사용하여 모달 창을 열고 닫을 수 있으며, 필요한 경우 모달 창에 애니메이션 효과나 다양한 스타일을 추가할 수 있습니다.