팝업 닫기 부터 시작한다. 어제 했던 방식은 가만 생각해보니까 일반적인 상황은 아닌 것 같다.
See the Pen 팝업 닫기 by qBlackBirdp (@qBlackBirdp) on CodePen.
x 버튼을 클릭하면 팝업 창은 사라진다.
See the Pen 팝업닫기 (mouseenter mouseleave) by qBlackBirdp (@qBlackBirdp) on CodePen.
팝업에 마우스를 올리면 (mouseenter) 팝업이 나타나고 x 버튼에 마우스를 올렸다가 치우면 (mouseleave) 팝업이 사라진다.
기존 코드에서 제이쿼리만 살짝 바꿨다.
다음은 되게 신기했는데 일단 보면 클릭하면 배경색이 바뀐다.
See the Pen js로 body에 클래스 부여해서 배경색 바꾸기. by qBlackBirdp (@qBlackBirdp) on CodePen.
css와 js 코드를 살펴보면 body.active가 보일텐데. js로 body에 없던 클래스를 생성하면서 css가 인식하고 배경색이 바뀌는 방식이다. 제이쿼리의 장점이라고 한다.
변경으로는 클래스 부여(addClass) 복구로는 클래스 삭제(removeClass)를 해서 녹색에서 다시 원상복구 되는 식이다.
이렇게 직접 가서 class를 부여하는게 아닌 제이쿼리로 접근하는 것이다. 이렇게 되면 css를 만들어놓고 만질 일이 줄어든다.
이걸 활용해서 버튼 하나로 만들 수 있다.
See the Pen class부여삭제 버튼 하나로 하기 by qBlackBirdp (@qBlackBirdp) on CodePen.
잘 보면 hasClass가 보일 것이다. 있냐 없냐를 묻는 것이기 때문에 boolean을 갖게 되며, 이걸로 저번처럼 복잡하게 판단하지 않고 쉽게 if문을 사용할 수 있게된다!
이렇게 클래스를 넣고 빼는 것을 활용하면 이런 방식도 가능하다.
See the Pen 제이쿼리로 스타일을 직접 조종하면 안되고, addClass 를 이용해야 하는 이유, v2, addClass로 제이쿼리를 최소화 by qBlackBirdp (@qBlackBirdp) on CodePen.
제이쿼리로 스타일을 직접 만지지말고 addClass를 이용하면 코드가 훨씬 짧아진다.
이걸 활용한 문제 풀이.
See the Pen addClass문제풀이 by qBlackBirdp (@qBlackBirdp) on CodePen.
각주 처리된 것이 스타일을 js로 부여한 것이고 실행되는 코드가 class부여 및 삭제 코드다.
css에는 active클래스로 display:block을 만들고 부여되면 적용 삭제되면 다시 돌아오도록 만들었다. 코드가 훨씬 보기 좋아진다.
물론 js로 css에 직접 관여는 해도 되지만 이런 방법이 훨씬 더 좋은 방법이라고 강사님께서 거듭 강조 하셨다.
- js 마우스 이벤트
| 이벤트 | 설명 |
|---|---|
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
| mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
| mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
| mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
| contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
See the Pen 팝업 visibility, opacity, transition 사용해서 효과주기 by qBlackBirdp (@qBlackBirdp) on CodePen.
코드가 꽤 길텐데 우리는 css에서 여기만 보면 된다.
.popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
display: flex;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visible 1s;
}
.popup.active {
visibility: visible;
opacity: 1;
}우리는 항상 뭔가를 숨기고 싶을 때, display: none을 사용했는데. 여기에는 애니메이션을 해칠 우려가 크다. 그래서 사용하는 것이 visibility와 opacity를 혼합해서 사용하는데 둘 다 투명화라고 생각하면 쉽다.
이제 이걸 자연스럽게 만들 수 있을 때 까지 연습해야된다..
css tailwind 라이브러리
css tailwind 라이브러리 사용법
두개의 사이트를 잘 이용하면 html에 클래스 부여만으로 css를 컨트롤 할 수 있게 된다.
<script src="https://cdn.tailwindcss.com"></script>이렇게 추가하면 다양한 라이브러리 활용, 노말라이즈도 몇개는 되어있어서 우리가 할 필요가 없다.
이걸 사용할 땐 구글에 tailwind 어쩌구 하고 검색하고 코드를 복사해와서 사용방법대로 따라서 사용하면 된다. 예를 들면 버튼을 보고 싶다면 tailwind button을 검색하고 가져오면 되는 식이다.
이걸 활용해서 같은걸 만들면 코드는 이렇게 바뀐다. 사실상 기능은 똑같다.
See the Pen Untitled by jhs (@jangka44) on CodePen.
css칸을 보면 폰트적용 말고는 없다. html에 클래스를 부여하는 식으로 만들어진다.
따라서 만들어 본 것은 이거다.
See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.