[transition]

transition - 가속도. 변화되는 속도를 제어

transition : all 3s ease-in-out

Mozilla CSS -transition 링크 바로가기

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

//script//

1. js는 태초부터 웹 ui를 제어하기 위한 언어였다.

2. js로 제어하고 싶은 html 태그를 선택

3. 어떤 이벤트가 발생했을 때 제어할 것인지 선택

4. css를 변경

   . : ~의

   document.get

   
   

   var 박스 = document.getElementById("box");
   
   

   박스.addEventListener("click", function() {
   console.log(박스);

   박스.style.width = "200px"
   });

   박스.addEventListener("mouseover", function() {
   console.log(박스);

   박스.style.width = "200px"
   });

   박스.addEventListener("mouseout", function() {
   console.log(박스);

   박스.style.width = "200px"
   });

  <h1>제목입니다.</h1>
    <p>내용입니다.</p>
    <button>수정하기</button><br>
    <button onclick="함수이름()">삭제</button>

<script>
    //1. html/css ui를 만듭니다.
    //2. css로 숨깁니다.
    //3. js로 다시 나타나게 합니다.



    function 함수이름() {
        var heading = document.getElementById('heading');
        heading.style.color = 'red';

    }
    
    
    
    function 모달창열기() {
    	document.getElementById("");
        document.getElementByClassName("");
        
        document.querySelector(".modalDiv");
</script>

Modal - 함수 인자를 통해 Dry한 코드 피하기

   <div class="modalDiv">
        <div class="bg" onclick="모달창닫기()"></div>
        <div class="modal">
            <p>정말 삭제하시겠습니까?</p>
            <button onclick="모달창닫기()">취소</button>
            <button>삭제</button>
        </div>
    </div>

// dry : don't repeat your code

function 모달창열기(){
    var 모달 = document.querySelector(".modalDiv");
    모달.style.display = "block";
}

function 모달창닫기(){
    var 모달 = document.querySelector(".modalDiv");
    모달.style.display = "none";
}

#### 복잡한 애니메이션이 필요할 때 - animation 속성
**keyframes**

안녕하세요!

<h1 class="wiggle">안녕하세요!</h1>
<style>
	@keyframes wiggle {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(10deg); }
	50% {transform: rotate(0deg);}
	75% { transform: rotate(-10deg);}
	100% {transform: rotate(0deg);}
}

h1.wiggle {
	display: inline-block;
	animation: wiggle 2.5s infinite;
}
</style>

#### 마우스 추적하기 ```

#cursor {

position: absolute;
top: 0;
left: 0;

width: 50px;
height: 50px;
background-color: yellow;

/*border-radius: 50% */

}

```<script>
	window.addEventListener("mousemove", 마우스추적);
    var x = document.querySelector("#x");
    var y = document.querySelector("#y");
    var cursor = document.querySelector("#cursor");
    
    function 마우스추적(event) {
    	x.innerHTML = event.clientX;
        y.innerHTML = event.clientY;
        qursor.style.top = evetn.clientY = "px";
        cursor.style.left = event.clientX + "px";
     }
     
 </script>

스크롤 위치 추적하기

<script>
  //문서의 전체 높이 : document.documentElement.scrollHeight
  // 브라우저가 보여주고 있는 높이 : window.innerHeight
  //스크롤의 위치 : document.documentElement.scrollTop
  
  스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이) * 100%
  
  var scrollY = 0 ;
  var target = document.querySelector(".scroll-inner");
  
  window.addEventListener("scroll", function() {
  	var documentHeight = document.documentElement.scrollHeight;
    var browserHeight = window.innerHeight;
    scrollY = document.documentElement.scrollTop;
    var percent = scrollY / (documentHeight - browserHeight) * 100;
    target.style.height = Math.round(percent) + "%";
    console.log(percent, Math.round(percent));
  
  </script>