Dorothy_YANG
With Dorothy
Dorothy_YANG
전체 방문자
오늘
어제
  • 분류 전체보기 (279)
    • Hi, I'm Dorothy 🕵️‍♂️ (21)
      • Slowly but Surely (18)
      • IT certifications (3)
    • 🤯TIL (80)
      • HTML & CSS (2)
      • Javascript & jQuery (13)
      • React (13)
      • C언어 (1)
      • JAVA (22)
      • Python (2)
      • Oracle SQL (10)
      • My SQL (5)
      • Spring (12)
    • 💻Programmers (17)
    • 🏫 Open API_JAVA (101)
    • 🌎 Project (10)
      • Shopping (10)
    • 💥 Error (24)
    • ⚙ Setting (23)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • oracle
  • 비쥬얼스튜디오코드
  • 이것이자바다
  • colaboratory
  • AllArgsConstructor
  • HTML
  • SQL
  • SQLD합격후기
  • Eclipse
  • Javascript
  • 콜라보레이토리
  • 오류해결
  • 기간쿼리
  • spring
  • 백준
  • 연습문제
  • 코딩앙마
  • 독학후기
  • Database
  • SQLD합격
  • 서버등록
  • java
  • CSS
  • googlecolaboratory
  • sql기간
  • 노마드코더
  • 시작일종료일
  • 기간설정
  • 창초기화
  • 파이썬온라인

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Dorothy_YANG

With Dorothy

[24일차] VIEW / WinMerge / Opacity / Translate
카테고리 없음

[24일차] VIEW / WinMerge / Opacity / Translate

2022. 8. 23. 23:21
728x90

20220823(화)

  • 목차
    - VIEW
    - WinMerge
    - Opacity
    - Translate

 < VIEW >

- 빨간 상자 : VIEW (스크롤 바, 상단 프레임 미포함된 정보만을 보여주는 이 부분)

- 스크롤 바, 상단 프레임 부분 : FRAME 

- VIEW + FRAME = WINDOW

- VIEW의 높이 : window.innerHeight


< WinMerge - 코드비교 프로그램>

 

  • WinMerge 다운로드 링크
    https://winmerge.org/downloads/?lang=en 
 

Download WinMerge - WinMerge

Download WinMerge The easiest way to install WinMerge is to download and run the Installer. Read the online manual for help using it. WinMerge 2.16.22 The current WinMerge version is 2.16.22 and was released at 2022-07-27. For detailed info on what is new,

winmerge.org

 

1) 실행 화면 ➡ 파일 열기 후 비교할 파일과 기존 파일 2개를 각각 선택한다.

 

2) 노란색으로 표시된 부분이 다른 부분이다. 상단 화살표를 눌러 덮어쓸 수도 있다.


< Opacity : 투명도 >

  • 요소의 투명도를 설정

출처 :&nbsp;https://www.w3schools.com/css/css_image_transparency.asp

 

  • 연습문제
    - 각각의 버튼을 누르면 자연스럽게 fade-out / in이 되도록 코드를 짜보자.

    <h1>Hello World</h1>

    <button>Fade-out</button>
    <button>Fade-in</button>

    <script>

        // event handler 만들기
        const h1Elem = document.querySelector('h1');
        const btnFade = document.querySelectorAll('button');

        let opacityValue = 0;
        let itvID;

        let isRunning = false;


        btnFade[0].addEventListener('click', ()=> {

            if (isRunning === true)
            {
                console.log("return!!!!");
                return;
            }

            opacityValue = 1;


            // setinterval 도는 동안 isrunning이 true 가 된다.
            itvID = setInterval(()=>{

                isRunning = true;

                h1Elem.style.opacity = opacityValue;
                opacityValue = opacityValue - 0.05;

                if (opacityValue <= 0)
                {
                    clearInterval(itvID);
                    h1Elem.style.opacity = 0;
                    isRunning = false;
                }


            }, 50);


        });


        btnFade[1].addEventListener('click', ()=> {

           
            if (isRunning === true)
            {
                console.log("return!!!!");
                return;
            }
            opacityValue = 0;

            itvID = setInterval(()=>{
                isRunning = true;

                h1Elem.style.opacity = opacityValue;
                opacityValue = opacityValue + 0.05;

                if (opacityValue >= 1)
                {
                    clearInterval(itvID);
                    h1Elem.style.opacity = 1;
                    isRunning = false;
                }


            }, 50);

        });
       
    </script>

 


