js는 웹 ui를 제어하기 위한 언어였다
1. js로 제어하고싶은 html 태그를 선택
2. 어떤 event (사용자가 하는 모든것)가 발생했을 때 제어할 것인지 선택
3. css 를 변경
1. js로 제어하고싶은 html 태그를 선택
. : ~의
<div id="box">
<div class="box">
<div class="box-overlay">
<p>코딩</p>
<p>010-xxxx-xxxx</p>
</div>
</div>
<script>
document.getElementById("box");
</script>
document 안에 id 가 box 인 div 태그를 선택 함
var 박스 = document.getElementById("box");
변수(변하는수)를 만드는 방법 var, let, const
= : 대입연산자 => 우항에 있는 값을 좌항에 할당을 해줌
var를 이용해서 박스라는 변수를 만들었고 id가 박스인 것을 박스에 할당해줌
박스를 console에 넣을 수 있음
2. 어떤 event (사용자가 하는 모든것)가 발생했을 때 제어할 것인지 선택
이벤트는 매우 많음. 하고자 하는 것이 있으면 구글링 해서 사용하면 됨.
ex. js addeventlistener 종류
<script>
var 박스 = document.getElementById("box");
박스.addEventListener("click",function(){
console.log(박스);
});
</script>
.addeventlistener ( " ( addeventlistener 종류) "
클릭을 했을때 console.log에 찍히도록 해라
3. css 를 변경
<body>
<div id="box">
<div class="box">
<!--
<div class="box-overlay">
<p>코딩</p>
<p>010-xxxx-xxxx</p>
</div>
</div>-->
<script>
var 박스 = document.getElementById("box");
박스.addEventListener("click",function(){
박스.style.width = "200px";
});
</script>
body {
margin: 20px;
}
#box {
width: 100px;
height: 100px;
background-image: url("./x.png");
background-position: center;
background-size: cover;
border: 1px solid lightgray;
border-radius: 14px;
position: relative;
overflow: hidden;
transition: width 1s ease-in;
}
박스를 선택하고 박스의 스타일을 클릭할 시 가로 200px로 변경,
css에서 transition에 ease-in을 이용
<script>
var 박스 = document.getElementById("box");
박스.addEventListener("mouseover",function(){
박스.style.width = "200px";
});
var 박스 = document.getElementById("box");
박스.addEventListener("mouseout",function(){
박스.style.width = "100px";
});
자바스크립트 마우스 이벤트 mouseover(요소위에 마우스를 움직였을때), 200px / mouse out(요소바깥으로 마우스를 움직였을때) 100px 로도 표현할 수 있음
Modal-UI 만들고 CSS로 숨기기
블로그나 카페에 게시글을 삭제하고자 할때 많이 사용하는 UI
<body>
<h1>제목입니다.</h1>
<p>내용입니다.</p>
<button>수정하기</button><br/>
<button onclick="console.log('?')">삭제하기</button>
<script>
</script>
</body>
<button onclick="console.log('?')">삭제하기</button>
"console.log" 안에 따옴표를 해야할 때엔 작은 따옴표를 이용하자!
삭제하기를 눌러서 콘솔에 ? 표시
<body>
<h1 id="heading">제목입니다.</h1>
<p>내용입니다.</p>
<button>수정하기</button><br/>
<button onclick="
var heading = document.getElementById('heading');
heading.style.color='red';
">삭제하기</button>
<script>
</script>
삭제하기 눌렀을때 제목색 바꿈
<body>
<h1 id="heading">제목입니다.</h1>
<p>내용입니다.</p>
<button>수정하기</button><br/>
<button onclick="함수이름()">삭제하기</button>
<script>
function 함수이름() {
var heading = document.getElementById('heading');
heading.style.color='red';
}
</script>
</body>
function 함수 사용하기
자바스크립트에서 ui를 바꿀때
1. html /css ui 만들기
2.css로 숨기기
3.자바스크립트로 다시 나타나게 하기
<body>
<h1 >제목입니다.</h1>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<button>수정하기</button><br/>
<button onclick="모달창열기()">삭제하기</button>
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기 (){
var 모달 = document.querySelector(".modalDiv");
모달.style.display="block"
console.log(모달);
};
body, p {
margin: 0px;
}
.modalDiv {
display: none;
}
.bg {
width: 100vw;
height: 100vh;
background-color: black;
position: fixed;
top: 0;
left: 0;
opacity: .5;
}
.modal {
position: absolute;
z-index: 10;
background-color: white;
width: 50%;
left: 25%;
top: 25%;
padding: 20px;
border-radius: 14px;
}
display none에서 block으로 변하면서 모달창이 나타남