전체 글 (644) 썸네일형 리스트형 CSS : transitinoend 이벤트 전체소스 부분소스 window.addEventListener('click', function (e) { ballElem.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)'; }); translate 효과를 이용해서 원을 이동시킨다. 이때 원의 좌표는 top , left에 기준으로 되어있다. 따라서 .margin을 이용해서 조절한다. ballElem.addEventListener('transitionend',function(e){ if(!ballElem.classList.contains('end')){ ballElem.classList.add('end'); }else{ ballElem.classList.remove('end'); .. CSS : Scroll 사용 전체소스 output Lorem ipsum dolor sit amet consectetur adipisicing elit. In iusto necessitatibus sit repudiandae officiis commodi amet architecto similique ut deleniti minus dolor numquam consequuntur, quaerat aspernatur eligendi doloribus nesciunt obcaecati corporis voluptatum. Architecto iusto tempore, dolore, cum placeat iste nostrum nesciunt vitae saepe debitis, perferendis temporibus nemo quia .. 프로그래머스 : 멀쩡한사각형 (javascript) 문제 설명 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다. 가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solutio.. 프로그래머스 : 스킬트리 (javascript) 문제 설명 선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다. 예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다. 위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다. 선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 담은 배열 skill_trees가 매개변수로 주어질 때, 가능한 스킬트리 개수를 return 하는 solution 함수를 작성해주세요. 제한 조건 .. javascript 클릭리스너 활용 프로그래머스 : 풍선터트리기 (javascript) 일렬로 나열된 n개의 풍선이 있습니다. 모든 풍선에는 서로 다른 숫자가 써져 있습니다. 당신은 다음 과정을 반복하면서 풍선들을 단 1개만 남을 때까지 계속 터트리려고 합니다. 임의의 인접한 두 풍선을 고른 뒤, 두 풍선 중 하나를 터트립니다. 터진 풍선으로 인해 풍선들 사이에 빈 공간이 생겼다면, 빈 공간이 없도록 풍선들을 중앙으로 밀착시킵니다. 여기서 조건이 있습니다. 인접한 두 풍선 중에서 번호가 더 작은 풍선을 터트리는 행위는 최대 1번만 할 수 있습니다. 즉, 어떤 시점에서 인접한 두 풍선 중 번호가 더 작은 풍선을 터트렸다면, 그 이후에는 인접한 두 풍선을 고른 뒤 번호가 더 큰 풍선만을 터트릴 수 있습니다. 당신은 어떤 풍선이 최후까지 남을 수 있는지 알아보고 싶습니다. 위에 서술된 조건대로 .. 이벤트 위임 어몽 1 어몽 2 어몽 3 이벤트 위임이란 button을 누르면 동작해야 할 때 img , span을 누르게되면 동작이 되지않는 상황에서 부모 노드로 위임을 해서 문제를 해결 할 수 있다. 물론 CSS 속성에서 pointer-evnets : none; 을 사용해서 비슷한 효과를 낼 수 있지만. 만약 동적으로 활당받은 노드에 대해서는 css속성을 입히기는 쉽지가 않다. 따라서 현재노드가 menu-btn이 아닌경우 부모 노드의 포인터를 따라올라가는 방법으로 구현 할 수 있다. let elem = e.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; if (elem.nodeName == 'BODY') { elem = n.. CSS : 움직임, 클릭리스너 적용 .stage{ overflow: hidden; position: relative; /* vw : viewport width */ /* vh : viewport height */ width: 100vw; height: 75vw; /* 4:3비율 */ background-color: yellow; } @keyframes moving{ from { transform: translateX(0); } to{ transform: translateX(90vw); } } .among{ position: absolute; width: 100px; height: 100px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contai.. 이전 1 ··· 18 19 20 21 22 23 24 ··· 81 다음