< Translate : 위치 이동 >

  • transform : 요소를 이동, 회전, 크기 조정 및 기울일 수 있다.

  • translate (현재 위치에서 요소를 이동한다.)
    transform : translate(50px, 100px); ➡ 요소를 현재 위치에서 오른쪽으로 50px, 아래로 100px 이동


  • 연습문제
    - 각각의 버튼을 누르면 글자가 자연스럽게 위/아래로 40%만큼 움직이는 코딩을 해보자.

    <style>
 
        h1{
            position: relative;
            top: 80px;
            font-size: 3rem;
        }


    </style>
</head>
 
<body>
    <h1>Hello World</h1>

    <br><br><br><br>
    <button>Y-up 40%</button>
    <button>Y-down 40%</button>
   
    <script>
        const h1Element = document.querySelector('h1');
        const btnTranslate = document.querySelectorAll('button');
        let yValue = 0;
        let intervalID;

        btnTranslate[0].addEventListener('click', ()=>{
            yValue = 0;

            intervalID = setInterval(()=>{

                h1Element.style.transform = `translateY(${yValue}%)`;
                yValue = yValue - 2;

                if (yValue <= -40)
                {
                    clearInterval(intervalID);
                    h1Element.style.transform = `translateY(0%)`;

                    console.log("clear-interval");

                }

            }, 30);

        });


        btnTranslate[1].addEventListener('click', ()=>{
            console.log("down");

            yValue = 0;

            intervalID = setInterval(()=>{

                h1Element.style.transform = `translateY(${yValue}%)`;
                yValue = yValue + 2;

                if (yValue >= 40)
                {
                    clearInterval(intervalID);
                    h1Element.style.transform = `translateY(0%)`;

                    console.log("clear-interval");

                }

            }, 30);

        });     

    </script>

 


< Opacity + Translate 동시 구현 >

  • 연습문제
    - Animate 버튼을 누르면 글자가 1) 흐려지면서 진하게 생기고 2) 아래에서 위로 올라오는 코딩을 짜보자.
  • 두개 이상의 스타일 값을 동시에 적용할 때
    - 한개의 값을 기준으로 다른 값을 맞춰서 적용
       (opacity 적용, opacity를 기준으로 translateY을 적용)

<body>
    <br>
    <br>
    <h1>Hello World</h1>
    <br>
    <br>
    <br>
    <button>Animate</button>
   
</body>
<script>
    const h1Elem = document.querySelector('h1');
    const btnAni = document.querySelector('button');

    let intervalID;
    let opacityValue = 0;
    let yValue = 0;

    let isRunning = false;

    const clickProc = function()
    {
        if (isRunning === true)
            return;

        isRunning = true;
        opacityValue = 0;
        intervalID = setInterval(()=>{

            // 1. opacity (0 --> 1)
            h1Elem.style.opacity = opacityValue;
                     
            // 값계산
            yValue = opacityValue * -30
            opacityValue = opacityValue + 0.05;

            // 2. translateY (0 --> -30 )
            h1Elem.style.transform = `translateY(${yValue}%)`;
           
           

            if (opacityValue >= 1)
            {
                h1Elem.style.opacity = 1;
                h1Elem.style.transform = 'translateY(-30%)';          
                clearInterval(intervalID);

                isRunning = false;
           
            }

        }, 50);
       
    }
    btnAni.addEventListener('click', clickProc);

</script>

 

 

 

 

 

728x90
저작자표시 (새창열림)
    Dorothy_YANG
    Dorothy_YANG
    Slowly but Surely, 비전공 문과생의 개발공부

    티스토리툴바