css 애니메이션(1)
2023. 3. 13. 08:32ㆍzerobase/HTML&CSS
728x90
CSS 애니메이션 첫 걸음 -transition
● transiton: 어떤 속성이 변할 때 얼마만큼의 시간을 사용할지 설정가능
● ease-in: 천천히 가다가 빠르게 감
● ease-ont: 빠르게 가다가 천천히 감
● ease-in-out: 천천히 가다가 빠르게 가다가 천천히 감
HTML에서 Javascript 사용하기
● <script></script>로 영역 만들어주기
● console.log(); 로 콘솔 창에 출력하기
JavaScript로 선택하는 HTML 태그
● js는 태초부터 웹 ui를 제어하기 위한 언어였음
● js로 제어하고 싶은 html 태그를 선택
● 어떤 이벤트가 발생했을 때 제어할 것인지 선택
● css 변경
● . 을 ~으, ~에 로 해석
● var, let, const 로 변수 만들기
addEventLisner를 통해 Event 선택하기
● 변수.addEventListner("click",function(){
console.log(변수);
});
Modal - UI 만들고 CSS로 숨기기
● html/ css ui를 만듦
● css로 숨김
● js로 다시 나타나게 함
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>body,
p {
margin: 0px;
}
.modalDiv {
display: block;
}
.bg {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.modal {
position: absolute;
z-index: 10;
background-color: white;
width: 50%;
left: 25%;
top: 25%;
padding: 20px;
border-radius: 14px;
;
}Modal - JS로 Modal창 나타내기
<body>
<h1>제목입니다.</h1>
<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";
}
</script>
</body>body,
p {
margin: 0px;
}
.modalDiv {
display: none;
}
.bg {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.modal {
position: absolute;
z-index: 10;
background-color: white;
width: 50%;
left: 25%;
top: 25%;
padding: 20px;
border-radius: 14px;
;
}Modal - JS로 Modal창 숨기기
<body>
<h1>제목입니다.</h1>
<p>내용입니다.</p>
<button>수정하기</button><br />
<button onClick="모달창열기()">삭제하기</button>
<div class="modalDiv">
<div class="bg" onclick="모달창닫기()"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창닫기()">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기() {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "block";
};
function 모달창닫기() {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "none";
};
</script>Modal - 함수 인자를 통해 Dry한 코드 피하기
● dry: don't repeat your code
<body>
<h1>제목입니다.</h1>
<p>내용입니다.</p>
<button>수정하기</button><br />
<button onClick="모달창열고닫기('block')">삭제하기</button>
<div class="modalDiv">
<div class="bg" onclick="모달창열고닫기('none')"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창열고닫기('none')">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열고닫기(인자) {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = 인자;
}
</script>
</body>'zerobase > HTML&CSS' 카테고리의 다른 글
| 핵심 CSS(1) (0) | 2023.03.14 |
|---|---|
| CSS 애니메이션 (2) (0) | 2023.03.13 |
| SASS (0) | 2023.03.12 |
| 에어비앤비 클론코딩 (0) | 2023.03.12 |
| CSS 한 걸음 더 (0) | 2023.03.09 |