이제 막 기초를 배우는 자린이(?)이다.. 배운 것을 메모하고자 한다.
만약 틀린 것이 있으면, 댓글로 알려주시면 감사하겠습니다.
1. 모달창 만들기 - 기본 입력
1) HTML
<body>
<div class="alert-box" id="title">alert 박스 <button class="close">X</button></div>
<button onClick="" class="open">버튼1</button>
<button onClick="">버튼2</button>
<body>- body에 박스 모달창이 될 박스 한 개를 만들어주고 박스 안에는 close 버튼도 만들어준다.
- 버튼1, 버튼2를 만들어준다. (버튼1 => 열기 / 버튼2 => 닫기) 총 두 가지의 버전으로 만들어 볼 것이다.
2) CSS
<style>
* {padding: 0; margin: 0;}
.alert-box {background: #ccc; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; display: none; }
button {border: 1px solid #000; background: none; padding: 10px 30px; cursor: pointer;}
</style>-박스를 꾸며주고 마지막에 'display: none'을 입력하여 감춰준다.
-display: none
2. 자바스크립트 javascript
방법은 총 3가지를 배웠는데 parameter, function, EventListener가 있다.
1) 축약하지 않고, 그대로 쓴다면?
document.querySelector('.open').addEventListener('click',function(){
document.querySelector('.alert-box').style.display = 'block';
document.querySelector('.alert-box > .close').addEventListener('click',function(){
document.querySelector('.alert-box').style.display = 'none';
});
});-코드가 굉장히 길어지게 된다. Selector를 이용해 선택하고, 이벤트 함수를 사용하고....
또 그 안에 있는 박스를 선택하고 디스플레이를 블럭으로 바꿔준다.
-블럭이 된 상태에서 닫아줘야하니 또 이벤트 함수를 사용하여 디스플레이 none을 해준다....
코드가 길고, 똑같은 것이 반복되는 이 방법은 좋은 방법이 아니다.
최소화 시키려면 아래와 같은 코드를 사용해야한다.
2) function - 1번처럼 긴 코드를 함축하고 싶으면, function 함수를 쓴다.
<body>
<div class="alert-box" id="title">alert 박스 <button class="close" onClick="xbox('none')"></button>닫기</div>
<button class="open" onClick="modal('block')">버튼1</button>
</body>
function modal(){
document.querySelector('.alert-box').style.display = 'block';
};
function xbox(){
document.querySelector('.alert-box').style.display = 'none';
};-xbox라는 변수명은 div박스 안에 있는 close 버튼에 onClick에 입력해준다.
3) parameter 파라미터 - 함수명 옆에 공통적인 매개변수를 넣어 표시하는 것
파라미터는 구멍이라고 표현을 하는데, 함수명 옆에 공통적인 매개변수를 넣어 표시하는 것(?)이다.
<body>
<div class="alert-box" id="title">alert 박스 <button class="close" onClick="modal1('none')"></button>닫기</div>
<button class="open" onClick="modal1('block')">버튼1</button>
</body><script>
function modal1(aa){
document.querySelector('.alert-box').style.display = aa;
};
modal1('block');
modal1('none');
</script>
-축약했기 때문에 앞에 작동하겠다는 function을 넣고 아무 변수명이나 써준다. 웬만하면 의미있는 뜻이 좋다.
나같은 경우는 modal1이라고 써주고 그 안에는 aa라는 매개변수를 넣어줬다.
- 변수명과 button에 있는 onClick 변수명을 맞춰준다.
3) EventListener - 이벤트 요소
<div class="alert-box" id="title">alert 박스 <button class="close">X</button></div>
<button onClick="">버튼1</button>
<button onClick="">버튼2</button> <script> //click은 이벤트이다. click안에는 click,keydown, scrill, mouseover 등을 입력할 수 있다.
document.querySelector('.close').addEventListener('click',function(){
document.querySelector('.alert-box').style.display = 'none';
})
</script>
'Javascript > Javascript' 카테고리의 다른 글
| [Javascript] for문을 사용해서 tab-menu/탭메뉴 만들기 (2) | 2023.12.03 |
|---|---|
| [Javascript] 함수의 인수와 매개변수 개념(함수 깊게 파악하기) (0) | 2023.11.29 |
| [Javascript] Javascript에서 함수(function)란? 함수 선언식과 함수 표현식 (0) | 2023.11.29 |
| [Javascript] DOM이 뭘까? DOM과 DOM트리 구조 + 노드 Node 종류 (0) | 2023.11.28 |
| [Javascript] Javascript의 탄생 이론과 출력 (1) | 2023.11.27 |