오늘 한일
- 퍼블리싱 강의를 들었다.
- 브레드 형님의 Hidden Search Widget 강의를 듣고 응용 버전으로 만든 아이폰 메모장 자바스크립트 구현이 완성이 되었다.
여기서 배운 점
버튼 클릭시 alert 자바스크립트와 제이쿼리의 차이점
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="btn" type="button">버튼</button>
<script>
// id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
document.getElementById("btn").addEventListener("click", function () {
alert("버튼 클릭 이벤트");
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="btn" type="button">버튼</button>
<script>
// id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
$("#btn").on("click", function () {
alert("버튼 클릭 이벤트");
});
</script>
</body>
</html>제이쿼리에서는 document.getElementById가 $("#btn")으로 쓰이고 addEventListener를 on을 사용해서 보다 간결하고 간단하게 사용할 수 있다.
버튼 클릭시
호버로 효과주는 방법과mouseenter, mouseleave사용하여 자바스크립트로 효과주는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- 간단한 버튼 hover 애니메이션 (색깔 변화) -->
<div class="buttons">
<button class="button use-css">웹 퍼블리싱</button>
<button class="button use-javascript">왕초보 시작반</button>
<button class="button use-class">웹개발 플러스</button>
</div>
<script src="script.js"></script>
</body>
</html>1. 버튼 호버
.button.use-css:hover {
background-color: #e8344e;
color: white;
}2. 자바스크립트로 호버 효과주는 방법
/* button use-class */
.button.use-class.on {
background-color: #e8344e;
color: white;
}
// button use-class
// mouseenter, mouseleave 시
// addClass, removeClass 함수 사용 css로 컨트롤
$(".button.use-class")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});버튼 클릭시 보이고 사라지는 반복이 되는 현상 구현 방법
ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
display: show;
position: absolute;
background-color: #f1f1f1;
border-radius: 10px;
box-shadow: 0px 8px 16px 0px #00000033;
overflow: hidden;
}
ul li a{
display: block;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}$(".dropbtn").on("click", function (evt) {
const ulElement = $("ul");
// 단순 보이기 구현
// ulElement.show();
// 토글 기능 구현 안보이는 상태 -> 보이는 상태 -> 안보이는 상태
// 클릭할 때마다 보이고 사라지고 반복이 되는 현상이다 toggle
// display: block (보이는 상태)
// display: none (안 보이는 상태)
ulElement.toggle();
});
// Click Outside : 버튼 외부 요소 클릭시 드롭다운이 다시 닫히도록 할 경우 사용합니다.
// $(document).on('click', function (evt) {
// if ($(evt.target).parents('.dorpdown').length === 0) {
// $('ul').hide();
// }
// });toggle을 사용하여 버튼 클릭 시 display:none 안 보이는 상태였다가 display:block으로 안 보이는 상태로 바뀐다.
이 부분을 사용하여 아이폰 메모장 문제도 해결하였다^^
내일 할 일
- 아이폰 메모장 자바스크립트에서 작동이 되지 않은 이유는 버블링과 캡처랑 때문이라는 전 팀원의 조언으로 금방 해결이 되었다.
이 부분이 아직 이해가 되지 않아 내일 정리해서 올리겠다!!!!!!! - vw, vh나 mouseenter, mouseleave 등등 정리하기!
ur gonna figure it out. just like always have.