우리는 html 을 사용해서 화면에 정보를 띄워 보았다.
하지만 버튼을 클릭하는 것처럼 사용자의 입력, 행동으로 화면을 바꾸는 어떠한 액션을 주어야 될 때가 있다.
이때 바로 JavaScript 를 사용한다.
보통 html 파일에서 <script> </script> 사이에 이러한 액션들을 위한 코드를 짜 넣는다.
대부분의 UI 는 이 과정으로 형성된다.
1. 미리 디자인 해놓고 숨김
2. 버튼을 누르거나 하면 보여줌
js 로 css 조절하기
<body>
<div class="alert-box" id="alert">
<p>Alert 박스</p>
<button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display = 'block';">열기</button>
</body>위 코드처럼 원하는 UI ( 위에서는 Alert 박스를 control 하는 버튼) 를 작성하고 CSS 의 display 를 설정해준다.
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}이후 script 에서 버튼이 클릭되었을 때 함수를 작성해준다.
js로 css 조절하기_function
하지만 이 방법은 script 의 명령이 html 안에 들어가 있어 가독성이 떨어진다. 함수를 선언해서 조금 변경 해보도록 하자
<div class="alert-box" id="alert" >
<p>아이디를 입력하세요</p>
<button onclick="DisplayCtrl('alert', 'none');">닫기</button>
</div>
<button onclick="DisplayCtrl('alert', 'block');">열기</button>
var alert_css = document.getElementById(id);
var status = getComputedStyle(alert_css).getPropertyValue("display");
<script>
function DisplayCtrl(id, ctrl) {
var alert_css = document.getElementById(id);
var status = getComputedStyle(alert_css).getPropertyValue("display");
if(status ==='none') {
document.getElementById(id).style.display = 'block';
}
else {
document.getElementById(id).style.display = 'none';
}
}
</script>사실 처음에는 var status = document.getElementById(id).style.display; 로 css 의 style 정보를 변수에 담아서 써보았다.
하지만 css 의 style 정보는 변수에 담을 수 없다고 해 위와 같은 방식로 바꾸어 주었다.
js로 css 조절하기_function 과 parameter
또 위 코드를 조금 더 간단하고 쉽게 바꾸면
<div class="alert-box" id="alert" >
<p>아이디를 입력하세요</p>
<button onclick="DisplayCtrl('alert', 'none');">닫기</button>
</div>
<button onclick="DisplayCtrl('alert', 'block');">열기</button>
function DisplayCtrl(id, ctrl) {
document.getElementById(id).style.display = ctrl;
}이렇게 작성할 수 있다.
js로 css 조절하기_변형
또 기존에 있던 alert 박스를 조금만 변형해서
버튼1을 누르면 아이디, 버튼2를 누르면 비번을 입력하는 박스를 만들려면 다음과 같이 바꿀 수 있다.
<div class="alert-box" id="alert" >
<p>아이디를 입력하세요</p>
<button onclick="DisplayCtrl('alert', 'none');">닫기</button>
</div>
<button onclick="DisplayCtrl('alert', 'block', 1);">열기1</button>
<button onclick="DisplayCtrl('alert', 'block', 2);">열기2</button>
function DisplayCtrl(id, ctrl, num) {
document.getElementById(id).style.display = ctrl;
if(num ==1) {
document.getElementById(id).innerHTML = '아디를입력하세요';
}
else {
document.getElementById(id).innerHTML = '비번을입력하세요';
}하지만 위 코드를 실행했을 때 열기1, 열기2 는 제대로 만들어지고 작동을 하지만 닫기 버튼이 제대로 나오지 않는 것을 알게되었다.
대충 생각해보면 getElementById(id) 에서 div 의 id 인 alert 를 바꾸는 과정에서 오류가 있던 것 같았다.
따라서 <p> 의 바꿀 스크립트 부분에 새로운 id 를 부여하고 그 부분만 바꾸어 주었다.
body>
<div class="alert-box" id="alert" >
<p id="title">아이디를 입력하세요</p>
<button onclick="DisplayCtrl('alert', 'none');">닫기</button>
</div>
<button onclick="DisplayCtrl('alert', 'block', '아디입력하세요');">열기1</button>
<button onclick="DisplayCtrl('alert', 'block', '비번입력하세요');">열기2</button>
</body>
<script>
function DisplayCtrl(id, ctrl, string) {
document.getElementById(id).style.display = ctrl;
document.getElementById('title').innerHTML = string;
}
</script>
js로 css 조절하기_변형2
html 태그에서는 id 나 class 만 적어두고 밑 script 태그에서 여러 기능을 추가할 수 있다.
이것은 EventListener 라고 하며 아래의 코드로 닫기 버튼을 바꾸어 보겠다
<div class="alert-box" id="alert" >
<p id="title">아이디를 입력하세요</p>
<!-- <button onclick="DisplayCtrl('alert', 'none');">닫기</button> -->
<button id="close">닫기</button>
</div>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
})닫기 버튼의 id 를 정하고 이후 그 id 에 해당하는 어떠한 이벤트를 탐지했을 때 어떠한 함수가 실행되도록 한 것이다.
코드 양 줄이기? jQuery, React
js 를 쓸 때 함수가 너무 길고 코드가 길어지는 것을 조금 보완하기 위해 만들어진 것이라고 한다. 조금 더 간편하게 쓸 수 있다. 많은 사이트들이 jQuery 를 사용해 만들어졌다.
하지만 요즘에는 React 가 대세라 거의 React 를 쓴다고 한다.
참고 강의 : https://www.youtube.com/playlist?list=PLfLgtT94nNq0svPBSslzReYKbZRuv_-NK
'코딩 농장 > 웹 프로그래밍' 카테고리의 다른 글
| Vue.js 와 설치 (0) | 2022.08.18 |
|---|---|
| TypeScript 첫번째 (0) | 2022.08.12 |
| Web2 node.js 마지막 (0) | 2022.08.11 |
| Web2 node.js 네번째 (0) | 2022.08.10 |
| Web2 node.js 세번째 (0) | 2022.08.09 |
