본문 바로가기

분류 전체보기

 (388)
<자바스크립트 기초> 16. 타이밍 다루기 1. setTimeout * 지연 - setTimeout 은 타이밍을 원하는 만큼 지연시키는 역할을 수행한다. setTimeout(F, 1000); - setTimeout(function, ms); 과 같이 사용한다. 이 때 함수자리에는 미리 선언해둔 함수가 들어갈 수 있고, 두번째 매개변수는 지연시킬 시간을 ms단위로 기재한다. * 취소 - 앞서 봤던 지연을 변수에 넣을 수도 있다. let timeId; timeId = setTimeout(F, 1000); clearTimeout(timeId); - 변수 = setTimeout(function, ms); 이라고 선언하여 작동시킬 수 있으며, 이 때 clearTimeout(변수) 를 이용하면 셋타임을 완전히 클리어시켜서 함수자체가 실행이 안되도록 할 수 ..
<수학2> 1978번 소수 찾기 with 파이썬 문제 주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오. 입력 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. 출력 주어진 수들 중 소수의 개수를 출력한다. 정답비율 48.291% N = int(input()) lst = list(map(int, input().split())) count = 0 for i in lst : if i == 1 : continue elif i == 2 : count += 1 else : for j in range(2,i) : if i % j == 0 : break elif j == i-1 : count += 1 print(count) 제한 시간이 있어서 반복문을 써도 될까..
<자바스크립트 기초> 15. 애니메이션 다루기 * 트랜지션 - CSS의 트랜지션을 자바스크립트에서 좀 더 세밀하게 다뤄보자. - 먼저 HTML과 CSS를 이용하여 공모양의 ball클래스를 만들었다고 가정하자. - 이를 왼쪽 위에 붙여두기위해 앱솔루트 포지션을 주었고, 웹 문서에서 클릭을 하는 곳에 공이 따라오도록 하는 스크립트를 작성할 것이다. const ballElem = document.querySelector('.ball'); window.addEventListener('click', function (e) { ballElem.style.transform = 'translate('+(e.clientX-15)+'px, ' + (e.clientY-15)+ 'px)'; }) ballElem.addEventListener('transitionend',..
<수학1> 1011번 Fly me to the Alpha Centauri with 파이썬 문제 우현이는 어린 시절, 지구 외의 다른 행성에서도 인류들이 살아갈 수 있는 미래가 오리라 믿었다. 그리고 그가 지구라는 세상에 발을 내려 놓은 지 23년이 지난 지금, 세계 최연소 ASNA 우주 비행사가 되어 새로운 세계에 발을 내려 놓는 영광의 순간을 기다리고 있다. 그가 탑승하게 될 우주선은 Alpha Centauri라는 새로운 인류의 보금자리를 개척하기 위한 대규모 생활 유지 시스템을 탑재하고 있기 때문에, 그 크기와 질량이 엄청난 이유로 최신기술력을 총 동원하여 개발한 공간이동 장치를 탑재하였다. 하지만 이 공간이동 장치는 이동 거리를 급격하게 늘릴 경우 기계에 심각한 결함이 발생하는 단점이 있어서, 이전 작동시기에 k광년을 이동하였을 때는 k-1 , k 혹은 k+1 광년만을 다시 이동할 수 ..
<수학1> 2775번 부녀회장이 될테야 with 파이썬 문제 평소 반상회에 참석하는 것을 좋아하는 주희는 이번 기회에 부녀회장이 되고 싶어 각 층의 사람들을 불러 모아 반상회를 주최하려고 한다. 이 아파트에 거주를 하려면 조건이 있는데, “a층의 b호에 살려면 자신의 아래(a-1)층의 1호부터 b호까지 사람들의 수의 합만큼 사람들을 데려와 살아야 한다” 는 계약 조항을 꼭 지키고 들어와야 한다. 아파트에 비어있는 집은 없고 모든 거주민들이 이 계약 조건을 지키고 왔다고 가정했을 때, 주어지는 양의 정수 k와 n에 대해 k층에 n호에는 몇 명이 살고 있는지 출력하라. 단, 아파트에는 0층부터 있고 각층에는 1호부터 있으며, 0층의 i호에는 i명이 산다. 입력 첫 번째 줄에 Test case의 수 T가 주어진다. 그리고 각각의 케이스마다 입력으로 첫 번째 줄에 ..
<CSS 기초> 16. 3D 기본 1. 3D로 만들기 * 비틀기 - 간단하게 옆으로 살짝 비틀어진 카드를 만든다고 가정하자. 그러면 우리는 다음과 같이 작성할 수 있다. transform: rotateY(45deg); - 3d 형태로 옆으로 45도 돌린 속성을 주기위해 원하는 곳에 위와 같은 트랜스폼 속성을 줄 수 있다. - 하지만 실제로 이렇게 해보면 3D라 하기엔 어색하고 납작하다. 이 때 필요한 것이 perspectiv속성이다. * 속성 - 위의 부모태그를 3D공간으로 만들면 위의 카드가 3d처럼 보인다. perspective : 500px; - 500px은 눈에서의 거리라고 볼 수 있다. 즉 0에 가까워질수록 모양의 변화가 극대화되어 보인다. - 위의 속성에도 불구하고 또 다른 문제가 생긴다. 부모안에 여러개의 3D 카드들을 넣으..
<자바스크립트 기초> 14. 스크롤 이벤트 (1) * 위치값 가져오기 - 스크롤 이벤트를 이용하려면 스크롤에 따라 변하는 위치값을 가져올 수 있어야 한다. - 먼저 전체 다큐먼트의 스크롤에 따른 위치값을 받아보자. (function() { const outputElem = document.querySelector('.output'); window.addEventListener('scroll', function() { outputElem.innerHTML = window.pageYOffset; }); })(); : 이벤트 리스너에 'scroll'을 입력함으로써 스크롤 이벤트를 받아올 수 있다. .pageYOffset 속성은 현재의 세로 위치 값을 픽셀단위로 표현한다. 위의 코드를 실행시키면 output이라는 클래스에 스크롤에 따라 변하는 위치값을 보이도록..
<수학1> 10250번 ACM 호텔 with 파이썬 문제 ACM 호텔 매니저 지우는 손님이 도착하는 대로 빈 방을 배정하고 있다. 고객 설문조사에 따르면 손님들은 호텔 정문으로부터 걸어서 가장 짧은 거리에 있는 방을 선호한다고 한다. 여러분은 지우를 도와 줄 프로그램을 작성하고자 한다. 즉 설문조사 결과 대로 호텔 정문으로부터 걷는 거리가 가장 짧도록 방을 배정하는 프로그램을 작성하고자 한다. 문제를 단순화하기 위해서 호텔은 직사각형 모양이라고 가정하자. 각 층에 W 개의 방이 있는 H 층 건물이라고 가정하자 (1 ≤ H, W ≤ 99). 그리고 엘리베이터는 가장 왼쪽에 있다고 가정하자(그림 1 참고). 이런 형태의 호텔을 H × W 형태 호텔이라고 부른다. 호텔 정문은 일층 엘리베이터 바로 앞에 있는데, 정문에서 엘리베이터까지의 거리는 무시한다. 또 모..
<CSS 기초> 15. Transform & Visibility 1. Transform * 이동 - 이 속성은 앞서 잠깐 다루었던 속성이다. 말그대로 요소의 형태를 변형시킬 때 사용한다. 그러나 다른요소에 영향을 주지 않는다. translate()로 x, y 값을 입력하여 자기 사이즈 기준으로 이동이 가능하다. transform : translateX(50%); : 위와 같이 x에만 적용도 가능하다. - 이 때 transform은 기본적으로 기준점을 가운데로 위치시키지만 이를 변경할 수도 있다. transform-oringin : left top; : 위를 작성하면 기준점이 박스의 왼쪽 위 모서리가 될 것이다. 이는 %나 px로도 작성가능하다. left top은 0% 0%와 같은 의미이며 right top은 100% 100%와 같은 의미이다. * 크기 - scale(..
<자바스크립트 기초> 13. 이벤트 (2) * 이벤트 위임 - 우리는 지난 장에서 for문을 통해 각각의 리스트에 리스너를 달아주고 클릭시 함수가 실행되도록 하는 이벤트를 만들었다. 그러나 이는 양이 많아지면 많아질수록 리스트가 많아진다. DOM 스크립트가 많아질수록 웹이 무거워지므로 우리는 리스너를 줄일 수 있는 방법을 알아보자. - 이벤트 위임이란 리스너를 부모태그에게만 줌으로써 리스너의 사용을 최소화 하는 것이다. var currentMenu; var menu = document.querySelector('.menu'); function clickHandler(e) { if (currentMenu) { currentMenu.classList.remove('menu-active') } e.target.classList.add('menu-act..

티스토리툴바