사랑(Heart)은 오락가락(Swing)

자바스크립트

by e7e 2023. 7. 6. 17:06

생각외로 많은 웹개발자들이 레이아웃(Layout)을 스스로 구성하지 못한당.

안타깝당. 예쁘게는 못해도 프로토타입(Prototype)은 잡을 수 있어야 하지 않겠는강?

어렵지 않은 걸 외면할 때 안타까움을 너머 부끄러움도 느껴진당.

CSS position 속성에 설정 가능한 값은 아래와 같당.(요번에 확실히 알장!)

static 기본값으로 배치를 브라우져에개 맡기겠다는 의미당
relative 브라우져가 배치하고 나서 내가 추가 조정을 하겠다는 의미
absolute 브라우져 왼쪽 모서리 기준으로 내가 직접 배치하겠다는 의미

문제는 절실한 순간에 필요한 건 아래 내용이란 거시당

부모: relative , 자식: absolute 자식을 부모 왼쪽모서리 기준으로 배치가능
left,top,right,bottom 값을 주지 않으면 자식은 자동으로 부모 왼쪼옥 모서리에 붙는당

아래 heartSwing.html은 위의 내용을 기반으로 만들어진 css 위에 자바스크립트로

쪼메 제어(회전각 정도)만 넣었당.

추가적으로 DOM객체를 복사하는 cloneNode 메소드를 썼공,

복사 동적으로 추가되는 하트를 흔들기 위해서 , fSwing 함수 안에서 querySelectorAll을 이용

추가된 하트까지 document에서 다시 검색해 오도록 구성하였당.(동적대응 방법)

타이머 멈추는 부분은 덤으로 넣었으니, 놓치지 말고 챙기장!

CSS position 속성에 먼저 집중 집중하도록 하장!.

한번은 꼼꼼이 따져보는 시간 투자를 하지 않는다면, 저절로 잘 쓰게 되는 그런 일은 없당.

heartSwing.httml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E7E MERONG</title>
    <style>
        .myHeart {
            display: inline-block;
            overflow:visible;
            position: relative;
            top:100px;
            left:30px;
            width:170px;
            height: 430px;
           /* border: 1px solid black;  디버깅용 */
        }
        #ball {
            position:relative;
            z-index:100;
            top:-25px;
            left:60px;
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: red;
        }
        #bar {
            position: relative;
            top:-50px;
            left: 75px;
            width:20px;
            height:300px;
            background-color: blue;
        }
        #heart {
            width:150px;
            height:150px;
            left:9px;
            top:-100px;
            position:relative;
          /* border:5px dashed magenta; 디버깅용 */
            transform: rotate(45deg);
        }
        #tcircle{
            position: absolute;
            left:50px;
            width:100px;
            height:100px;
            background-color:red;
            border-radius: 50%;
        }
        #lcircle {
            position:absolute;
            top:50px;
            width:100px;
            height:100px;
            background-color:red;
            border-radius: 50%;
        }
        #nemo {
            position:absolute;
            left:50px;
            top:50px;
            width:100px;
            height:100px;
            background-image: url("http://img.newspim.com/news/2020/01/30/200130145446801.jpg");
            background-size: 100px 100px;
            background-color: red;
            border-radius: 10%;
        }
        #toolbar {
            color:yellow;
            background-color: black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="toolbar">
        <h1>E7E MERONG HEART</h1>
        <input type=button value="복사" onclick="fCopy()">
        <input type=button value="멈춤" onclick="fToggle(this)">    
    </div>
    <div class="myHeart">
        <div id="ball"></div>
        <div id="bar"></div>
        <div id="heart">
            <div id="tcircle"></div>
            <div id="lcircle"></div>
            <div id="nemo"></div>
        </div>
    </div>
    <script>
        let v_gak = 0;
        let v_mv = 3;
        let v_hearts,v_nemos;
        let v_timer;

        // 하트 흔들깅
        function fSwing(){
            v_hearts = document.querySelectorAll(".myHeart");
            v_nemos = document.querySelectorAll("#nemo");
            v_gak = (v_gak + v_mv) % 360;
            if(v_gak >= 30 || v_gak <= -30){
                v_mv = -v_mv;
            }
            for(let i=0; i<v_hearts.length; i++){
                v_hearts[i].style.transformOrigin="center top";
                v_hearts[i].style.transform = `rotate(${v_gak}deg)`;
                let ransu = Math.floor(Math.random()*8);
                v_nemos[i].style.transform = `rotate(${ransu*90}deg)`;
            }
            v_timer = setTimeout(fSwing,200);
        }
        fSwing(); // 그냥 시작

        // 복사함숭
        function fCopy(){
            var v_clone = v_hearts[0].cloneNode(true);
            document.body.appendChild(v_clone);
        }

        // 시작/멈춤 토글 함숭
        function fToggle(pThis){
            if(pThis.value=="멈춤"){
                clearTimeout(v_timer);
                pThis.value="시작";
                return;
            }
            pThis.value="멈춤";
            fSwing();
        }
    </script>
</body>
</html>

코드를 욜씨미 보았다면 transformOrigin 속성이 궁금해졌을거시당.

css로는 transform-origin으로 변형되는 기준점을 의미하는데, 초기값이 center, center당

아래 그림을 보면 바로 이해가 될거시당.(만약 안되면 졸리거시니 일단 쪼메 자장)

위 코드를 실행해서 나의 경우 아래와 같은 결과가 던져졌당.

세월이 흐른 지금의 나에게 사랑의 분류는 3 레벨이당.

1. 충성 -> 무릎 꿇어도 자존심 안 상함 ( 무서운 1명 있음~ ^-^)

2. 우정 -> 같이 많은 시간의 추억을 만들고 싶음.

3. Like -> 어쩌다 한번씩 만나도 웃으며 세상사 이야기 할 수 있음

개발자라면 NULL 사랑할 수 밖에 없당.

프로그래밍을 배우는 전갈이 부른당 ~ NULL이 내 인생에 들어왔을 때!!

https://www.youtube.com/watch?v=5UEiVcT6lDk

'자바스크립트' 카테고리의 다른 글

알칼리아닌 산성비로 잠재능력 깨워용~~ (0)	2023.07.12
근시안과 노안엔 돋보기를 ... (1)	2023.07.10
볼튕기기로 배우는 인생 (2)	2023.07.06
GUI 로또번호발생기 이번주 예상 번호는...? (0)	2023.07.05
마방진 맹글엉 원리이해 (0)	2023.07.05